W3school的导航栏
代码：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>W3school导航栏</title><link rel="stylesheet" href="css/reset.css"></head><style>/*设置nav大小*/.nav{width: 1210px;height: 48px;background-color: #e8e7e3;/*设置上下和左右的位置*/margin: 100px auto;}/*设置nav中的li*/.nav li{float: left;}/*设置a的样式*/.nav a{/*将文字重置居中*/line-height: 48px;/*将a转换为块元素*/display: block;/*去除下划线*/text-decoration: none;color: #777777;font-size: 18px;padding:0px 40px;}/*设置鼠标移入效果*/.nav a:hover{background-color: #3f3f3f;color: #E8E7E3;}</style><body><ul class="nav"><li><a href="#">HTML/CSS</a></li><li><a href="#">Browser Side</a></li><li><a href="#">Sever Side</a></li><li><a href="#">Programming</a></li><li><a href="#">XML</a></li><li><a href="#">Web Building</a></li><li><a href="#">Reference</a></li></ul></body></html>
重置样式表
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}table {border-collapse: collapse;border-spacing: 0;}
最后面的实现效果
