网页布局设计与CSS技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41440413/article/details/104638077

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页布局</title>
		<style>
			body{
				margin: 0;
				padding: 0;
				font-size: 18px;
			}/*修改浏览器对body默认设置 内外边距清除为0*/
			#container{
				width: 980px;
				margin: 0 auto;
			}
			.head,.content,.food{
				width: 100%;
			}
			.head{
				height: 135px;
				
			}
			.head .login{
				width: 100%;
				height: 95px;
				background-color: blue;
			}
			.head .nav{
				width: 100%;
				height: 40px;
				background-color: red;
			}
			.head .nav ul{
				padding: 0;
				margin: 0;
			}
			.head .nav ul li{
				
				float: left;
				list-style-type:none ;
			}
			.head .nav ul li a{
				color: #000000;
				text-decoration: none;
				line-height: 40px;
				
			  /*  margin: 40px;*/
				display: block;
				width: 100px;
				text-align: center;
			}
			.head .nav ul li a:hover{
				background-color: cadetblue;
			}
			.content{
				height: 400px;
				
			}
			.content .content-left{
				width: 50%;
				height: 100%;
				float: left;
				background-color: fuchsia;
				
			}
			.content .content-right{
				width: 50%;
				height: 100%;
				float: left;
				background-color: peachpuff;
			}
			.tail{
				width: 100%;
				height: 60px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<!--网页整体 -->
		<div id="container">
			<!--头部 -->
			<div class="head">
				<div class="login">login</div>
				<div class="nav">
					<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>
			<!--中间区域 -->
			<div class="content">
				<div class="content-left">左边</div>
				<div class="content-right">右边</div>
			</div>
			
			<!--尾部 -->
			<div class="tail">
				<div class="food">尾部</div>
			</div>
		</div>
	</body>
</html>

网页基础（二十）网页布局