<!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>
网页基础(二十)网页布局
猜你喜欢
转载自blog.csdn.net/qq_41440413/article/details/104638077
今日推荐
周排行