啊啊啊 错误百出啊 错点总结： 字符全角半角、清楚浮动、结尾</div>有点乱找不到对应的了、注释要写好、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="mlsm.css">
</head>
<body>
<!-- 顶部导航 -->
<div class="top clearfix">
<div class="top-a">
<div class="top-l"><a href="#">您好，欢迎来到素材网</a></div>
<div class="top-r">
<ul>
<li><a href="#">网站导航<span></span></a></li>
<li><a href="#">客服中心<span></span></a></li>
<li><a href="#">建材服务<span></span></a></li>
<li><a href="#">我的收藏<span></span></a></li>
<li><a href="#">我的商务室<span></span></a></li>
<li><a href="#">素材网首页<span></span></a></li>
</ul>
</div>
</div>
</div>
<!-- 顶部导航结束 -->
<!-- 顶部logo和搜索 -->
<div class="search clearfix">
<div class="logo fl"><img src="1.png" alt="logo"></div>
<div class="r-search fr">
<input type="text" value="请输入关键字">
<input type="button">
</div>
</div>
<!-- 主导航 -->
<div class="nav clearfix" >
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">建筑材料</a></li>
<li><a href="#">儿童安全座椅</a></li>
<li><a href="#">工艺美术品</a></li>
</ul>
</div>
<!-- banner部分开始 -->
<div class="banner clearfix">
<!-- 左侧盒子 -->
<div class="l-banner">
<div class="l-banner-title">商机市场</div>
<ul>
<li class="img1"><a href="#">建筑材料</a></li>
<li class="img2"><a href="#">儿童安全座椅</a></li>
<li class="img3"><a href="#">工艺美术品</a></li>
<li class="img4"><a href="#">建筑材料</a></li>
<li class="img5"><a href="#">儿童安全座椅</a></li>
<li class="img6"><a href="#">工艺美术品</a></li>
</ul>
</div>
<!-- 中间的盒子 -->
<div class="c-banner "><a href="#"><img src="center.png" height="212" width="520" alt=""></a></div>
<!-- 右侧的盒子 -->
<div class="r-banner ">
<div class="banner-top"><a href="#"><img src="center-r.png" alt=""></a></div>
<div class="banner-top"><a href="#"><img src="center-r2.png" alt=""></a></div> </div>
</div>
<!-- 建筑材料 -->
<div class="bud clearfix">建筑材料</div>
<!-- 左侧大盒子 -->
<div class="pro">
<div class="l-pro fl">
<div class="t-l-pro">
<!-- 第一个盒子 -->
<div class="l-t-l-pro fl">
<div class="left-sidebar fl">
<div class="t-left-sidebar">
<img src="c1.png" alt=""></div>
<!-- 立即购买 -->
<div class="b-left-sidebar"><input type="button"></div></div>
<!-- 图片右侧的盒子 -->
<div class="right-sidebar fl">
<p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
<p class="three"><span>239.00</span>
<del> ¥386.00</del></p>
<p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
</div>
</div>
<!-- 横着第二个盒子 -->
<div class="l-t-l-pro fl">
<div class="left-sidebar fl">
<div class="t-left-sidebar">
<img src="c1.png" alt=""></div>
<!-- 立即购买 -->
<div class="b-left-sidebar"><input type="button"></div></div>
<!-- 图片右侧的盒子 -->
<div class="right-sidebar fl">
<p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
<p class="three"><span>239.00</span>
<del> ¥386.00</del></p>
<p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
</div>
</div></div>
<!-- 中间的线 -->
<div class="line"></div>
<!-- 底部的盒子 -->
<div class="t-l-pro">
<div class="l-t-l-pro fl">
<div class="left-sidebar fl">
<div class="t-left-sidebar">
<img src="c1.png" alt=""></div>
<!-- 立即购买 -->
<div class="b-left-sidebar"><input type="button"></div></div>
<!-- 图片右侧的盒子 -->
<div class="right-sidebar fl">
<p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
<p class="three"><span>239.00</span>
<del> ¥386.00</del></p>
<p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
</div>
</div>
<!-- 底部横着第二个盒子 -->
<div class="l-t-l-pro fl">
<div class="left-sidebar fl">
<div class="t-left-sidebar">
<img src="c1.png" alt=""></div>
<!-- 立即购买 -->
<div class="b-left-sidebar"><input type="button"></div></div>
<!-- 图片右侧的盒子 -->
<div class="right-sidebar fl">
<p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="two">自动换挡 安全耐用<br>稳定性好 抗氧化强</p>
<p class="three"><span>239.00</span>
<del> ¥386.00</del></p>
<p class="four">限量<span>99</span>件已售出<span>20</span>件</p>
</div> </div></div> </div>
<!-- 右侧的盒子 --> <div class="r-pro fr">
<div class="top-r-pro ">建材资讯</div>
<div >
<ul>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
</ul>
</div>
</div>
</div>
<!-- 儿童安全座椅 -->
<div class="bud clearfix">儿童安全座椅</div>
<!-- 儿童安全座椅专区 -->
<div class="baby clearfix"> <!-- 右侧盒子 -->
<div class="r-baby fr">
<img src="et_right.png" class="t-pic" alt="">
<br>
<img src="et_right_bottom.png" height="177" width="218" alt=""> </div>
<!-- 左侧盒子 -->
<div class="title fl"><a href="#">详情请点击>></a></div>
<div class="box fl">
<div class="ban fl">
<div class="one"><img src="et01.png" height="170" width="164" alt="">
<p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
<p class="et2">适合年龄9个月-4岁</p>
<p class="et3">市场价:<span>¥5580</span></p>
<p class="et4">直销价:<span>¥3380</span></p>
</div>
</div>
<div class="ban fl">
<div class="one"><img src="et01.png" height="170" width="164" alt="">
<p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
<p class="et2">适合年龄9个月-4岁</p>
<p class="et3">市场价:<span>¥5580</span></p>
<p class="et4">直销价:<span>¥3380</span></p>
</div>
</div>
<div class="ban fl ">
<div class="one"><img src="et01.png" height="170" width="164" alt="">
<p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
<p class="et2">适合年龄9个月-4岁</p>
<p class="et3">市场价:<span>¥5580</span></p>
<p class="et4">直销价:<span>¥3380</span></p>
</div>
</div>
<div class="ban fl">
<div class="one"><img src="et01.png" height="170" width="164" alt="">
<p class="et1">英国百代适-至尊者（带<br>ISOFIX）奔驰宝马专用</p>
<p class="et2">适合年龄9个月-4岁</p>
<p class="et3">市场价:<span>¥5580</span></p>
<p class="et4">直销价:<span>¥3380</span></p>
</div>
</div>
</div>
</div>
<!-- 工艺艺术品 -->
<div class="bud ">工艺艺术品</div>
<!-- 艺术品图片 -->
<div class="art clearfix">
<!-- 上面的盒子 -->
<div class="t-art fl">
<!-- 左边的 -->
<div class="t-one ">
<div class="t-t-one fl">
<div class="t-icon fl">
<div class="l-t-icon">
<img src="c1.png" >
</div>
<input type="button" >
</div>
<div class="right-p fr">
<p class="p1 " > 好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p> <p><span class="money1">239.00</span>
<span class="money2">386.00</span></p>
<p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
</div></div> <div class="t-t-one fr">
<div class="t-icon fl">
<div class="l-t-icon">
<img src="c1.png" >
</div>
<input type="button" >
</div>
<div class="right-p fr">
<p class="p1 fl" > 好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p> <p><span class="money1">239.00</span>
<span class="money2">386.00</span></p>
<p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
</div></div></div>
<!-- 中间的线 -->
<div class="c-linee ">
<!-- 下面的盒子 -->
<div class="t-one fl">
<div class="t-t-one fl">
<div class="t-icon fl">
<div class="l-t-icon">
<img src="c1.png" >
</div>
<input type="button" >
</div>
<div class="right-p fr">
<p class="p1 " > 好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p> <p><span class="money1">239.00</span>
<span class="money2">386.00</span></p>
<p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
</div></div> <div class="t-t-one fr">
<div class="t-icon fl">
<div class="l-t-icon">
<img src="c1.png" >
</div>
<input type="button" >
</div>
<div class="right-p fr">
<p class="p1 fl" > 好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2 "> 自动换挡 安全耐用<br> 稳定性好 抗氧化强</p> <p><span class="money1">239.00</span>
<span class="money2">386.00</span></p>
<p class="p3">限量<span class="number">99</span>件已售出<span class="number">20</span>件</p>
</div></div></div></div></div>
<!-- 艺术品右侧 -->
<div class="r-pro fr">
<div class="top-r-pro">建材商社</div>
<div class="light fr "><img src="subtitle.png">在装灯具时，如果装上分开关，可以省去很多烦恼，因为如果只有一个总开关</div>
<ul>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢铁市场7月17日价格行情</a></li>
</ul></div></div>
<!-- 友情链接 -->
<div class="flink">
<div class="flink-con ">
<div class="txt-flink" >友情链接:</div>
<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></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>
<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>
<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>
<li><a href="#">爱佳萌网</a></li>
</ul> </div></div>
<!-- 关于我们 -->
<div class="copyright">
<ul <!-- class="clearfix" -->
<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>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<p class="p1">中国建网 版权所有 2000-20012 服务热线：0571-98899898 请与我们联系：server@163.com</p>
<p class="p2">建材网会员互动群：12312313213本网实名:中建网</p> </div> </body> </html>
/*
* @Author: Mingming
* @Date: 2017-03-03 09:52:05
* @Last Modified by: Mingming
* @Last Modified time: 2017-03-04 10:05:48
*/
/* 页面清理 */
body,div,p,ul,li{
margin:;
padding:;
font:12px 宋体;
}
input,img{
border:0 none;
}
input{
outline-style: none;
}
a{
color: #000;
text-decoration: none;
}
ul,li{
list-style: none;
}
.clearfix:after{
display: block;
content: "." ;
line-height:;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:;
}
.copyright,.flink,.baby,.top-a,.search,.nav,.banner,.bud,.pro,.art{
width: 970px;
margin: 0 auto;
}
/* 顶部导航 */
.top{
background-color: #F7F7F7;
border:1px solid #D8D8D8 ;
height:26px;
} .top-l ,.fl{
float: left;
}
.top-r,.fr{ float: right;
}
.top-l,.top-r{
line-height: 26px;
}
.top-r ul ,.top-r li ,.top-r a{
display: inline-block;
}
.top-r li{
background: url(sj.png) right no-repeat;
padding-right: 2px;
}
.top-r a{
padding-right:10px;
height: 26px;
}
/* 顶部导航结束 */
/* 顶部logo */
.search{
margin-top: 12px;
height: 84px;
}
.search .logo{
width: 200px;
height: 84px;
}
.r-search{
width: 528px;
height: 40px;
border:1px solid #C9C9C9;
background: #f5f5f5;
margin-top: 30px;
}
.r-search input[type=text]{
width: 419px;
height: 28px;
border:1px solid #A6A6A6;
float: left;
margin: 4px 0 0 4px;
}
.r-search input[type=button]{
width: 96px;
height: 32px;
background: url(serch.png);
float: left;
margin-top: 4px;
}
/* 顶部logo和搜索框结束 */
/* 主导航 */
.nav{
margin-top: 12px;
height: 25px;
border-bottom: 3px solid #0266a2;
}
.nav ul li{
float: left;
}
.nav ul li a{
display: inline-block;
height: 25px;
line-height: 25px;
padding:0 16px;
color: #2F6CAD;
}
/* 商机市场 */
.banner{
margin-top: 10px;
/* margin-bottom: 15px; */
}
/* 左侧盒子 */
.l-banner{
width: 200px ;
height: 210px ;
float: left;
background: #EBF0F6;
}
.l-banner-title{
height: 30px;
line-height: 30px;
color: #fff;
padding-left:20px ;
background-color: #0266A2 ;
}
.l-banner ul{
margin-top: 5px;
}
.l-banner ul li{
height: 28px;
line-height: 28px;
padding-left: 40px;
}
.img1{background: url("icon_1.png") no-repeat 12px;}
.img2{background: url("icon_2.png") no-repeat 10px;}
.img3{background: url("icon_3.png") no-repeat 8px;}
.img4{background: url("icon_4.png") no-repeat 9px;}
.img5{background: url("icon_5.png") no-repeat 9px;}
.img6{background: url("icon_6.png") no-repeat 9px;}
/*中间的盒子 */
.c-banner{
float: left;
width: 520px;
height: 212px;
}
/* 右侧的盒子 */
.r-banner{
float: right;
width: 230px;
height: 210px;
}
.banner-top{
height: 95px;
width: 229px;
margin-bottom: 10px;
border-right: 1px solid #DFE6F0;
}
/* 建筑材料 */
.bud,.child，{
width: 948px;
height: 34px;
background: #EBF0F6 ;
padding-left: 22px ;
line-height: 34px;
font-weight:;
font-size: 14px;
margin-bottom: 10px;
margin-top: 10px;
border-top: 3px solid #C3D6E4 ;
}
/* 好太太衣架 */
.pro{
height:344px ;
/* background-color: #DBDBEA ; */
}
.l-pro{
width:729px ;
height: 346px;
border: 1px solid #CACACA;
/* background: #757584; */
}
.t-l-pro{
width: 666px;
height: 142px;
margin:15px 0 15px 26px; /* background: #9B9B8C ; */
}
.l-t-l-pro{
width: 331px;
height: 142px;
/* background: #B9B9C8; */ }
.left-sidebar{
width: 99px;
height:145px ;
} .t-left-sidebar{
width: 97px;
height:63px;
border:1px solid #CACACA;
padding:19px 0 18px 0;
text-align: center;
margin-bottom: 15px;
}
input[type=button]{
/* display: inline-block; */
width: 99px;
height: 26px;
background:url("buy.png");
}
.right-sidebar{
height: 142px;
width: 220px;
margin-left: 10px; }
.right-sidebar p{ font-size: 14px; }
.one{
height: 30px;
margin-top: 9px;
}
.two{
height: 17px;
}
.three{
margin-top: 30px;
height: 20px;
}
.three span{
font-weight:;
color: red;
}
.three del{
font-size: 12px;
}
.four{
margin-top: 16px;
}
.four span{
color: red;
font-weight:;
}
.line{
margin: 14px 5px;
height: 1px;
background: #eee;
}
.r-pro{
width: 220px;
height: 346px;
border: 1px solid #eee;
}
.top-r-pro{
background: #FBFBFB;
line-height: 28px;
height: 28px;
padding-left: 15px;
border-bottom: 1px solid #DFE6F0;
}
.r-pro ul{
margin-top: 11px;
}
.r-pro ul li{ height: 24px;
line-height: 24px;
padding-left: 25px;
background: url(li_bg.png) no-repeat 10px;
}
.r-pro ul li a:hover{
color: #ff0000;
text-decoration:underline;
}
/* 开始儿童座椅 */
.child{
margin:15px auto;
}
.baby{
height: 326px;
}
.box{
width: 722px;
height: 298px;
border:1px solid #C3D6E4 ;
border-top-width: 3px;
}
.baby .title{
width: 722px;
height:25px;
background: url("et.png") no-repeat;
font-size: 14px;
font-weight:;
line-height: 25px; text-align: right;
}
.baby .title a{
color:#00b0e7;
}
.ban{
height: 301px;
/* border: 1px solid #00b0e7; */ }
.ban .one{
width: 164px;
height: 283px;
margin-left: 13px;
margin-top: 5px;
}
.ban .one .et1{
margin-top: 10px; }
.ban .one .et1,.ban .one .et2,.ban .one .et3,.ban .one .et4{
text-align: center;
margin-top: 10px;
}
.ban .one .et3 span{
text-decoration: line-through;
}
.ban .one .et4 span{
color: red;
}
.r-baby .t-pic{
border: 1px solid #CBCBCB;
margin-bottom: 17px;
}
/* 开始工艺艺术品 */
.t-art{
width: 729px;
height: 346px;
border: 1px solid #eee;
}
.t-one{
width: 666px;
height: 142px;
margin-top: 10px;
margin-left: 22px;
}
.t-t-one{
width: 331px;
height: 142px;
}
/* .t-icon{
width: 97px;
height: 142px;
} */
.l-t-icon{
width: 97px;
height: 63px;
border: 1px solid #CACACA;
padding: 19px 0 18px 0;
text-align: center;
margin-bottom: 15px;
} .t-one p{
font: 14px 宋体; } .right-p{
width: 220px;
height: 142px;
}
.p1,.p2{
margin-top: 10px;
margin-bottom: 13px;
}
.money1,.number{
color: red;
font-weight:;
}
.p3{
margin-top:23px;
}
.money2{
text-decoration: line-through;
}
.c-linee{
margin: 14px 0px;
height: 1px;
background: #eee;
}
.light{
margin: 10px 7px 10px;
height: 75px;
color: #999;
}
.light img{
float: left;
margin-right: 7px;
}
.art .r-pro ul{
margin-top:97px;
}
/* 友情赞助 */
.flink{
margin-top: 10px;
height: 100px;
border-top: 1px solid #eee;
border-bottom: 3px solid #eee;
}
.txt-flink{
float: left;
width:60px ;
height: 37px ; }
.flink li{
float: left;
padding:0 4px;
margin-bottom: 15px;
}
.flink-con{
margin-top: 30px;
}
/* 关于我们 */
.copyright{
text-align: center;
}
.copyright ul{
width: 690px;
margin: 0 auto;
}
.copyright li{
float: left;
padding: 0 10px;
border-right: 1px solid #eee;
margin-top: 15px;
}
.copyright .p1{
margin-top: 25px;
margin-bottom: 10px;
}
---恢复内容结束---