09-06 samllcode

最新推荐文章于 2013-10-28 20:34:55 发布

零度先生

最新推荐文章于 2013-10-28 20:34:55 发布

阅读量407

点赞数

分类专栏：学习笔记文章标签： div布局

本文链接：https://blog.csdn.net/vgqulk27/article/details/11264337

版权

学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="layout.css"/>

</head>
<body>
<div id="container">
		<div id="header">
					<div id="logo"></div>
					<div id="banner"></div>
					<div id="custom"></div>
		
		</div>
		<div class="nav"></div><!--间隔 -->
		<div id="meun">
		                         <ul>
										<li><a href="">首页</a></li>
										<li><a href="">娱乐</a></li>
										<li><a href="">军事</a></li>
										<li><a href="">社会</a></li>
										<li><a href="">新闻</a></li>
										<li><a href="">阅读</a></li>
								</ul>
		</div>
		<div class="nav"></div><!--间隔 -->

		<div id="main">
							<div id="content1"></div>
							<div id="content2"></div>
							<div id="content3"></div>
							<div id="content4"></div>
							<div id="content5"></div>
		</div>
		<div id="footer"></div>
		
</div>
</body>
</html>

css

body{
       padding:0;
	   margin:0;
	   text-align:center;

}

#container{
  width:960px;
  /*height:900px;*/
  /*background:olive;*/
  border:1px solid black;
  margin-left:auto;
  margin-right:auto;

}
/*----------------------------------------------------------------*/
#header{
			width:100%;
			height:80px;
			/*background:pink;*/


}

#logo{
		float:left;
		width:200px;
		height:100%;
		background:orange;
		margin-right:10px;
}

#banner{
		float:left;
		width:600px;
		height:100%;
		background:yellow;
}

#custom{
		float:right;
		width:140px;
		height:100%;
		background:lightblue;
}


#meun{
			float:left;
			width:100%;
            height:30px;
			background:#ccc;
			font-size:14px;
			

}

ul{        margin:0px;
			padding:0px;
			list-style:none;

}
li{
			float:left;
			padding-top:8px;
			padding-bottom:5px;
			padding-left:30px;
			padding-right:30px;
			

}
/*------------------------------------------------------------*/
#main{
			
			width:100%;
			height:600px;
			/*background:blue;*/

}
#content1{
			    float:left;
				width:350px;
				height:290px;
				margin-right:10px;
				background:blue;

}

#content2{
				float:left;
				width:350px;
				height:290px;
				background:blue;
}

#content3{
				float:right;
				width:240px;
				height:590px;
				background:blue;

}

#content4{
				float:left;
				width:350px;
				height:290px;
				margin-top:10px;
				margin-right:10px;
				background:blue;
}

#content5{
				float:left;
				width:350px;
				height:290px;
				margin-top:10px;
				margin-right:10px;
				background:blue;

}

/*-------------------------------------------------------------*/
#footer{
			float:left;
			width:100%;
			height:60px;
			background:green;
}




.nav{
		width:100%;
		height:10px;
        overflow:hidden;/*兼容IE */
}

a{
		text-decoration:none;
}