标签：css田字布局
<style type="text/css">
*{ margin:0; padding:0; list-style:none; }
.nav{ max-width:960px; overflow:hidden; margin:0 auto; border:5px solid #F60; padding:10px; }
.nav ul{ margin:-10px 0 0 -10px; list-style:none; padding:0; }
.nav li{ width:25%; float:left; }
.nav li a{ color:#fff; display:block; background:#F60; line-height:30px; margin:10px 0 0 10px; text-align:center; font-size:12px; text-decoration:none; }
.nav li a:hover{ background:#F00}
@media (max-width: 480px) {
.nav{ padding:5px; }
.nav ul{ margin:-5px 0 0 -5px; }
.nav li{ width:50%; }
.nav li a{ margin:5px 0 0 5px; }
}
</style>
<body>
<div class="nav">
<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>
<li><a href="#">新闻中心</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
</body>
不会到会，只是一个过程！
本文出自 “快樂·其實好簡單” 博客，请务必保留此出处http://1120173856.blog.51cto.com/2882946/1638861
标签：css田字布局
原文地址：http://1120173856.blog.51cto.com/2882946/1638861
