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

最新推荐文章于 2021-11-07 16:11:11 发布
最新推荐文章于 2021-11-07 16:11:11 发布
阅读量1.2k 收藏 10
点赞数 3
分类专栏： Html 文章标签： CSS+DIV+UL+LI制作横向导航菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzc1684/article/details/84651884
版权

        本文通过实际的例子利用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

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

  1. 网站分析工具维析路径分析帮你清晰导航
  2. 网站导航分析之不要让我迷路（上篇）
  3. 网站导航分析之不要让我迷路（下篇）
zzc1684
关注
专栏目录
如何用CSS制作横向菜单?
04-13 1514
如何用CSS制作横向菜单?作者：阿捷 2005-4-11 16:54:52.test2 ul{list-style:none;}.test3 ul{list-style:none;}.test4 ul{list-style:none;}.test5 ul{list-style:none;width:300px;}.test3 li{float:left;}.test4 li
css横向导航菜单代码
09-19
css横向导航菜单css横向导航菜单css横向导航菜单
css横向导航菜单样式
09-19
css横向导航菜单css横向导航菜单css横向导航菜单
div+css 横向导航菜单
janefir的专栏
11-26 1034
body { font-family: Verdana;font-size: 12px; line-height: 1.5; } a { color: #000;text-decoration: none; } a:hover { color: #F00; } #menu { width:370px; margin:0auto; border: 1px solid #CCC; height:
CSS利用UL LI制作横向列表菜单
weixin_33785108的博客
07-29 312
转自： http://blog.onlygrape.com/css-ul-li-2/395 ul是html中的无序列表，li是列表中的列表项。如果没有CSS定义它的外观，它默认是显示成一列列表，并且它会存在项目符号（比如方块或实心的黑点）的列表内容。CSS网页布局中，除了新闻列表、链接运行ul、li制作以外，我们通常将菜单也用ul、li来实现。我们下面用CSS来改变它的外观，使它能横向在一...
div+css+ul-li制作横向导航栏
12-31
在网页设计中，导航栏是页面布局的重要...总之，通过`div+css+ul-li`，我们可以轻松地创建出具有专业外观的横向导航栏。随着技术的发展，可以进一步探索更高级的布局技巧和动态效果，以满足不断进化的网页设计需求。
用ul、li标签创建css横向导航菜单示例
09-25
本示例将向您展示如何利用HTML的`<ul>`和`<li>`标签，结合CSS来构建一个横向的导航菜单。这种方法不仅结构清晰，而且易于定制和维护。 首先，我们来看一下HTML结构。在示例中，使用了`<div>`元素作为容器，其ID为...
CSS实现ul和li横向排列的两种方法
11-21
在网页布局设计中，我们经常需要将`<ul>`列表中的`<li>`元素横向排列，以便创建导航栏或其他水平展示的内容。本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一：使用`float:left` 首先，...
将ul+li 分两列显示(横向显示)的方法
01-19
目的很简单：有一个 ul>li 列表，默认为单列显示，把它变为两列显示。 方法1，使用DIV+CSS代码： 复制代码代码如下: <... <div> <ul> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li> <li>ABC</li>
比较漂亮的一个导航条的效果DIV+CSS
10-30
- **布局清晰**：通过`<div>`、`<ul>`和`<li>`等标签构建出清晰的导航条结构。 - **样式美观**：利用CSS设置边框、背景颜色和背景图片，使得导航条具有良好的视觉效果。 - **交互性良好**：通过对链接的不同状态设置...
css横向导航条
03-01
NULL 博文链接：https://virgoooos.iteye.com/blog/274358
CSS3和jQuery的横向导航菜单
ICode联盟
11-07 157
下载地址 HTML标记 Home About Blog Services Portfolio Contacts Back to Article How it Works? 作为最佳实践,我们必须使用该菜单项的列表元素。的 是我们必须动画元素。CSS一些CSS3特性用于风格等因素 border-radius, box-shadow, rgba和 gradient..lavalamp { position: relative; border: 1px solid #d6d6d6;
css二级横向导航条,纯CSS实现的横向二级导航菜单(无js兼容性强)
weixin_42346710的博客
08-04 1289
内容介绍热点排行相关文章下载地址↓纯CSS实现，无JavaScript，效果不错，实用性强，兼容各种浏览器！第一步：下载源代码及背景图片第二步：在网页区添加样式定义[code]/* ================================================================This copyright notice must be untouched at al...
用纯CSS的方式实现一个横向导航栏+下拉菜单
Candeng1998的博客
03-22 4414
记录自己迈出的第一步~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css" name="①导航条"> ul ...
一个css横向菜单的一点经验
乔剑的专栏
07-18 778
在一般的web页面编程中,一个网页由几部分组成,我常常用嵌入方式来做.在做的时候遇到问题,显示效果和自己要求的不一样,由于几个页面都有CSS文件,所以很容易互相影响,所以在制作CSS文件的时候,要尽量保证类不要同名,对于标准的html标签对象则使用前面加类把它们区分开,我这次的问题就是菜单使用等HTML标签,正文里也有好多这些标签,当然CSS的内容会冲突了,我就只有在菜单中加个类,然后把UL>
ul li 实现横向菜单
good good study,day day up~
11-16 186
使用css控制ul li 实现横向菜单         例如 ：                热门   新品  推荐     火爆   ul { position: absolute; overflow: hidden; height: 41px; line-height: 41px; } ul li { display...
ul li css 做横向菜单
liyu121的博客
08-06 547
https://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html
如何应用ul、li标签 创建css横向导航菜单？
u013680195的专栏
03-11 6214
我们制作导航条按照传统的方法由放在一行表格单元里的图形图像构成，或者由单元格内的文字所组成，由于人们不再推荐用表格来定位任何非表格的页面内容，所以很多制作Web的人正在寻找新的方法，用结构化的XHTML标记和CSS格式来创建导航条。这样的创建方式也更对搜索引擎蜘蛛友好，这对我们来说是非常重要的。 　　创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来
div+css 横向滚动公告 自适应公告长度
最新发布
06-02
要实现自适应长度的横向滚动公告，可以使用CSS3的flex布局和marquee标签。具体步骤如下： 1. 使用一个div元素作为容器，设置宽度为100%、高度为固定值，并且设置overflow属性为hidden，使内容超过div大时被隐藏。 2. 在div容器内部创建一个ul元素，并使用CSS3的flex布局，设置flex-wrap属性为nowrap，使ul元素内部的li元素无法换行。 3. 对ul元素设置white-space属性为nowrap，使ul元素内部的文本不换行。 4. 对li元素设置display:inline-block，使li元素能够在一行内显示。 5. 使用marquee标签来实现横向滚动的效果，并将marquee标签内部的内容设置为ul元素。 6. 通过CSS3的media query来实现不同屏幕尺寸下的适配。 下面是示例代码： HTML代码: ``` <div class="notice-container"> <marquee behavior="scroll" direction="left"> <ul class="notice-list"> <li>第一条公告信息</li> <li>第二条公告信息</li> <li>第三条公告信息</li> <li>第四条公告信息</li> <li>第五条公告信息</li> <li>第六条公告信息</li> <li>第七条公告信息</li> </ul> </marquee> </div> ``` CSS代码: ``` .notice-container { width: 100%; height: 50px; overflow: hidden; } .notice-list { display: flex; flex-wrap: nowrap; white-space: nowrap; } .notice-list > li { display: inline-block; } @media screen and (max-width: 768px) { .notice-list > li { font-size: 12px; } } @media screen and (min-width: 768px) and (max-width: 992px) { .notice-list > li { font-size: 14px; } } @media screen and (min-width: 992px) { .notice-list > li { font-size: 16px; } } ``` 通过上述步骤，就可以实现一个自适应长度的横向滚动公告了。可以根据需要调整容器的高度、文本的字体大小、marquee标签的滚动速度等参数来适应不同的场景。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值