标签：
1、行内样式、内联样式、链接式、导入式 标签选择器 class选择器 ID选择器 优先级：标签选择器<class<id
2、行内元素的宽度高度 不会单独占满一行
3、margin padding
4、margin:0px auto;
5、display:none; visibility:visible
6、/**/
7、list-style-type:square
8、margin:5px 2px;
9、兼容性
10、text-align:center line-heigt
11.content border padding margin
12绝对定位脱离了文档流，不受float影响 top left相对于整个页面 相对定位相对它的父元素
13clear：both
14z-index值 position：absolute
15target="_blank"
16background-color -image attchment size:over
17overflow:auto;
18lvha原则
19*{margin:0 padding:0}
20display:block inline inlie-block
示例1
<div id="main">
<div id="title"><h1>淘宝特色服务</h1></div>
<div class="con">
<div id="t1" class="contitle">主题市场</div>
<div class="conlist">
<ul>
<li class="w64"><a href="javascript:;">淘宝女人</a></li>
<li class="w54"><a href="javascript:;">运动派</a></li>
<li class="w38"><a href="javascript:;">情侣</a></li>
<li class="w64"><a href="javascript:;">淘宝女人</a></li>
<li class="w54"><a href="javascript:;">运动派</a></li>
<li class="w38"><a href="javascript:;">情侣</a></li>
<li class="w64"><a href="javascript:;">淘宝女人</a></li>
<li class="w54"><a href="javascript:;">运动派</a></li>
<li class="w38"><a href="javascript:;">情侣</a></li>
</ul>
</div>
</div>
</div>
*{ margin:0px; padding:0px; font-size:12px; font-family:微软雅黑;}
ul li{list-style-type:none;}
a{ text-decoration:none;}
#main{ width:190px; margin-left:9px; border:1px solid #FF4400;}
#title{ height:30px; background-color:#FF4400;}
#title h1{ color:#FFF; height:30px; line-height:30px; padding-left:16px; font-size:15px; font-weight:900;}
.con{ border-bottom:1px solid #e6e6e6; height:150px; margin:10px 15px 0px;}
#t1{ background-image:url(../image/bg_1.jpg); background-repeat:no-repeat;}
.contitle{ height:25px; padding-left:30px; font-size:15px; font-weight:900;}
.conlist li{float:left;}
.conlist li a{ color:#3c3c3c; display:block; height:25px;}
.conlist li a:hover{ color:#ff4401;}
.w64{ width:64px;}
.w54{ width:54px;}
.w38{ width:38px;}
#t2{ background:url(../image/bg_2.jpg) no-repeat;}
#t3{ background:url(../image/bg_3.jpg) no-repeat;}
总结：
1、写布局第一个div时，不写height。
2、文本用H1标签 注意语义化
3、写内容时注意高度，如果是相同的可以写，如果不是可以自动。
4、有相同点和不同点时，需要进行分析。第二级标题有图片时，加入id class两个属性值 id在css里加入图片 class控制标题其它样式
5、当div的宽度是固定时，ul里li是可以自动换行的。 li宽度不同时可以添加width加以区别 宽度包含右面LI的距离 不建议用padding
6、与父标签的距离用margin
7、代码的可读性一定要加强。要非常清晰,用div布局。
示例2
<div id="d1">
<div class="proitem">
<div class="proimage"><a href="#"><img src="image/pro.jpg" alt="商品图片" /></a></div>
<div class="proprice">
<div class="price">￥99.0</div>
<div class="freepostage">包邮</div>
<div class="bugnum">8520人付款</div>
</div>
<div class="protitle"><a href="#">最新款米薇儿女包包时尚潮女单肩包鳄鱼皮斜挎包超级可爱的</a></div>
<div class="addressinfor">
<div class="shopname"><a href="#">mivor米薇儿旗舰店</a></div>
<div class="address">河北保定</div>
</div>
<div class="logo">
<div class="logo1"><img src="image/logo_1.jpg" /></div>
<div class="logo2"><img src="image/logo_2.jpg" /></div>
</div>
</div>
</div>
body { font-size:12px; font-family:"微软雅黑";}
a{ text-decoration:none;}
img{ border:none;}
.proitem{ width:220px; height:360px; border:1px solid #EDEDED;}
.proprice{ height:17px; margin:10px 7px 0px;}
.price{ float:left;width:79px; font-size:20px; color:#ff4400; font-weight:bold; }
.freepostage{ float:left;width:28px; text-align:center; color:#fff; background-color:#fd4401; }
.bugnum{ float:right; color:#888;}
.protitle{ height:33px; margin:10px 7px 0px; line-height:16px;}
.protitle a{ color:#3d3d3d;}
.addressinfor{ height:16px; margin:10px 7px 0px; color:#888;}
.shopname{ float:left;}
.shopname a{ text-decoration:underline;}
.address{ float:right;}
.logo{ margin:10px 7px 0px;}
.logo1{ float:left;}
.logo2{ float:right;}
总结：1、布局用div，要清晰 2、class命名要规范 3、使用浮动 4、与兄弟和父亲的距离用margin
示例3：
<div id="header">
<div id="art_navtext">
<ul>
<li><a href="#">39健康网首页</a></li>
<li><a href="#">药品通</a></li>
<li><a href="#">疾病百科</a></li>
<li><a href="#">就医助手</a></li>
</ul>
</div>
<div id="navlogin">
<div id="login"><a href="#">登陆</a></div>
<div id="reg"><a href="#">注册</a></div>
</div>
</div>
<div id="mainbody">
<div id="logo"></div>
<div id="searchpart">
<div id="keyword"><input id="words" type="text" /></div>
<div id="btn"><input id="btnsearch" type="button" /></div>
</div>
<div id="keys">
<span>热门搜索:</span>
<ul>
<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