<!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 href="css/style.css" rel="stylesheet" /><link href="img/100du.ico" rel="shortcut icon" /><script src="js/jquery-1.12.4.min.js"></script></head><body><div id="header" class="gradient"></div><div id="nav"></div><div id="search" class="gradient"><div class="bar"></div></div><div class="content clear"><div class="main fl"><div class="clear"><div class="section fl"></div><div class="options fr"></div></div><div class="main_ad"><a href="#"><img src="img/ad/ad1.jpg" /></a></div><div class="clear"><div class="section fl"></div><div class="section fr"></div></div><div class="clear"><div class="options fl"></div><div class="section fr"></div></div><div class="main_ad"><a href="#"><img src="img/ad/ad1.jpg" /></a></div><div class="clear"><div class="section fl"></div><div class="section fr"></div></div><div class="clear"><div class="section fl"></div><div class="section fr"></div></div></div><div class="side fr"><div class="side_section"></div><div class="ad_border"><a href="#"><img src="img/ad/ad2.jpg" /></a></div><div class="side_ad"><a href="#"><img src="img/ad/ad3.jpg" /></a></div><div class="side_section"></div><div class="side_section"></div><div class="side_section"></div><div class="side_section"></div><div class="side_section"></div></div></div><div id="footer"></div></body></html>@charset "utf-8";/* CSS Document *//*样式重置*/body,h1,h2,h3,h4,h5,p,dl,dd,ul,ol,form,input,textarea,th,td,select{margin:0;padding:0;}em{ font-style:normal;}li{ list-style:none;}a{ text-decoration:none;}img{border:none; vertical-align:top;}table{ border-collapse:collapse;}input,textarea{outline:none;}textarea{ resize:none; overflow:auto;}body{ font-size:12px; font-family:"微软雅黑";}/* public*/.clear{ zoom:1;}.clear{ content:''; display:block; clear:both;}.fl{ float:left;}.fr{ float:right;}.gradient{ background:-moz-linear-gradient(top,#ffffff,#f8f8f8); background:-webkit-linear-gradient(top,#ffffff,#f8f8f8); background:-ms-linear-gradient(top,#ffffff,#f8f8f8); background:linear-gradient(top,#ffffff,#f8f8f8); +background:#f9f9f9; }/* layout*/body{ margin-bottom:30px;}#header{ height:30px; width:960px; margin:0 auto; border-radius:0 0 6px 6px; }#nav{ width:960px; height:100px; margin:0 auto; background:#FF6;}#search{ width:958px; height:114px; border:1px solid #dbdbdb; border-radius:6px; margin:0 auto 10px;}#search .bar{}.content{ width:960px; margin:0 auto; }.main{ width:710px;}.section{ width:318px; height:200px; padding:0 15px; border:1px solid #dbdbdb; border-radius:6px; margin-bottom:10px;}.options{ width:350px; height:200px; background:#09F;margin-bottom:10px;}.main_ad{ border-radius:6px;overflow:hidden; margin-bottom:10px; width:709px; height:79px;}.side{ width:240px;}.side_section{ height:60px; border:1px solid #dbdbdb;border-radius:6px; margin-bottom:10px; width:240px;}.side_ad{border-radius:6px;overflow:hidden; margin-bottom:10px;}#footer{ width:958px; height:78px;border:1px solid #dbdbdb;border-radius:6px; margin:0 auto; background:#f9f9f9; }.ad_border{border:1px solid #dbdbdb;border-radius:6px;overflow:hidden; margin-bottom:10px;}
1 回答
一杯2块的奶茶
TA贡献226条经验 获得超75个赞
你class为content clear的div里的两个子div都使用了浮动，脱离了文档流，所以footer的div会紧随class为gradient的div，你想要footer到最下面的话，需要footer的div前面清除浮动。
<div class="clear"></div> <div id="footer"></div>
点击展开后面2条
添加回答
举报
0/150
提交
取消