CSS——浮动布局改错题

文章目录

  • 题目
    • 错误代码
  • 解析
    • 正确代码

题目

CSS——浮动布局改错题_第1张图片

错误代码


<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;}


解析

CSS——浮动布局改错题_第2张图片
CSS——浮动布局改错题_第3张图片
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;}


你可能感兴趣的:(CSS,css,html)