在css的学习中，我得益最大的莫过于了解了共用css样式的工作方式，这种方式有效得让效率得到了较大的提升；另外，在布局中，要有一个清晰的思路，从大到小的规律让我们更好的操作，以及注释对于合作、修改的重要性......
额，还是看一些具体代码吧：
对于一些使用率高的属性我们可以这样：
/*公共样式 开始*/ body { font-family: "微软雅黑"; font-size:12px; } .fl { float: left; } .fr { float: right; } .clear { clear:both; } a { text-decoration: none; color:#fff; } a:hover{ color:#ccc; } li{ list-style:none; } .text-center{ text-align:center; } /*公共样式结束*/
对于布局我们可以这样：
<!-- 头部开始 -->
<div id="header"></div>
<!-- 头部结束 -->
<!-- 内容部分 -->
<div id="content">
<div class="left"></div>
</div>
<!-- 内容部分结束 -->
<!-- 底部开始 -->
<div id="footer"></div>
<!-- 底部结束 -->
以及二级导航的实现和背景图片的妙用：
html： <!-- 头部 --> <div id="header"> <a href="index.html"> <img src="images/logo.png" alt="" class="logo" /> </a> <ul class="nav"> <li> <a href="">集团简介</a> </li> <li> <a href="">项目简介</a> <ul class="child-nav"> <li> <a href="">株洲小巨蛋</a> </li> <li> <a href="">总体规划</a> </li> <li> <a href="">展贸中心</a> </li> <li> <a href="">区位介绍</a> </li> <li> <a href="">配送中心</a> </li> <li> <a href="">国际公寓</a> </li> <li> <a href="">二期发展</a> </li> </ul> </li> <li> <a href="">户型介绍</a> </li> <li> <a href="">新闻更新</a> </li> <li> <a href="">招商信息</a> </li> <li> <a href="">留言联系</a> </li> <li> <a href="">友情链接</a> </li> </ul> </div> <!-- 头部结束 --> css： /*页面头部 开始*/ #header { position: fixed; top:0; left: 0; 100%; height: 70px; background: url(../images/bg.png) repeat-x; } #header .logo { float: left; margin: 15px 62px 0 72px; } #header .nav { float: left; } #header .nav > li { float: left; 148px; height: 70px; overflow: hidden; background: url(../images/nav_bg.png) no-repeat right 0; transition: all .5s ease-in; } #header .nav > li:nth-child(2):hover { height: 400px; } #header .nav > li:last-child { background: none; } #header .child-nav li { height: 41px; line-height: 41px; text-align: center; background-color: #dfdfdf; border-bottom: 1px solid #c4c4c4; } #header .child-nav li:hover { background-color: #d0d1d2; } #header .nav > li > a { display: block; 147px; height: 70px; line-height: 70px; text-align: center; } #header .nav > li > a:hover { background: url(../images/nav_hover_bg.png); } #header .nav a { color: #535353; font-size: 14px; text-decoration: none; } /*页面头部 结束*/
心态嘛，心态、、、懒散拖拉的情况出现了，有时做作业时想想休息一下再做，然后、、、就GG了，是时候改过来了，怎么改呢？先做呗。
现在小组也拟出了一份规范：
类名、ID命名规范：
如：
<div class="news">
<div class="news01"></div>
<div class="news02"></div>
</div>
/*布局*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
/*公用类*/
* {
margin:0;
padding:0;
}
body {
font-family: "微软雅黑";
}
a{
text-decoration: none;
}
.clear {
clear: both;
}
.fl {
float: left;
}
.fr {
float: right;
}
.a-none{
text-decoration: none;
}
.li-none{
list-style: none;
}
.in-bl { /*行内块级*/
display:inline-block;
}