精通CSS高级Web标准解决方案（5、对列表应用样式和创建导航条）

5.1基本样式列表

去掉列表的默认样式：

ul{

margin:0;
padding:0;
list-style-type:none;

}

添加定制的符号，在列表左边添加填充，为符号留出空间，然后将符号图片作为背景应用于列表项。

li{

background:url("bullet.png") no-repeat 0 50%;
padding-left:30px;

}

5.2创建垂直导航栏

良好的HTML结构

<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>

去掉列表的默认样式、填充、空白边

 ul{
        margin: 0;
        padding: 0px;
        list-style-type: none;

    }

对列表并不应用样式，而是对列表中的锚应用样式

ul a{
    display: block;
    height: 35px;
    width: 195px;
    background-color:rgb(72,190,239);
    line-height: 35px;
    text-align: center;
    text-decoration: none;
    border-bottom: solid 1px;
    font-weight: bold;
    color: white;
  }

a:link,a:visited{
    background-color:rgb(72,190,239);
  }

a:hover,a:active{
    background-color:rgb(174,129,255);
}

5.3在导航栏中突出显示当前页面

精通CSS高级Web标准解决方案（5、对列表应用样式和创建导航条）

相关推荐