(行级和行内块级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/post/7624.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知