<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局练习</title>
<style>
/*标签样式区*/
*{
margin:0;
padding:0;
font-family: "微软雅黑";
font-size: 16px;
}
body{
min-width: 900px;
}
ul{
list-style: none;
}
a{
color:#fff;
text-decoration: none;
}
.header,.footer{
height: 50px;
line-height: 50px;
background-color: #333;
}
/*中部样式区*/
.container{
padding:0 330px 0 300px;
min-height: 300px;
}
.left,.mid,.right{
min-height: 300px;
position: relative;
float:left;
}
.left{
background-color: #999;
width: 300px;
}
.mid{
background-color: pink;
}
.right{
background-color: blue;
}
/*顶部样式区*/
.header img{
height: 50px;
width: 160px;
}
.nav{
float:right;
height: 50px;
line-height: 50px;
}
.nav_li{
float: left;
height: 50px;
line-height: 50px;
width: 80px;
}
/*底部样式区*/
.bot{
max-width: 500px;
height: 50px;
line-height: 50px;
margin:0 auto;
}
.bot_li{
height: 50px;
line-height: 50px;
width:80px;
float: left;
}
</style>
</head>
<body>
<!-- 页面顶部 -->
<div>
<img src="http://climg.mukewang.com/590037f600016ce303000100.png" alt="">
<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>
</ul>
</div>
<!-- 页面内容区 -->
<div>
<div>mid</div>
<div>left</div>
<div>right</div>
</div>
<!-- 页面底部 -->
<div>
<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>
</body>
</html>
- 1 回答
- 0 关注
- 1292 浏览
添加回答
举报
0/150
提交
取消