DIV+CSS网页布局的基础知识整理

作者佚名技术来源 CSS技术浏览发布时间 2012-03-04

式，在简化命名的同时也使结构更加的清晰化，如：

.mainMenu ul li {background:url(images/bg.gif;)}

6、辅助图片用背影图处理：

这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：

#logo {background:url(images/logo.jpg) #FEFEFE no-repeat right bottom;}

7、结构与样式分离：

在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。

8、文档的结构化书写：

页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：

<div id=”mainMenu”>
<ul>
<li><a href=”#” >首页</a></li>
<li><a href=”#” >介绍</a></li>
<li><a href=”#” >服务</a></li>
</ul>
</div>

/*=====主导航=====*/
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg) repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
/*=====主导航结束=====*/

9、鼠标手势：

在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”

二．注释书写规范

1、行间注释：

直接写于属性值后面，如：

.search{
border:1px solid #fff;/*定义搜索输入框边框*/
background:url(../images/icon.gif) no-report #333;/*定义搜索框的背景*/
}

2、整段注释：

分别在开始及结束地方加入注释，如：

/*=====搜索条=====*/
.search {
border:1px solid #fff;
background:url(../images/icon.gif) no-repeat #333;
}
/*=====搜索条结束=====*/

三．样式属性代码缩写

1、不同类有相同属性及属性值的缩写：

对于两个不同的类，但是其中有部分相同甚至是全部相同的属性及属性值时，应对其加以合并缩写，特别是当有多个不同的类而有相同的属性及属性值时，合并缩写可以减少代码量并易于控制。如：

#mainMenu {
background:url(../images/bg.gif);
border:1px solid #333

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

分享到：更多

你可能对下面的文章感兴趣

上一篇: css教程:css和document下一篇: CSS网页布局的好处与坏处

关于DIV+CSS网页布局的基础知识整理的所有评论

随机推荐