导航栏html文件：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>项目实战 PC端固定布局</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <!-- body nav section 需要h1~h6标题大纲 div header不需要 --> <header id="nav"> <div class="center"> <!-- 一个页面最好就一个h1 让搜索引擎能更好的抓取关键字 --> <h1 class="logo">旅行社</h1> <nav class="link"> <h2 class="none">网站导航</h2> <ul> <li class="active"><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> </nav> </div> </header> <head>header</head> <section> <h2>bootstrap</h2> <p>一个html5 标准框架</p> </section> <footer>footer</footer> </body> </html>
CSS文件：
@charset "utf-8"; /*本身外边距*/ body, h1, ul { margin: 0; padding: 0; } /* 去除ul小圆点 */ ul { list-style: outside none none; } /* a 标签不需要下划线 */ a { text-decoration: none; } .none { display: none; } #nav { width: 100%; height: 70px; background: #333; } #nav .center { width: 1263px; height: 70px; margin: 0 auto; } #nav .logo { width: 240px; height: 70px; background-image: url(../img/logo.png); /* h1中的字向左移动到不能看到 */ text-indent: -9999px; float: left; } #nav .link { width: 650px; height: 70px; float: right; /* 字体淡灰 */ color: #eee; /* 文字垂直居中 设定高度和 ul高度相同即可 */ line-height: 70px; } #nav .link li { width: 120px; /* li 文字横向铺平 */ float: left; text-align: center; } #nav .link a { color: #eee; display: block; } #nav .link a:hover, #nav .active a { background-color: #000; }
效果图：
