【原】CSS——浮动布局改错题

流楚丶格念 2022-01-14

展开全文

文章目录

题目

在这里插入图片描述

错误代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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;}