float详解2:用色块布局网站首页

时间：6年前阅读：5649
(行级和行内块级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,我们将及时处理。
微信扫码关注
更新实时通知
float详解2:用色块布局网站首页

网友评论
