水平导航菜单

最新推荐文章于 2024-03-16 09:54:40 发布
最新推荐文章于 2024-03-16 09:54:40 发布
阅读量1.9k 收藏 4
点赞数 2
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myjlvzlp/article/details/8257882
版权

简单的水平导航菜单

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>简单的水平导航菜单</title>
        <style>
            #menu{
                margin: 0;
                padding: 0;
                width: 610px;
                list-style-type: none;
                font: 14px Arial;
            }
            #menu li{
                float: left;
                width: 150px;
                padding: 0;
                margin: 0 1px 0 0;
            }
            #menu li dl{
                margin: 0;
                padding: 0 0 10px 0;
                background: #cb6 url(images/bottom.gif) no-repeat bottom left;
            }
            #menu li dt{
                margin: 0;
                padding: 5px;
                text-align: center;
                border-bottom: 1px solid #b00;
                background: #ed8 url(images/top.gif) no-repeat top left;
            }
            #menu li dt a{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dt a:visted{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dd{
                margin: 0;
                padding: 0;
                color: #fff;
                background: #47a;
            }
            #menu li dd.last{
                border-bottom: 1px solid #b00;
            }
            #menu li dd a{
                display: block;
                color: #fff;
                text-decoration: none;
                padding: 4px 5px 4px 20px;
                background: #47a url(images/arrow.gif) no-repeat 10px 10px;
            }
            #menu li dd{
                display: none;
            }
            #menu li:hover dd{
                display:block;
            }
            #menu li dd a:hover{
                background: #147;
                color: #9cf;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>
                <dl>
                    <dt><a href="#">Artech Studio</a></dt>
                    <dd><a href="#">Web Dev</a></dd>
                    <dd><a href="#">Web Design</a></dd>
                    <dd><a href="#">Books</a></dd>
                    <dd class="last"><a href="#">Contact Us</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt><a href="#">Artech Store</a></dt>
                    <dd><a href="#">Books</a></dd>
                    <dd><a href="#">DVDs</a></dd>
                    <dd><a href="#">Movies</a></dd>
                    <dd class="last"><a href="#">Service</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt><a href="#">Artech Achi</a></dt>
                    <dd><a href="#">Landscape</a></dd>
                    <dd><a href="#">Plan</a></dd>
                    <dd><a href="#">Design</a></dd>
                    <dd class="last"><a href="#">Maps</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt><a href="#">Artech Science</a></dt>
                    <dd><a href="#">Physics</a></dd>
                    <dd><a href="#">Maths</a></dd>
                    <dd><a href="#">Chemistry</a></dd>
                    <dd class="last"><a href="#">Courses</a></dd>
                </dl>	
            </li>
        </ul>
    </body>
</html>

多彩的水平导航菜单

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>多彩的水平导航菜单</title>
        <style>
            #menu{
                margin: 0;
                padding: 0;
                width: 610px;
                list-style-type: none;
                font: 14px Arial;
            }
            #menu li{
                float: left;
                width: 150px;
                padding: 0;
                margin: 0 1px 0 0;
            }
            #menu li dl{
                margin: 0;
                padding: 0 0 10px 0;
                background: #cb6 url(images/bottom.gif) no-repeat bottom left;
            }
            #menu li dt{
                margin: 0;
                padding: 5px;
                text-align: center;
                border-bottom: 1px solid #b00;
            }
            #menu li dt a{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dt a:visted{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dd{
                margin: 0;
                padding: 0;
                color: #fff;
                background: #47a;
            }
            #menu li dd.last{
                border-bottom: 1px solid #b00;
            }
            #menu li dd a{
                display: block;
                color: #fff;
                text-decoration: none;
                padding: 4px 5px 4px 20px;
                background: #47a url(images/arrow.gif) no-repeat 10px 10px;
            }
            #menu li dd{
                display: none;
            }
            #menu li:hover dd{
                display:block;
            }
            #menu li dd a:hover{
                background: #147;
                color: #9cf;
            }
            #menu li dt.orange{
                background: #fa5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.yellow{
                background: #ee5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.green{
                background: #5e5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.blue{
                background: #5cf url(images/top.gif) no-repeat top left;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>
                <dl>
                    <dt class="orange"><a href="#">Artech Studio</a></dt>
                    <dd><a href="#">Web Dev</a></dd>
                    <dd><a href="#">Web Design</a></dd>
                    <dd><a href="#">Books</a></dd>
                    <dd class="last"><a href="#">Contact Us</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt class="yellow"><a href="#">Artech Store</a></dt>
                    <dd><a href="#">Books</a></dd>
                    <dd><a href="#">DVDs</a></dd>
                    <dd><a href="#">Movies</a></dd>
                    <dd class="last"><a href="#">Service</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt class="green"><a href="#">Artech Achi</a></dt>
                    <dd><a href="#">Landscape</a></dd>
                    <dd><a href="#">Plan</a></dd>
                    <dd><a href="#">Design</a></dd>
                    <dd class="last"><a href="#">Maps</a></dd>
                </dl>	
            </li>
            <li>
                <dl>
                    <dt class="blue"><a href="#">Artech Science</a></dt>
                    <dd><a href="#">Physics</a></dd>
                    <dd><a href="#">Maths</a></dd>
                    <dd><a href="#">Chemistry</a></dd>
                    <dd class="last"><a href="#">Courses</a></dd>
                </dl>	
            </li>
        </ul>
    </body>
