DIV+CSS页面布局中注意的问题以及常用的CSS使用方法

本文假定你了解基本的DIV+CSS知识.

DIV布局整理:

1、对于布局要使用DIV+CSS,使页面中的结构与表现完全分离，结构位于html文件中，表现位于css文件中

2、对于要显示数据，特别是表格的列表形状数据的地方可以使用表格,此时用DIV可能更不好.

3、CSS里多使用Class少使用id(对于特定元素可以使用ID)

4.对于门户型(163.com)，访问量大的地方(比如首页)CSS直接写在页面上(JS脚本也如此),而不是包含一个CSS文件。

5.对于CSS文件的大小要控制,不能太大.可以对页面进行分类,来选择要包含的.CSS文件.

6.DIV布局,宽度如果设置了百分比而不是绝对值,那要考虑页面被人为变小的时候,布局是否会发生混乱.

7.DIV布局要考虑浏览器兼容的问题,要保证主流浏览器都支持,比如ie6和firefox

CSS使用整理:

(1).AA{}表示伪类,使用的时候使用class="AA"

(2)Table{} 表示为表格设置默认样式

(3)table.table1{} 表格样式使用的时候,在<table>元素里 class="table1" 在其他HTML标签里不可用.(4)div#Search 表示为ID为Search的div设置样式 使用的时候该DIV不需要设置class属性

(5)div#HeadTop li 表示为id为HeadTop的DIV里的<li>元素设置样式,该元素无须设置class属性

(6)div#HeadTop li.left表示为id为HeadTop的DIV里的class="left"的<li>元素设置样式

(7).rightContent li a,.rightContent h3 a {color:#1f3a87; } 表示为CLASS="rightContent"的元素里的<li>里面的<a>设置颜色属性; class="rightContent"元素的<h3>元素里的<a>的颜色属性亦如此.(8).rightContent .theTip{ clear:both; padding:9px 0 0;} 表示为calss="rightContent" 里的子元素中class="theTip"设置样式.

(9)div#Head ul#GlobalNav div.NavAll li a:hover{}表示为id为Head的DIV元素里的id为GlobalNav里的UL元素里的id为NavAll的div元素里的的Li元素设置a的样式.(10)#ListPathLinks ul{float:left;} 表示为id为ListPathLinks里的ul元素设置样式.(11)#dl_centerlist {}表示为ID="dl_centerlist"的元素设置样式

(12)div#dl_centerlist和#dl_centerlist的区别:DIV元素指定了id="dl_centerlis";如果存在"div#dl_centerlist" 则该样式起作用,否则#dl_centerlist的样式将起作用.(13)标签潜套层次不能很深

(14)显示大文本块的话使用P

(15)使用CSS简写.

如:

border-width:1px;

border-style:solid;

border-color:#000; 

可简写为

border:1px solid #000;

(16)CSS元素是支持继承的,所以要减少CSS里的冗余样式.减少CSS文件的大小.

如body里面的样式在很多HTML标签里是默认被继承的.

(17)使用子选择器和组选择器,这样可以减少Class的定义原来的冗余:

<div id="subnav">

<ul>

<li class="subnavitem"> <a href="http://gss:7000/pages/editpage.action#" class="subnavitem">Item 1</a></li>>

<li class="subnavitemselected"> <a href="http://gss:7000/pages/editpage.action#" class="subnavitemselected"> Item 1</a> </li>

<li class="subnavitem"> <a href="http://gss:7000/pages/editpage.action#" class="subnavitem"> Item 1</a> </li>

</ul>

</div>

CSS定义是：

div#subnav ul { /* Some styling */ }

div#subnav ul li.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }

div#subnav ul li.subnavitemselected { /* Some styling */ }

div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 新的:

<ul id="subnav">

<li> <a href="http://gss:7000/pages/editpage.action#"> Item 1</a> </li>

<li class="sel"> <a href="http://gss:7000/pages/editpage.action#"> Item 1</a> </li>

<li> <a href="http://gss:7000/pages/editpage.action#"> Item 1</a> </li>

</ul>

CSS定义是：

#subnav { /* Some styling */ }

#subnav li { /* Some styling */ }

#subnav a { /* Some styling */ }

#subnav .sel { /* Some styling */ }

#subnav .sel a { /* Some styling */ }