超链接导航栏案例
html结构 <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> </ul> </div> </body>
写好上面的结构代码之后，也就是将我们页面展示的内容显示了，但是我们此时要利用我们学过的知识点来布局页面
首先我们要做导航栏，并排显示元素，第一想到浮动，想到使用浮动之后，一定记得清除浮动元素。
css代码如下： <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .nav{ margin: 100px auto 50px; 距离上边距100px，左右居中，下边距50px width: 800px; /*每个li宽度是160px，共有5个li*/ overflow: hidden; background-color: purple; } ul li{ float: left; /*左浮动*/ width: 160px; height: 40px; line-height: 40px; text-align: center; } ul li a{ display: block; /*将a元素转换成块元素，*/ text-decoration: none; /*去掉下划线*/ color: white; font-size: 20px; width: 160px; height: 40px; background-color: green; font-family: '微软雅黑'; /*a标签除外，不继承父元素的color*/ } ul li a:hover{ background-color: red; /*被选中时显示红色*/ } </style>
