console
<div id="app">
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"> <a href="">首页</a></li>
<li class="item"> <a href="">公司新闻</a> </li>
<li class="item"> <a href="">娱乐信息</a></li>
<li class="item"> <a href="">联系我方</a></li>
<li class="item"> <a href="">关于我们</a></li>
</ul>
</div>
</div>
<div class="main">
hello world
</div>
<div class="footer">
<div class="content">
<p>
<a href="">友情链接1</a> |
<a href="">友情链接2 </a> |
<a href="">友情链接3 </a> |
<a href="">友情链接4 </a>
</p>
<p>
<a href="">友情链接5 </a> |
<a href="">友情链接6 </a> |
<a href="">友情链接7 </a> |
<a href="">友情链接8 </a>
</p>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.header {
background: #999
}
.header .content {
width: 90%;
margin: 0 auto;
background: black;
height: 60px;
}
.header .content .nav .item {
list-style: none;
}
.header .content .nav .item a {
float: left;
height: 60px;
font-size: 1rem;
padding: 0 12px;
color: white;
line-height: 60px;
text-align: center;
text-decoration: none;
min-width: 120px;
transition: all ease 0.4s;
}
.header .content .nav .item a:hover {
background: #ccddee;
color: #111;
font-size: 1.1rem;
transition: all ease 0.4s;
}
.footer {
background: #999
}
.footer .content {
width: 90%;
margin: 0 auto;
background: #444;
color: #666
}
.footer .content p {
width: 100%;
line-height: 40px;
height: 40px;
padding: 0 12px;
text-align: center;
text-decoration: none;
}
.footer .content p a {
line-height: 40px;
height: 40px;
padding: 0 12px;
text-align: center;
text-decoration: none;
color: gray;
}
.footer .content p a:hover {
color: white;
}