<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<div class="headercon">
<a href="https://github.com/Freshman-996/Web-learn" class="logo">Logo</a>
<div class="headnav">
<a href="https://github.com/Freshman-996/Web-learn">Github</a>
<a href="https://github.com/Freshman-996/Web-learn">Register</a>
<a href="https://github.com/Freshman-996/Web-learn">Login</a>
</div>
</div>
</div>
<div class="banner">
<div class="bannercon">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
<div class="nav">
<div class="subnav">
<ul>
<li>HOME</li>
<li>PROFILE</li>
<li>ABOUT</li>
</ul>
</div>
<div class="content">
<div class="content1">
<ul>
<li>This is Content 1</li>
<li>MaybeContent 2</li>
<li>Content 3</li>
</ul>
</div>
<div class="content2">
<ul>
<li>Content 4</li>
<li>Content 5</li>
<li>Content 6</li>
<li>Content 7</li>
</ul>
</div>
<div class="content3">
<ul>
<li>Content 8</li>
<li>Content 9</li>
<li>Content 10</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<p>© 2018 ife.baidu.com</p>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
}
.header {
height: 80px;
width: 100%;
background-color: #444;
}
.headercon {
width: 960px;
margin: 0 auto;
position: relative;
}
.header .logo {
height: 80px;
text-decoration: none;
font-size: 40px;
line-height: 80px;
color: #fff;
}
.header .headnav {
position: absolute;
right:0;
top:0;
}
.header .headnav a {
color: #fff;
}
.banner {
height: 400px;
width: 100%;
background-color: #4a2;
}
.bannercon {
height: 100%;
width: 960px;
margin: 0 auto;
position: relative;
}
.banner ul {
position: absolute;
right: 0;
bottom: 10px;
}
.banner li {
height: 30px;
width: 25px;
background-color: #f2f2f2;
list-style: none;
float: left;
text-align: center;
line-height: 30px;
margin-left: 5px;
margin-top: 10px;
border: 1px solid #4a4;
}
.banner li:hover {
margin-top: 0;
padding-top: 10px;
background-color: #fff;
}
.nav {
width: 100%;
}
.subnav {
height: 80px;
width: 100%;
border-bottom: 1px solid #ccc;
}
.subnav ul {
width: 960px;
height: 100%;
margin: 0 auto;
}
.subnav li {
list-style: none;
float: left;
height: 54px;
width: 100px;
margin-top: 25px;
margin-left: -1px;
border: 1px solid #ccc;
border-bottom: 0;
border-radius: 15px 15px 0 0;
background-color: #eee;
line-height: 55px;
text-align: center;
}
.subnav li:hover {
padding-bottom: 1px;
background-color: #fff;
}
.content {
width: 960px;
height: 580px;
margin: 2px auto;
}
.content li {
list-style: none;
float: left;
border: 1px solid #ccc;
margin: 0 2px 2px 0;
padding: 80px;
width: auto;
}
.content1 li ,.content3 li {
width: 156px;
}
.footer {
width: 100%;
height: 110px;
background-color: #888;
padding-top: 20px;
margin-top: 10px;
}
.footer p {
color: #fff;
width: 170px;
height: 30px;
display: block;
margin: 0 auto;
}
![效果图](https://i-blog.csdnimg.cn/blog_migrate/54a22c9d53f23bd0744679e30dbfcac4.png)