CSS——对列表应用样式和创建导航栏

对列表应用样式和创建导航栏

基本样式

对ul应用列表图片，设置方式为设置background图片。例如：

    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        ul li{
            background: url("image/tick.png") no-repeat 0 50%;
            padding-left: 30px;
        }
    </style>

效果如下：

另一种方式：

ul.stars li:before {
   content: url(star.gif); margin-left: 8px}
ul.stars li {
   text-indent: -20px; list-style: none;}

基本垂直导航条

主要CSS样式为：

        ul.nav {
            margin: 0;
            padding: 0;
            list-style-type: none;
            width: 8em;
            background-color: #8bd400;
            border: 1px solid #486b02;
        }
        ul.nav a{
            display: block;
            color: #2b3f00;
            text-decoration: none;
            border-top: 1px solid #e4ffd3;
            border-bottom: 1px solid #486b02;
            background: url("image/arrow.gif") no-repeat 5% 50%;
            padding: 0.3em 1em;
        }
        ul.nav li:last-child a {
            border-bottom: 0;
        }
        ul.nav a:hover {
            color: #e4ffd3;
            background-color: #6da203;
        }

效果如下：

水平分页导航条

HTML为：

<ol class="pagination">
    <li><a href="search.htm?page=1" rel="prev">Prev</a></li>
    <li><a href="search.htm?page=1">1</a></li>
    <li class="selected">2</li>
    <li><a href="search.htm?page=3">3</a></li>
    <li><a href&#