关于页面开发的一些感想

一开始编写CSS代码时，对body和每个元素的定义是很有必要的，个人喜欢以下定义

body{ text-align:center; vertical-align:middle; background:#fff; font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#000; margin:0; padding:0; line-height:20px;}/*对一些元素进行初始设定，节约以后的代码量*/

ul,li,img,select,option,input{ margin:0; padding:0; border:none; vertical-align:middle; list-style:none;}/*这些平时经常用的标签事先处理好*/

#main{ width:980px; margin:0 auto; text-align:center;}/*在开始编辑时先套上这个大DIV，这里装载所有的代码量*/

导航条：

一般的导航条是用ul方式去排版，不管是2级菜单还是3级菜单，用这个方法百试百灵，还有其他文字排版优先考虑ul，如需有这种更换效果

可参考以下代码

#header ul li a{ display:block; text-decoration:none; padding:10px 13px; float:left;}/*这里对链接进行'块'的处理，把它变成一个可选区域*/
#header a:hover{ background-image: url(../images/hover.jpg); background-repeat:repeat-x; color:#03F;}/*鼠标经过时的处理效果*/

超链接
一般网站的超链接都会分有几种效果和颜色的变化，针对这问题，处理的方式是：定义几种超链接的样式，不同的效果可套用不同的样式，这样方便很多。如

a.normal,a.special{ text-decoration:none; color:#000;}
a.normal:hover{ color:#F00;}
a.special:hover,a.usual:hover{ color:#FF6600; text-decoration:underline;}
a.usual{ color:#069; text-decoration:none;}/*这里定义了3种超链接样式*/

代码重用

一般的网站都会分有好几种专题或者区域，它们的排版都类似的相同，其实，我们完全可以套用CSS代码，减少代码的编写量

做页面开发时，先思考有哪几个区域是类似的，然后把这些区域记一个标号，在DIV命名时可套用相同的名字，再编写CSS。如果这些区域有一点点差别的话，也没关系，可用细分方法去控制。如

#tit_col{ width:100%; height:30px; float:left;color:#069; background:url(../images/tit_all.jpg) repeat-x; line-height:28px;}/*这是一个共同的区域名字命名*/

#wd #tit_col{ color:#e74b88;}/*有个别不同的话细分DIV来控制*/

又或者一些DIV不同名字，但样式几乎相同，可采取这种方法

#column,#wd{ width:430px; height:247px; float:left; border:1px solid #e5e5e5;}/*两个DIV，一样的属性*/

#wd{ width:210px;}/*不同的属性可另外定义*/

这样真的就减少很多代码了

代码简化

CSS代码的简化方法：减少无用代码的编写，举个例子：

border-top-width: 1px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #e5e5e5;
 border-right-color: #e5e5e5;
 border-bottom-color: #e5e5e5;
 border-left-color: #e5e5e5;   /*这种代码看到头都会晕*/

border:1px solid #e5e5e5; /*这是简化的代码，效果很明显了*/

还有很多代码可以简化的，详细的可以去查找相关资料看看