http://blog.digitalforest.cn/cssdivulli-nav

1.    创建无序列表:
<div>
    <ul>
        <li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
        <li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
        <li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
        <li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
        <li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
        <li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
    </ul>
</div>

点击这里查看效果

2.    将“li”默认样式“圆点”利用CSS隐藏:
    <style type="text/css">
        .ullicss ul{list-style:none;}
    </style>
    <div class="ullicss">
        <ul>
            <li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
            <li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
            <li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
            <li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
            <li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
            <li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
        </ul>
    </div>

点击这里查看效果

3.    通过浮动使 “li”元素横向排列:
    <style type="text/css">
        .ullicss ul{list-style:none;}
        .ullicss li{float:left;}
    </style>
    <div class="ullicss">
        <ul>
            <li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
            <li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
            <li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
            <li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
            <li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
            <li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
        </ul>
    </div>

点击这里查看效果

4.    调整“li”元素的宽度:
    <style type="text/css">
        .ullicss ul{list-style:none;}
        .ullicss li{float:left; width:100px;}
    </style>
    <div class="ullicss">
        <ul>
            <li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
            <li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
            <li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
            <li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
            <li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
            <li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
        </ul>
    </div>

点击这里查看效果

5.    通过CSS伪类设置菜单效果:
    <style type="text/css">
        .ullicss ul{list-style:none;}
        .ullicss li{float:left; width:100px;}
        .ullicss a:link   {color:pink; font-weight:bold; text-decoration:none; background:green;}
        .ullicss a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}
        .ullicss a:hover  {color:green; font-weight:bold; text-decoration:none; background:yellow;}

    </style>
    <div class="ullicss">
        <ul>
            <li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
            <li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
            <li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
            <li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
            <li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
            <li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
        </ul>
    </div>

点击这里查看效果】( 提示:将鼠标放在菜单上看看)

6.    将链接以块级元素显示并细微调整:
    <style type="text/css">
        .ullicss ul{list-style:none;}
        .ullicss li{float:left; width:100px; margin-left:3px; line-height:30px;}
        .ullicss a:link   {color:pink; font-weight:bold; text-decoration:none; background:green;}
        .ullicss a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}
        .ullicss a:hover  {color:green; font-weight:bold; text-decoration:none; background:yellow;}
        .ullicss a  {display:block; text-align:center; height:30px;}
    </style>
    <div class="ullicss">
        <ul>
            <li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
            <li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
            <li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
            <li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
            <li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
            <li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
        </ul>
    </div>

CSS调整解释
text-align:center:将菜单文字居中;
height:30px:增加背景的高度;
margin-left:3px:使每个菜单之间空3px距离;
line-height:30px:定义行高,使链接文字纵向居中

点击这里查看效果

7.    进一步调整:
    <style type="text/css">
        .ullicss {height:30px;background:green;}
        .ullicss ul{list-style:none;}
        .ullicss li{float:left; width:100px; margin-left:3px; line-height:30px;}
        .ullicss a:link   {color:pink; font-weight:bold; text-decoration:none; background:green;}
        .ullicss a:visited{color:pink; font-weight:bold; text-decoration:none; background:green;}
        .ullicss a:hover  {color:green; font-weight:bold; text-decoration:none; background:yellow;}
        .ullicss a  {display:block; text-align:center; height:30px;}
    </style>
    <div class="ullicss">
        <ul>
            <li><a target="_blank" href="http://www.baidu.com">菜单例一</a></li>
            <li><a target="_blank" href="http://www.google.com">菜单例二</a></li>
            <li><a target="_blank" href="http://www.bing.com">菜单例三</a></li>
            <li><a target="_blank" href="http://www.jike.com">菜单例四</a></li>
            <li><a target="_blank" href="http://www.soso.com">菜单例五</a></li>
            <li><a target="_blank" href="http://www.youdao.com">菜单例六</a></li>
        </ul>
    </div>

点击这里查看效果

(版权归数码林网站分析博客所有,欢迎转载,但转载请注明出处。)

小 结

       本例子通过将无序列表浮动并加以修饰得到一个横向导航菜单。

留个思考题

       如果将遇到的将CSS中的“background”和“color”用“background-image”代替是不是会得到更好的效果呢?

       如果图片利用合理,你会创造出更好的导航菜单!这里请读者自己动手实践吧!

附录1: 本文用到的相关示例代码下载

       点击下载:ULLICSS_HTML.zip

附录2: 相关知识参考

无序列表   :http://www.w3school.com.cn/html/html_lists.asp
CSS列表   :http://www.w3school.com.cn/css/css_list.asp
CSS浮动   :http://www.w3school.com.cn/css/css_positioning_floating.asp
CSS背景   :http://www.w3school.com.cn/css/css_background.asp
CSS文本   :http://www.w3school.com.cn/css/css_text.asp
CSS伪类   :http://www.w3school.com.cn/css/css_pseudo_classes.asp
CSS display 属性 :http://www.w3school.com.cn/css/pr_class_display.asp

CSS完整教程       :http://www.w3school.com.cn/css/index.asp
HTML完整教程     :http://www.w3school.com.cn/html/index.asp

改善网站导航文章,有兴趣的话阅读

  1. 网站分析工具维析路径分析帮你清晰导航
  2. 网站导航分析之不要让我迷路(上篇)
  3. 网站导航分析之不要让我迷路(下篇)

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