使用css布局横向导航栏，css应用给网页样式的方式，就相当于，给人怎么去穿上衣服，不同的衣服有不同的穿法，这里我们使用的是内联式。
在这里 我们可以适当的把值调的大一点，这样我们就可以很容易的对比。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>如何使用css布局横向导航栏</title> <style type="text/css"> body { margin:0px;padding:0px; } ul { list-style:none;/*去除项列表前面的圆点*/ } ul li { float:left;/**使列表项不再遵循默认的自上而下样式,使之变成横向列表*/ } /**这时候的列表虽然是横着的，却是一个整的像一块大饼，所以我们要想到块状思想。使用display:block，将其分割*/ ul li a { display: block; /*切割完毕,变成块状，这下我们就可以实现内外边距，边框背景等属性*/ width: 200px; /*宽度设置*/ padding-top: 10px; /*上内边距，通俗点讲就是导航栏离顶部的距离*/ padding-left: 10px; /*同上*/ padding-right: 10px; /*同上*/ text-align: center; /*文本居中显示*/ font-size: 40px; /*设置字体的大小*/ color: red; /*设置字体的颜色*/ text-decoration: none; /*下划线设置*/ } /*锚伪类还有link visited hover active分别为未访问，已访问，鼠标移动链接上，选定的连接，这里我只写了移动到连接的例子*/ ul li a:hover{ color:blue; /*伪类：指向链接时的字体颜色*/ background-color:#8DC7DD; /*伪类：指向链接时的背景色*/ text-decoration:underline; /*伪类：指向链接时的字体装饰*/ font-weight:bold; /*伪类：指向连接时的字体粗细*/ } </style> </head> <body> <div id="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> </ul> </div> </body> </html>
本菜鸟刚接触css，希望各路大神可以赐教 企鹅号：912220277
版权声明：除特别声明外，本站所有文章皆是本站原创，转载请以超链接形式注明出处！
