CSS纯菜单设计-优快云博客

本文链接：https://blog.youkuaiyun.com/nangeali/article/details/52972634

CSS设置无需表格的菜单

项目列表的符号可以设置list-style-type属性值为none，然后，制作各种各样的菜单和导航条，来显示项目的列表。

首先，建立一个HTML结构，将菜单的各个项用项目列表<ul>表示，同时页面的背景颜色。

<span style="font-size:24px;"><html>
       <head>
              <title>
                     无需表单的菜单
              </title>
              <style>
                     <!--
                     body{
                     background-color:#ffdee0;
              }
                     -->
              </style>
       </head>   
       <body>
              <divid="navigation">
                     <ul>
                            <li><ahref="#">Home</a></li>
                            <li><ahref="#">My Blog</a></li>
                            <li><ahref="#">Friends</a></li>
                            <li><ahref="#">Next Station</a></li>
                            <li><ahref="#">Contact Me</a></li>
                     </ul>
              </div>
       </body>
</html></span>

设置整个<div>块的宽度为固定像素，设置文字的字体，设置项目列表<ul>的属性，并将项目符号设置为不显示。

<span style="font-size:24px;">#navigation{
                     width:200px;
                     font-family:Arial;
              }
                     #navigationul{
                     list-style-type:none;
                     margin:0px;
                     padding:0px;
              }</span>

此时，项目类别就显示为普通的超链接列表的样式。

然后，为<li>标记添加下划线，分割各个超链接，并且，对超链接<a>标记进行整体设置。

<span style="font-size:24px;">#navigation li{
                     border-bottom:1pxsolid #ed9f9f;
              }
                     #navigationli a{
                     display:block;
                     padding:5px5px 5px 0.5em;
                     text-decoration:none;
                     border-left:12pxsolid #711515;
                     border-right:1pxsolid #711515;
              }</span>

这里需要说明，display：block，该语句将超链接设置成了块元素，当鼠标进入该块的任何部分时，都会被激活，而不是仅仅在文字上方时才被激活。

最后，设置超链接的3个伪属性，实现动态菜单的效果，代码如下：

<span style="font-size:24px;">#navigation li a:link,#anvigation li a:visited{
                     background-color:#c11136;
                     color:#ffffff;
              }
                     #navigationli a:hover{
                     background-color:#990020;
                     color:#ffff00;
              }</span>

完成制作，并且在IE和Firefox中显示的效果一致，通过鼠标指针经过时，改变背景色和改变文字颜色来实现动态菜单的效果。

<span style="font-size:24px;"><html>
       <head>
              <title>
                     无需表单的菜单
              </title>
              <style>
                     <!--
                     body{
                     background-color:#ffdee0;
              }
                     #navigation{
                     width:200px;
                     font-family:Arial;
              }
                     #navigationul{
                     list-style-type:none;
                     margin:0px;
                     padding:0px;
              }
                     #navigationli{
                     border-bottom:1pxsolid #ed9f9f;
              }
                     #navigationli a{
                     display:block;
                     padding:5px5px 5px 0.5em;
                     text-decoration:none;
                     border-left:12pxsolid #711515;
                     border-right:1pxsolid #711515;
              }
                     #navigationli a:link,#anvigation li a:visited{
                     background-color:#c11136;
                     color:#ffffff;
              }
                     #navigationli a:hover{
                     background-color:#990020;
                     color:#ffff00;
              }
                     -->
              </style>
       </head>   
       <body>
              <divid="navigation">
                     <ul>
                            <li><ahref="#">Home</a></li>
                            <li><ahref="#">My Blog</a></li>
                            <li><ahref="#">Friends</a></li>
                            <li><ahref="#">Next Station</a></li>
                            <li><ahref="#">Contact Me</a></li>
                     </ul>
              </div>
       </body>
</html></span>