float详解2:用色块布局网站首页
(行级和行内块级margin都没作用，只能是块级)
<!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> <style> *{ padding: 0; margin: 0; } /*写页面临时加上去的*/ body{ padding-bottom: 500px; } /*顶部开始*/ #dingbu{ width: 100% height:30px; background: #f7f7f7; } #dingbu .dingsang{ width: 990px; height: 30px; background: #22b14c; margin: 0 auto; } /*顶部结束*/ /*广告开始*/ #gg{ width: 990px; height: 60px; /*这个不能直接居中，因为行级和行内块级margin都没作用，只能是块级：所以要转换*/ margin: 0 auto; display: block; margin-top: 5px; } /*广告结束*/ /*搜索区域*/ #sosuo{ width: 990px; height: 90px; margin: 0 auto; background: #00a2e8; margin-top: 5px; } /*搜索区域结束*/ /*导航条*/ #daoz{ width: 990px; height: 40px; background: #e4393c; margin: 0 auto; margin-top: 5px; } /*导航条结束*/ /*大区域开始*/ #daqi{ width: 990px; height: 410px; border: 3px solid orange; margin: 5px auto; } #daqi .zuo1{ width: 206px; height: 406px; border: 2px solid #e43c3f; background: #FAFAFA; float: left; } #daqi .zong{ width: 500px; height: 200px; margin-left: 10px; float: left; } #daqi .zong_s{ width: 500px; height: 199px; margin: 5px 0 0 10px; float: left; border: 2px solid #e43c3f; } #daqi .daoro{ width: 260px; height: 70px; background: orange; border: 2px solid #e43c3f; float: right; } #daqi .daoro_zong{ width: 260px; height: 140px; margin-top: 10px; background: orange; border: 2px solid #e43c3f; float: right; } #daqi .daoro_s{ width: 260px; height: 160px; margin-top: 10px; float: right; background: orange; border: 2px solid #e43c3f; } /*大区域结束*/ </style> </head> <body> <!-- 顶部开始 --> <div id="dingbu"> <div class="dingsang"></div> </div> <!-- 顶部结束 --> <!-- 广告开始 --> <img src="yt01.jpg" alt="" id="gg" /> <!-- 广告结束 --> <!-- 搜索区域 --> <div id="sosuo"></div> <!-- 搜索区域结束 --> <!-- 导航条 --> <div id="daoz"> <p> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> <a href=""></a> </p> </div> <!-- 导航条结束 --> <!-- 大区域开始 --> <div id="daqi"> <div class="zuo1"></div> <img src="yt01.jpg" alt="" class="zong" /> <div class="daoro"></div> <div class="daoro_zong"></div> <div class="zong_s"></div> <div class="daoro_s"></div> </div> <!-- 大区域结束 --> </body> </html> 本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知