CSS+DIV+UL+LI制作横向导航菜单

最新推荐文章于 2021-11-07 16:11:11 发布

zzc1684

最新推荐文章于 2021-11-07 16:11:11 发布

阅读量1.2k

点赞数 3

分类专栏： Html 文章标签： CSS+DIV+UL+LI制作横向导航菜单

本文链接：https://blog.csdn.net/zzc1684/article/details/84651884

版权

Html 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

本文通过实际的例子利用CSS+DIV+UL+LI来实现一个兼容各大浏览器的导航菜单。阅读完后，根据你自己的需求加以改善，做出一个属于自己的导航。

由于HTML代码和CSS代码都比较基础，不对代码做详细解释。代码看不懂也没有关系，先“糊里糊涂”按部就班的看下去，“难得糊涂”也是一种境界，之后看看【附录2】弥补一下欠缺的知识就可以了。

在这个过程中请您注意每个步骤与上一步骤的区别。（注：红色部分是在其上一步骤追加的部分）效果预览如下：

（本例子在FireFox13.0、IE8.0\IE9.0\IE10.0、Opara12、Chrome19.0、Safari5.17下实验通过）

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

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

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