html布局练习

最新推荐文章于 2023-02-24 09:47:55 发布

maltMai

最新推荐文章于 2023-02-24 09:47:55 发布

阅读量403

点赞数

分类专栏： html布局

本文链接：https://blog.csdn.net/q423498555/article/details/50811652

版权

html布局专栏收录该内容

3 篇文章 0 订阅

订阅专栏

做出来的最后结果

<!DOCTYPE html>
<html>
<head>
<title>layout</title>
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body>
<div id="container">
	<div id="head">
		<div id="head_left"><!--头部的左边-->
		</div>
		<div id="head_mid"><!--头部的中间-->
		</div>
		<div id="head_right"><!--头部的右边-->
		</div>
	</div>
	<div class="nav">
	</div>
	
	<div id="head_menu">	<!--头部的导航-->
	<ol>
		<li><a href="#">联系我们</a></li>
		<li class="tiao"></li> <!--做导航中间的黑条-->
		<li><a href="#">联系我们</a></li>
		<li class="tiao"></li>
		<li><a href="#">联系我们</a></li>
		<li class="tiao"></li>
		<li><a href="#">联系我们</a></li>
		<li class="tiao"></li>
		<li><a href="#">联系我们</a></li>
	</ol>
	</div>
		
	<div class="nav">
	</div>
	<div id="main"> <!--中间容器-->
		<div id="main_left"> <!--中间左边-->
			<div id="left_one"> 
				<div class="title">
					<h3>热门文章</h3>
				</div>
				<div class="content">
					<ol>
						<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
						<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
						<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
						<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
						<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
						<li><a href="#">aaaaaaaaaaaaaaaa</a></li>
					</ol>
				</div>
			</div>
			
			<div id="left_two">
			</div>
			
			<div class="nav">
			</div>
			
			<div id="left_one">
			</div>
			
			<div id="left_two">
			</div>
		</div>
		<div id="main_right">  <!--中间右边-->
		</div>
	</div>
	<div class="nav">
	</div>
	
	<div id="ad">
	</div>
	
	<div class="nav">
	</div>
	<div id="footer">  <!--页脚-->
	</div>
</div>


</body>
</html>

body
{
	margin:0px; 
	padding:0px;
	/*清理body的内边框与外边框*/
}
#container
{
	margin-left:auto;
	margin-right:auto;
	width:960px;
	/*左边距与右边距自动，即可居中*/
}
.nav
{
	width:960px;
	height:10px;
	clean:both;
	float:left;
	/*往左浮动，并且清除两边的浮动相等于换行了*/
}
#head
{
	width:100%;
	height:120;
}
#head #head_left
{
	width:200px;
	height:90px;
	background-color:yellow;
	float:left;
}
#head #head_mid
{
	width:540px;
	height:90px;
	background-color:green;
	float:left;
	margin-left:10px;
	margin-right:10px;
}
#head #head_right
{
	width:200px;
	height:90px;
	background-color:blue;
	float:left;
}
#head_menu
{
	width:100%;
	height:30px;
	float:left;
	background-color:gray;
}
#main
{
	width:100%;
	height:600px;
	float:left;
}
#main #main_left
{
	width:650px;
	height:600px;
	float:left;
}
#main #main_left #left_one
{
	width:220px;
	height:295px;
	float:left;
	background-color:yellow;
}
#main #main_left #left_two
{
	width:420px;
	height:295px;
	float:right;
	background-color:yellow;
}
#main #main_right
{
	width:300px;
	height:600px;
	float:right;
	background-color:red;
}
#ad
{
	width:960px;
	height:80px;
	background-color:green;
	float:left;
}
#footer
{
	width:960px;
	height:80px;
	background-color:blue;
	float:left;
}
ol
{
	font-size:12px;
	list-style:none;
	margin:0px;
	padding:0px;
}
#head_menu li
{
	float:left;
	text-align:center;
	width:80px;
	line-height:30px;
	
}
#head_menu .tiao
{
	float:left;
	background-color:black;
	width:1px;
	height:20px;
	margin-top:6px;
}
#head_menu li a {
	color:white;
}
#head_menu li a:hover {
	position:relative;
	top:1px;
	left:1px;
}
.title {
	float:left;
	width:100%;
	height:26px;
	background:url(images/title.png) no-repeat right ;
	/*背景从右开始，获得右边的圆角*/
}
.title h3 {
	
	margin:0px;
	padding:0px;
	padding-left:10px;
	width:100px;
	line-height:26px;
	font-size:14px;
	background:url(images/title.png) no-repeat left ;	
	/*背景从左边开始，获得左边的圆角，然后只显示一部分*/
}
.content a
{
	font-size:14px;
	padding-left:15px;
	background:url(images/li_icon.gif) no-repeat left;
	line-height:18px;
}
.content li
{
	background:url(images/dot.gif) repeat-x bottom;
}