题目
错误代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>搜狐店铺</title> <link rel="stylesheet" type="text/css" href="index.css"/> </head> <body> <div class="shop"> <div class="header"> <h1><img src="images/logo.jpg" width="180" height="49" /></h1> <div class="header_r"> <a href="#">商铺动态</a> | <a href="#">商铺项目</a> | <a href="#">商铺租售</a> | <a href="#">商铺论坛</a> </div> </div> <div class="main"> <div class="left"> <h3>精品商铺</h3> <dl class="clearfix"> <dt><img src="images/img1.jpg" width="118" height="88" /></dt> <dd>名称：<a href="#">领秀新硅谷</a><br /> 类型：社区商业<br /> 售价：23000-39000元/平米<br /> <a href="#">详细</a> </dd> </dl> <dl> <dt><img src="images/img1.jpg" width="118" height="88" /></dt> <dd>名称：<a href="#">领秀新硅谷</a><br /> 类型：社区商业<br /> 售价：23000-39000元/平米<br /> <a href="#">详细</a> </dd> </dl> </div> <!--左部分完成--> <div class="middle"> <h3>店铺新闻 <span> <a href="#">市场动态</a> | <a href="#">项目分析</a> | <a href="#">专家动态</a> </span> </h3> <h2><a href="#">雨润斥资90亿圈3800亩造城 被疑变相圈地</a></h2> <ul> <li><a href="#"> 实录</a> | <a href="#">零售业景气度下滑 盈利增速四年来首现负增长</a></li> <li><a href="#"> 实录</a> | <a href="#">零售业景气度下滑 盈利增速四年来首现负增长</a></li> <li><a href="#"> 实录</a> | <a href="#">零售业景气度下滑 盈利增速四年来首现负增长</a></li> <li><a href="#"> 实录</a> | <a href="#">零售业景气度下滑 盈利增速四年来首现负增长</a></li> <li><a href="#"> 实录</a> | <a href="#">零售业景气度下滑 盈利增速四年来首现负增长</a></li> <li><a href="#"> 实录</a> | <a href="#">零售业景气度下滑 盈利增速四年来首现负增长</a></li> <li><a href="#"> 实录</a> | <a href="#">零售业景气度下滑 盈利增速四年来首现负增长</a></li> </ul> </div> <div class="right"> <h3>租售信息</h3> </div> </div> </div> </body> </html>
@charset "utf-8"; /* CSS Document */ body,div,p,h1,h2,h3,h4,img,dl,dt,dd,ul,li,ol{margin:0; padding:0; border:0;} /*.clearfix:after{clear:both; content:""; display:block; visibility:hidden; height:0;} .clearfix{zoom:1;}*/ body{font-size:12px; color:#3e3e3e; font-family:"宋体";} ul,ol{list-style:none;} img{display:block;} /*ie 会有一个bug 图片下面有一个小空隙*/ a{color:#039; text-decoration:none;} a:hover{color:#900; text-decoration:underline;} .shop{width:950px;margin:0 auto; margin-top:50px;} .header{height:49px;} .header h1{ width:180px; height:49px; } .header .header_r{width:753px; height:49px; background-image:url(images/header_r_bg.jpg); float:left; text-align:right; line-height:49px; padding-right:15px; color:#FFF;} .header .header_r a{color:#FFF;} /*main*/ .main{height:260px; width:948px; border:1px solid #9BB8D2;} .main .left{width:341px; height:260px; padding:0 5px; float:left; border-right:1px solid #9BB8D2;} .main h3{height:30px; margin-top:13px;color:#000; line-height:30px; padding-left:6px; border-bottom:1px solid #C4D4E1; font-size:14px;} .left dl{padding:7px; padding-bottom:0;} .left dl dt{float:left; border:1px solid #D8D8D8; padding:2px;} .left dl dd{float:left; margin-left:10px; line-height:22px;} .left dl dd a{color:#039;} .left dl dd a:hover{color:#900; text-decoration:underline;} .main .middle{width:340px; height:260px; padding:0 6px;} .main .middle span{font-size:12px; font-weight:normal; margin-left:82px;} .main .middle h2{font-size:16px; color:#039; text-align:center; margin-top:14px;} .main .middle ul{ padding:14px; padding-top:20px;} .main .middle ul li{height:22px;} .main .right{width:244px; height:260px; background-color:#F60; float:right;}
解析
html没毛病，css有问题
正确代码
@charset "utf-8"; /* CSS Document */ body,div,p,h1,h2,h3,h4,img,dl,dt,dd,ul,li,ol{margin:0; padding:0; border:0;} /*.clearfix:after{clear:both; content:""; display:block; visibility:hidden; height:0;} .clearfix{zoom:1;}*/ body{font-size:12px; color:#3e3e3e; font-family:"宋体";} ul,ol{list-style:none;} img{display:block;} /*ie 会有一个bug 图片下面有一个小空隙*/ a{color:#039; text-decoration:none;} a:hover{color:#900; text-decoration:underline;} .shop{width:950px;margin:0 auto; margin-top:50px;} .header{height:49px;} .header h1{ width:180px; height:49px; float: left; } .header .header_r{width:753px; height:49px; background-image:url(header_r_bg.jpg); float:left; text-align:right; line-height:49px; padding-right:15px; color:#FFF;} .header .header_r a{color:#FFF;} /*main*/ .main{height:260px; width:948px; border:1px solid #9BB8D2;} .main .left{width:341px; height:260px; padding:0 5px; float:left; border-right:1px solid #9BB8D2;} .main h3{ height:30px; margin-top:13px;color:#000; line-height:30px; padding-left:6px; border-bottom:1px solid #C4D4E1; font-size:14px;} .left dl{padding:7px; padding-bottom:0; overflow: hidden;} .left dl dt{float:left; border:1px solid #D8D8D8; padding:2px; } .left dl dd{float:left; margin-left:10px; line-height:22px;} .left dl dd a{color:#039;} .left dl dd a:hover{color:#900; text-decoration:underline;} .main .middle{width:340px; height:260px; padding:0 6px; float: left;} .main .middle span{font-size:12px; font-weight:normal; margin-left:82px;} .main .middle h2{font-size:16px; color:#039; text-align:center; margin-top:14px;} .main .middle ul{ padding:14px; padding-top:20px; } .main .middle ul li{height:22px;} .main .right{width:244px; height:260px; background-color:#F60; float:right;}
