SOURCE

console 命令行工具 X clear

                    
>
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> &nbsp; | &nbsp;
				<a href="">友情链接2 </a>&nbsp; | &nbsp;
				<a href="">友情链接3 </a>&nbsp; | &nbsp;
				<a href="">友情链接4 </a>

			</p>
			<p>
				<a href="">友情链接5 </a>&nbsp; | &nbsp;
				<a href="">友情链接6 </a>&nbsp; | &nbsp;
				<a href="">友情链接7 </a>&nbsp; | &nbsp;
				<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 */

.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;
}