欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

笔记  书写DIV+CSS需要注意的一些基本问题

Html5 原创 1034 0评论

一个网站设计的CSS文件个数最好是1~2个,如果是2个的话可以用一个公共(common)样式和一个主要(main)样式,样式个数少方便修改管理,出现问题能很快找出问题所在。


1.样式的规范性:

a)命名:最好用英文缩写,不会英文可以用Google翻译,并把常用的样式命名记下来,如:头部:head或header,中部:main或mainbody,底部用foot或footer。例:

<body>

<div id="header">头部内容</div>

<div id="main">中间内容</div>

<div id="footer">底部内容</div>

</body>


然后,可以继续在这三大块里面继续写其他的DIV。


b)格式书写规范:DIV无非就是层层嵌套,层层之间要对好关系,让人看起来简洁明了,例:

<body>
<div id="header">头部内容</div>
<div id="main">
     <div class=”m_left”>左边部分</div>
     <div calss=”m_right”>
          <div class=”right_top”>右边上部分</div>
          <div calss=”right_middle”>
                <div class=”other”>其他部分</div>
          </div>
</div>
</div>
<div id="footer">底部内容</div>
</body>

也就是每个DIV收尾在垂直位置上对其,子DIV适当后移空出一部分出来。


C)简洁明了:


①样式命名缩写:如想往左浮动:.fl{float:left;}; 宽度200:w200{width:200px},这些可以根据习惯。


②样式属性简洁:有时候有多个子属性的时候就可以合并,例

.fl{background:url(index.jpg);background-color:#999933;background-position:left;background-repeat:repeat-x;},

可以简写成 .fl{background:#999933 url(index.jpg) left repeat-x;}


③样式名称合并:有时候有多个样式需要设置float和border属性就可以合并,例:

.boxleft{ float:left; border:solid 1px #ccc;}; .boxright{ float:left; border:solid 1px #ccc;},

这两个就可以这样写成一行:.boxleft , .boxright{ float:left; border:solid 1px #ccc;},

中间用“,“分开。


④样式引用简洁:一个class里面可以引用多个样式,用空格分开,例

.fl{float:left;}  .box200{width:200px;}  .bold{font-weight:bold}  .red{color:#ff0000;}可以这么引用它们。

<div class=”fl box200 bold red”></div>


2.DIV高度和宽度

一个DIV一般要设置高度和宽度,大部分情况下宽度是给定的,高度要自动增加,因为内容多了。在固定高度和宽度情况下,一般要设置防溢出属性:overflow:hidden, 不然内容超出部分溢出,导致DIV变形,影响整个页面布局。


DIV在计算高度和宽度的时候要计算border和padding的距离,例

<div style=”width:200px; padding-left:20px; border:solid 5px #ccc”>那么这个div实际的宽度就是225px了,这点要注意。


3.DIV浮动

DIV一般都会设置浮动,除非是宽度是100%的情况下就不用了,设置浮动后需要清除浮动(用到属性:clear:both)溢出现象。一般在一个div里面,前面的部分div有浮动,后面的没有,那么就要设置清除浮动。例

<div>

<div style=”float:left”></div>  //这两个都有浮动

<div style=”float:left”></div>  //这两个都有浮动

<div style=”width:200px”></div>  //这个没有浮动

</div>

所以要在前两个div里面给他设置清除浮动的样式。可以这样

<div tyle=”float:left”>div内容<div style=”clear:both”></div></div>  //这两个都有浮动

<div style=”float:left”> div内容<div style=”clear:both”></div></div>  //这两个都有浮动

<div style=”width:200px”></div>  //这个没有浮动


4.DIV样式的距离

  Padding,Margin,Border等这样样式在设置内外间距时候,通常在IE6下会出现双倍距离,这是可以用:display:inline属性来解决,例

<div style=”margin-left:20px; padding:20px; float:left”></div>

可以写成

<div tyle=”margin-left:20px; padding:20px; float:left;display:inline”></div>


但这个只能针对DIV,如果一些列表样式ul,li,a的样式下不能用这个方法。


5.一些需要注意的问题

div文件里面不宜出现2个同名样式,如果是这样的话会以最后引用该样式的属性为标准,div样式的优先引用顺序是style>id>class。例

#head{width:200px;}  .heads{width:300px;}

<div id=”head” class=”heads”></div>,这个div最后的宽度是300px.

<div id=”head” class=”heads” style=”width:500px;”></div>,这个div最后的宽度是500px.


一般情况下,如果一个DIV的样式仅用到一次,就用id来命名,需要用到多次就用class属性。Id用“#”,class用“.”


注意一些样式的默认属性,默认的就不用设置了,比如宽度和高度默认都是0,自动增长,display默认的师block等,


A的样式

A:link 默认链接样式

A:visited 点击过后的链接样式

A:active 点击瞬间的样式

A:hover 鼠标放上去的样式


ul,li,ol,dl,dt,dd一般用于列表,<h1><h2>…一般用于文字主题,用的时候要注意。


div标准居中:*{margin:0 auto; padding:0;}


常用命名及缩写参考(个人习惯):

.fl{ float:left}
.fr{ float:right}
.ml{ margin-left:}
.mt{margin-top:}
.ml10{margin-left:10px;}
.pl{padding-left}
.pl10{ padding-left:10px;}
.w200{width:200px;}
.h300{width:300px;}
.red{color:#ff0000},
.bold{font-weight:bold},
.font12{font-size:12px;}


转载请注明: ITTXX.CN--分享互联网 » 书写DIV+CSS需要注意的一些基本问题

最后更新:2019-01-11 09:41:10

赞 (2) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