</html>

兼容IE6的多彩的水平导航菜单

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>兼容IE6的多彩的水平导航菜单</title>
        <style>
            #menu{
                margin: 0;
                padding: 0;
                width: 610px;
                list-style-type: none;
                font: 14px Arial;
            }
            #menu li{
                float: left;
                width: 150px;
                padding: 0;
                margin: 0 1px 0 0;
            }
            #menu li dl{
                width: 150px;
                margin: 0;
                padding: 0 0 10px 0;
                background: #cb6 url(images/bottom.gif) no-repeat bottom left;
            }
            #menu li dt{
                margin: 0;
                padding: 5px;
                text-align: center;
                border-bottom: 1px solid #b00;
            }
            #menu li dt a{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dt a:visted{
                display: block;
                color: #333;
                text-decoration: none;
            }
            #menu li dd{
                margin: 0;
                padding: 0;
                color: #fff;
                background: #47a;
            }
            #menu li dd.last{
                border-bottom: 1px solid #b00;
            }
            #menu li dd a{
                height: 1em;
                display: block;
                color: #fff;
                text-decoration: none;
                padding: 4px 5px 4px 20px;
                background: #47a url(images/arrow.gif) no-repeat 10px 10px;
            }
            #menu li dd{
                display: none;
            }
            #menu li:hover dd{
                display:block;
            }
            #menu li a:hover dd{
                display:block;
            }
            #menu li:hover{
                border: 0;
            }
            #menu li a:hover{
                border: 0;
            }
            #menu li dd a:hover{
                background: #147;
                color: #9cf;
            }
            #menu li dt.orange{
                background: #fa5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.yellow{
                background: #ee5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.green{
                background: #5e5 url(images/top.gif) no-repeat top left;
            }
            #menu li dt.blue{
                background: #5cf url(images/top.gif) no-repeat top left;
            }
            #menu table{
                border-collapse: collapse;
                padding: 0;
                margin: -1px;
                font-size: 1em;
            }
            #menu li a[href='#nogo']{
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <ul id="menu">
            <li>
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl>
                    <dt class="orange"><a href="#">Artech Studio</a></dt>
                    <dd><a href="#">Web Dev</a></dd>
                    <dd><a href="#">Web Design</a></dd>
                    <dd><a href="#">Books</a></dd>
                    <dd class="last"><a href="#">Contact Us</a></dd>
                </dl>	
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl>
                    <dt class="yellow"><a href="#">Artech Store</a></dt>
                    <dd><a href="#">Books</a></dd>
                    <dd><a href="#">DVDs</a></dd>
                    <dd><a href="#">Movies</a></dd>
                    <dd class="last"><a href="#">Service</a></dd>
                </dl>	
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl>
                    <dt class="green"><a href="#">Artech Achi</a></dt>
                    <dd><a href="#">Landscape</a></dd>
                    <dd><a href="#">Plan</a></dd>
                    <dd><a href="#">Design</a></dd>
                    <dd class="last"><a href="#">Maps</a></dd>
                </dl>
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
            <li>
                <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
                <dl>
                    <dt class="blue"><a href="#">Artech Science</a></dt>
                    <dd><a href="#">Physics</a></dd>
                    <dd><a href="#">Maths</a></dd>
                    <dd><a href="#">Chemistry</a></dd>
                    <dd class="last"><a href="#">Courses</a></dd>
                </dl>	
                <!--[if lte IE 6]></td></tr></table></a><![endif]-->
            </li>
        </ul>
    </body>
</html>
图片在对应相册中。

