标签：
<!doctype html> <html lang="zh-cn"> <link rel="stylesheet" href="弹性伸缩布局.css" type="text/css"> <head> <meta charset="UTF-8"> <title>PC端固定布局</title> </head> <body> <nav id="nav"> <section class="center"> <h1 class="logo">css3学习</h1> <ul> <li class="active"><a href="http://www.baidu.com">首页</a></li> <li><a href="###">动画</a></li> <li><a href="####">特效</a></li> <li><a href="####">咨询</a></li> <li><a href="###">照片</a></li> </ul> </section> </nav> <header>header</header> <section>section</section> <footer>footer</footer> </body> </html>
@charset "UTF-8"; /* CSS Document */ body,h1,ul{ margin:0px; padding:0px; } ul{ list-style:none } #nav{ width:100%; height:100px; background-color:#2C904B; } #nav .center{ width:1263px; height:100px; background-color:#2C904B; margin:0 auto; } #nav .logo{ width:400px; height:100px; background-image:url(n.png); background-size:contain; text-indent:-9999px; float:left; } #nav>section>ul{ color:#ABA8EF; height:100px; width:600px; line-height:100px; float:right; } #nav>section>ul>li{ float:left; width:100px; text-align:center; } a{ text-decoration:none; } #nav>section>ul>li>a{ color:#30B8F7; display:block; } #nav>section>ul>li>a:hover,#nav>section>ul>li.active a{ background-color:#045006; }
标签：
原文地址：http://www.cnblogs.com/webday/p/5347064.html
