效果图:
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width: 1200px;
margin: 0 auto;
}
.header{
background:#ccc;
width: 1200px;
overflow: hidden;
zoom: 1;
}
.logo{
width: 200px;
height: 80px;
float: left;
}
.nav{
padding-right: 40px;
float: right;
overflow: hidden;
zoom: 1;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.nav li{
float: left;
margin-right:20px ;
}
.nav li a{
padding: 0 20px;
height: 80px;
line-height: 80px;
display: block;
font-family: "微软雅黑";
font-size: 16px;
color: #333;
}
.nav li a:hover{
color: white;
}
.body{
overflow: hidden;
zoom: 1;
}
.content{
width: 900px;
height: 500px;
background: red;
float: left;
}
.lan{
width: 300px;
height: 500px;
background: darksalmon;
float: right;
}
.footer{
width: 1200px;
height: 80px;
background: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<a href="#"><img src="logo.png" /></a>
</div>
<ul class="nav">
<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="body">
<div class="content">content</div>
<div class="lan">lan</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>