返回顶部
首页 > 资讯 > 精选 >html和css基础注意点有哪些
  • 708
分享到

html和css基础注意点有哪些

2023-06-08 02:06:23 708人浏览 薄情痞子
摘要

html和CSS基础注意点有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1      减少无意义标签的使用 简单的举个例

htmlCSS基础注意点有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

1      减少无意义标签的使用

简单的举个例子:

html和css基础注意点有哪些

对于这个顶部的结构,

错误:通栏>版心>左边+(右边>ul>li*9>a)

正确:通栏>版心>左边+(ul>li*9>a)

对于右边的部分,不需要使用一个div包裹ul,明明一个ul就可以实现何必使用多余的div标签进行嵌套呢。所以在编写过程中明明可以用一个标签解决的,不要使用无意义的标签多层嵌套。

2      关于命名

以前学习java,因为英语不好,喜欢用拼音命名,这样做不好,虽然一开始学习就知道,但是并不是很注意。在身边人的提醒下,尤其自己也感觉用拼音的不便性,纠正,以后要更注意命名。英语不好没关系,这不是还有有道和度娘吗?

再有就是标签发生嵌套时候的命名。一般同一层级的标签的命名问题不是很大,只需要使用一个单词就可以。但是当发生嵌套的时候就需要使用“-”进行连接,不然很容易自己分不清哪个标签是哪个。比如以上那个顶部通栏可以使用top命名整个,右边部分可以叫top-right,后面可能还会有top-right-detail-link如果太长就可以缩写为top-r-d-link,还是太长甚至可以缩写为trd-link,注意是太长才缩写,短的话为了保证意思的理解不用缩写,另外最后一个单词为了理解也最好不要缩写。

3      特殊符号的使用

上面那个下拉箭头是使用菱形符号◇制作的,使用了两个标签进行嵌套书写,

<i><s>◇</s></i>

s标签使用position控制需要显示部分的位置,i标签控制窗口大小,同时隐藏溢出。

CSS Code复制内容到剪贴板

  1. i {   

  2.     width: 15px;   

  3.     height: 8px;   

  4.     position: relative;    

  5.     overflow: hidden;   

  6. }   

  7. i s {   

  8.     font: 400 14px/14px consolas;   

  9.     position: absolute;   

  10.     top: -6px;   

  11. }  

以上是通行的做法,作为菜鸟,在不考虑兼容的情况下,感觉使用一个标签就可以解决,对于字符使用行高控制垂直位置,用宽高限制显示区域。

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>  

  2. <html>  

  3. <head lang="en">  

  4.     <meta charset="UTF-8">  

  5.     <title>测试</title>  

  6.     <style>  

  7.         i {   

  8.             display: inline-block;   

  9.             height: 50px;   

  10.             width: 100px;   

  11.             overflow: hidden;   

  12.             font: 400 100px/0px SimSun;    

  13.         }   

  14.     </style>  

  15. </head>  

  16. <body>  

  17. <i>◇</i>  

  18. </body>  

  19. </html>  

这是效果:  html和css基础注意点有哪些

目前只是测试了在谷歌,火狐下的效果,没有问题,有什么不妥之处还请指出。

4      相邻行内块元素之间的距离

上面的导航如果使用转化为行内块元素,那么相邻两个元素之间就会有几像素的距离,可能粗看看不出来,但是放大以后可以看见,解决这个问题的唯一办法就只能使用浮动。

5      数值的连写:

在css中有一些属性的值可以连写。比如padding、border-radius。前者为上、右、下、左,后者四个方向为左上、右上、右下、左下。它们都是顺时针方向排列的,只是起点不同。如果将四个方向看作a、b、c、d。那么当后面书写连续的2个数值时代表的是:ac、bd;3个数值代表a、bd、c;4个数值不用说代表的就是a、b、c、d了。

6      清除浮动

清除浮动的方法有4种,最普遍的是使用伪元素。

CSS Code复制内容到剪贴板

  1. .clearfix:before, .clearfix:after {   

  2.     content: "";   

  3.     display: table;   

  4. }   

  5. .clearfix:after {   

  6.     clear: both;   

  7. }   

  8. .clearfix {   

  9.     *zoom: 1;     

  10. }  

7      设置高度

上面讲到浮动突然想到关于的板块高度的问题,一般来说尽量不要使用一个固定的高度把一个板块写死,不要写死!不要写死!不要写死!重要的事情说3遍。写死了怎么做响应式?

8      元素的margin,padding

对于所有元素margin和padding的水平方向(左右)都是起作用的,只有行内元素的垂直方向(上下)是不起支撑作用的。需要注意的是padding可以将元素边框撑大,但是并不会将元素挤离原来的垂直位置。

 html和css基础注意点有哪些html和css基础注意点有哪些

9     相对定位与绝对定位的使用

定位总共有四种:绝对定位、相对定位、固定定位、静态定位。后两种定位,没有什么好说的,就是前面的两种定位,需要注意的是相对定位会占据原来文档流的位置,而绝对定位则不占据原来的文档流位置,所以在需要使用定位的时候,需要按照实际情况,具体情况具体分析,考虑到底是使用相对定位还是使用绝对定位。举个栗子:

CSS Code复制内容到剪贴板

  1. * { margin: 0; padding: 0; color: #fff; font-size: 20px; }   

  2.         .nav { height: 30px; background-color: pink; border-bottom: 4px solid red; }   

  3.         .w { width: 100px; margin: 0 100px; position: relative; height: 30px; z-index: 1; }   

  4.         .nav-list { height: 30px; background-color: red; }   

  5.         .left { width: 100%; height: 400px; background-color: peru; position: absolute; }   

  6.         .b { margin-left: 210px; width: 100px; height: 100px; background-color: lightblue; position: relative; }  

XML/HTML Code复制内容到剪贴板

  1. <div class="nav">  

  2.     <div class="w">  

  3.         <div class="nav-list">list</div>  

  4.         <div class="nav-list">list</div>  

  5.         <div class="nav-list">list</div>  

  6.         <div class="nav-list">list</div>  

  7.         <div class="nav-list">list</div>  

  8.     </div>  

  9. </div>  

  10. <div class="left">left</div>  

  11. <div class="b">b</div>  

html和css基础注意点有哪些

List属于上面部分,left为底层的广告,b是下面板块的内容,如果完全使用相对定位和绝对定位解决问题,那么left为了不影响下面的板块应该使用absolute,这样的话超过上面部分的list就会被遮盖,所以要给list的父盒子设置一定的层级,照道理来说需要使用relative去占据上面部分的位置,因为他依旧属于上面的部分。这样的话需要给b也设置relative,为了不被遮挡还需要设置左外边距。

10  使用定位居中元素

块级元素的水平居中可以使用margin:0 auto;使用定位解决的办法是:设置定位后设置left(top)为50%,再使用margin-left回退自己身位的一半。

CSS Code复制内容到剪贴板

  1. height: 20px;   

  2. width: 50px;   

  3. position: absolute;   

  4. left: 50%;   

  5. margin-left: -25px;  

11  背景和图片

经常被问到应该什么情况下使用img插入图片,什么时候用背景。简单得讲我认为,一般的网站里的图标都用背景,具体涉及到某件产品那么使用img图片。

看完上述内容,你们掌握html和css基础注意点有哪些的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网精选频道,感谢各位的阅读!

--结束END--

本文标题: html和css基础注意点有哪些

本文链接: https://lsjlt.com/news/251069.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html和css基础注意点有哪些
    html和css基础注意点有哪些,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1      减少无意义标签的使用 简单的举个例...
    99+
    2023-06-08
  • Html与css基础有哪些要注意的
    这篇文章将为大家详细讲解有关Html与css基础有哪些要注意的,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。(1)、html:超文本标记语言(HyperText Markup&nb...
    99+
    2023-06-08
  • html css基础知识点有哪些
    今天小编给大家分享一下html css基础知识点有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了...
    99+
    2024-04-02
  • html和css基础知识有哪些
    本篇内容主要讲解“html和css基础知识有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html和css基础知识有哪些”吧!Html是超文本标记语言(英语全称:HyperText Mark...
    99+
    2023-06-05
  • HTML、CSS、JS的基础知识点有哪些
    本篇内容介绍了“HTML、CSS、JS的基础知识点有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Web概述Web三要素:浏览器,服务器...
    99+
    2023-06-27
  • html基础知识点有哪些
    这篇文章主要介绍了html基础知识点有哪些,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。HTML语义化HTML标签的语义化是指:通过使用包含...
    99+
    2024-04-02
  • CSS基础知识点有哪些
    这篇文章主要为大家展示了“CSS基础知识点有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS基础知识点有哪些”这篇文章吧。CSS3 选择器选择器可以被分...
    99+
    2024-04-02
  • HTML中有哪些基础知识点
    本篇内容主要讲解“HTML中有哪些基础知识点”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML中有哪些基础知识点”吧!一、 HTML的基本结构<head>  ...
    99+
    2023-06-27
  • html与css注意事项有哪些
    今天小编给大家分享一下html与css注意事项有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解...
    99+
    2024-04-02
  • Css中基础知识点有哪些
    这篇文章给大家分享的是有关Css中基础知识点有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。块元素、内联元素块元素是一个元素,占用了全部宽度,在前后都是换行符内联元素只需要必...
    99+
    2024-04-02
  • CSS的基础知识点有哪些
    这篇文章主要介绍“CSS的基础知识点有哪些”,在日常操作中,相信很多人在CSS的基础知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS的基础知识点有哪些”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-06-27
  • Html基础入门知识点有哪些
    这篇文章主要介绍“Html基础入门知识点有哪些”,在日常操作中,相信很多人在Html基础入门知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Html基础入门知识点有...
    99+
    2024-04-02
  • 前端开发中HTML与CSS基础知识点有哪些
    这篇文章将为大家详细讲解有关前端开发中HTML与CSS基础知识点有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 前端1 什么是前端前端...
    99+
    2024-04-02
  • css核心基础知识点有哪些
    这篇文章给大家分享的是有关css核心基础知识点有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。层叠样式表层叠是什么意思?为什么这个词如此重要,以至于要出现在它的名称里。层叠可...
    99+
    2024-04-02
  • HTML入门基础的知识点有哪些
    这篇文章给大家分享的是有关HTML入门基础的知识点有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。标记、标签、元素标签和元素通常是描述同样的意思,但是严格来说,一个HTML元...
    99+
    2024-04-02
  • HTML标签的基础知识点有哪些
    这篇文章主要介绍“HTML标签的基础知识点有哪些”,在日常操作中,相信很多人在HTML标签的基础知识点有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”HTML标签的基础知...
    99+
    2024-04-02
  • CSS的布局基础知识点有哪些
    本篇内容介绍了“CSS的布局基础知识点有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!常见布局种类一列布局自上而下的,一般头部进行固定宽...
    99+
    2023-06-27
  • html标准主要注意重点有哪些
    这篇文章主要介绍html标准主要注意重点有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!注意html的web标准标准html符合w3c的源代码如下<!DOCTYPE&nbs...
    99+
    2024-04-02
  • html和js的基础知识有哪些
    本篇内容主要讲解“html和js的基础知识有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html和js的基础知识有哪些”吧!   html,js,xml...
    99+
    2024-04-02
  • HTML基础标签有哪些
    本文小编为大家详细介绍“HTML基础标签有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML基础标签有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。   什么是H...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作