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

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。