天使小宝
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
水平导航栏
await_9的博客
07-12 622
水平导航栏：要求如下图1，外框架固定、居中2，子元素的内容不同但每一个子元素的内边框距离相同3，将鼠标放在框架内，会由颜色背景，字体颜色的改变4，子元素刚好能够填满父元素代码块：eg：a链接需要去掉下划线：text-decoration：none 使子元素文字居中：line-height：（设置与父元素高度一样的值） 将a行内元素转换为块级元素：display：block 该导航栏移动到文字上的效果：利用hover实现 水平导航栏需要注意的问题：1，外框架是固定
CSS创建水平菜单
zhongjie的专栏
09-15 912
ul{float:left;width:100%;padding:0;margin:0;list-style-type:none;}a{float:left;width:7em;text-decoration:none;color:white;background-color:purple;padding:0.2em 0.6em;border-right:1px solid white;}a:ho
水平导航菜单（DIV+CSS）
weixin_30872671的博客
12-25 339
水平导航菜单（DIV+CSS） 完全用DIV+CSS做的菜单，相比传统用图片做的打开速度更快。预览最终效果>>#nav{ height: 44px; width: 425px; background: #FFFFFF; } .vline{ background: #999999; width: 1px; ...
CSS-水平导航栏
m0_73839298的博客
12-27 573
重要！前言必读！要注意水平导航栏要把元素设置为行内元素，表现块级元素，也就是使用（display: inline-block）属性，此属性的作用是让元素显示为行内元素,元素表现为块级元素，行内元素是指将元素只显示在同一行，表现为块级元素是指将元素显示为一块一块。
jQuery+css实现非常漂亮的水平导航菜单效果
10-21
本教程将详细介绍如何使用jQuery和CSS结合，来实现一个非常漂亮的水平导航菜单效果。这个菜单在用户点击时会通过动态改变样式实现切换效果，使得用户界面更加吸引人。 首先，我们需要理解jQuery的基本概念。jQuery...
块状水平导航菜单
05-01
在网页设计中，块状水平导航菜单是一种常见的交互元素，用于引导用户轻松访问网站的不同部分。这种设计风格通常采用方块或矩形的图形元素，水平排列，为用户提供清晰、直观的导航体验。"橙色块状水平导航菜单"特别...
CSS Cookbook创建水平导航菜单
09-25
在网页设计中，创建一个美观且实用的水平导航菜单是至关重要的，因为它能提供用户友好的体验，使他们能够轻松地浏览网站的不同部分。在这个CSS Cookbook的例子中，我们将详细探讨如何利用CSS（层叠样式表）来创建一...
DIV CSS制作的个性水平导航菜单实例
09-27
通过这些步骤，我们可以创建一个美观且响应式的水平导航菜单，不仅具有个性化的视觉效果，还能适应不同的浏览器环境。这个实例也展示了如何利用CSS的灵活性来实现网页的定制化设计，同时考虑了旧版浏览器的兼容性...
120个国外的非常优秀的CSS水平导航菜单
09-25
水平导航菜单是最常见和受欢迎的导航类型之一，它通常位于页面的顶部，用户可以横向滚动来查看所有的菜单项。一个好的水平导航菜单应该具有以下特点： 1. 清晰的视觉层次：菜单项应该清晰可辨，容易区分，通过视觉...
超酷CSS水平导航菜单
04-03
超酷CSS水平导航菜单
用CSS做的水平导航菜单效果.rar
07-04
用CSS做的水平导航菜单效果
水平导航菜单的jQuery组件
09-03
jMenu 是一个我们可以用来创建带有无限制子菜单水平导航的 jQuery 插件。菜单中的标记显得很干净，因为它使用嵌套列表。
创建一个纯CSS的水平导航条
_FINEFLY_
10-23 1224
按照传统的方法，导航条由放在一行表格单元里的图形图像构成。由于人们不再推荐用表格来定位任何非表格的页面内容，所以很多制作Web的人正在寻找（新的）方法，用结构化的XHTML标记和CSS格式来创建导航条。 一个简单的CSS导航条 创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，就像例A里的一样。这种方法看起来很合理也很直观。但问题是，把所有的链接都放在一行文本里
css水平导航栏
haimianxiaojie的专栏
03-05 1341
导航栏基本上是一个链接列表，一般结构如下：<ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul>但是由于li元素是块级
HorizontalNav: 响应式水平导航菜单库
最新发布
gitblog_00064的博客
03-16 314
HorizontalNav: 响应式水平导航菜单库 HorizontalNavA jQuery plugin that spans a horizontal navigation to fit the full width of it's container.项目地址:https://gitcode.com/gh_mirrors/ho/HorizontalNav 是一个轻量级、响应式的水平导航菜...
CSS基础-14-水平导航栏（示例及详细创建过程）
运维玄德公
04-26 1165
1. 内联列表实现 2. 浮动列表实现 3. 添加边框 3.1 思路 3.2 实际效果 4. 添加分割线 5. 固定导航栏
vue 水平导航菜单栏
08-01
在Vue中实现水平导航菜单栏的方法如下： 首先，在Vuex的store中添加一个全局的nav数据，用于存储导航菜单的信息。可以在state中定义一个nav属性，并在mutations中添加相应的方法来更新这个属性。[2] 接下来，在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值