网站导航栏

导航栏也是一种列表。下面通过代码进行说明

<style>
        #bottom{
            width:200px;
            border-right:double #FF99FF 2px;
            padding:0 0 1em 0;
            margin-top:1em;
            background-color:#FF3;  
            font-family:"宋体";
            font-size:18px;
            color:#F00;}   <!--设计列表文字及背景-->
        #bottom ul{
            list-style:none;
            margin: 0;
            padding: 0;
            border: none;}  <!--设计列表的样式-->
        #botton li{
            margin-top:0;
            border-bottom-width:medium;
            border-bottom-style:groove;
            border-bottom-color:#0FF;}    <!--设计列表边框-->
        #bottom li a{
            text-align:center;
            margin-right:10px;
            margin-left:10px;
            line-height:15px;
            display:block;
            padding: 5px 5px 5px 0.5em;
            background-color:#CCC;
            color:#60C;
            text-decoration:none;
            width:100px;
            border-right-width:10px;
            border-left-width:10px;
            border-right-style:double;
            border-left-style:double;
            border-right-color:#096;
            border-left-color:#966;}      <!--设计链接文字样式-->
            html>body #bottom li a{width:auto;}
        #bottom li a:hover{
            background-color:#0F3;
            color:#F96;
            border-right-width:10px;
            border-left-width:10px;
            border-right-style:solid;
            border-left-style:solid;
            border-right-color:#C00;
            border-left-color:#C00;}       <--设计链接文字激活方式-->
                 </style>
</head>
</body>
    <div id="bottom" >
        <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">其他</a></li>
        </ul>
        </div>
</body>

设计方法主要是对列表的每一元素按逐个设计
可呈现如下结果

image.png