css制作导航栏

最新推荐文章于 2024-07-18 15:25:55 发布
最新推荐文章于 2024-07-18 15:25:55 发布
阅读量319 收藏
点赞数
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64822448/article/details/131771997
版权

* {

    margin: 0;

    padding: 0;

}

ul li {

    list-style: none;

}

#menu {

    width: 900px;

    height: 80px;

    background-color: black;

    margin: 0 auto;

    position: relative;

}

#menu>ul>li {

    float: left;

    width: 150px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 20px;

}

a {

    text-decoration: none;

    color: white;

}

.one>li>a {

    display: block;

    color: black;

    font-size: 18px;

    text-transform: capitalize;

    text-align: center;

    line-height: 50px;

}

.one {

    display: none;

}

#menu>ul>li:hover .one {

    display: block;

}

#r0 {

    width: 900px;

    height: 800px;

    position: absolute;

    left: 0px;

}

#r1 {

    width: 225px;

    float: left;

}

#r1>.one>li>.two {

    color: chocolate;

}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="./lx导航栏.css">

</head>

<body>

    <div id="menu" >

        <ul>

            <li><a href="">What's new</a>

        <div id="r0">

                <div id="r1">

                        <ul class="one">                  

                            <li><a href=""><h2>HOME</h2></a></li>

                            <li><a href="">Pampers Diapers</a></li>

                            <li><a href="">Huggies Diapers</a></li>

                            <li><a href="">Seventh Generation</a></li>

                            <li><a href="">Diapers</a></li>

                            <li><a href="">Derbies</a></li>

                            <li><a href="">Driving shoes</a></li>

                            <li><a href="">Espadrilles</a></li>

                            <li><a href="">Loafers</a></li>

                        </ul>

                </div>

            <div id="r1">

                        <ul class="one">

                            <li><a href=""><h2>HOME</h2></a></li>

                            <li><a href="">Driving shoes</a></li>

                            <li><a href="">Espadrilles</a></li>

                            <li><a href="">Loafers</a></li>

                            <li><a href=""><h2>HOME</h2</a></li>

                            <li><a href="">Driving shoes</a></li>

                            <li><a href="">Espadrilles</a></li>

                            <li><a href="">Loafers</a></li>

                        </ul>

            </div>

            <div id="r1">

                <ul class="one">

                    <li><a href=""><h2>HOME</h2></a></li>

                    <li><a href="">Pampers Diapers</a></li>

                    <li><a href="">Huggies Diapers</a></li>

                    <li><a href="">Seventh Generation</a></li>

                    <li><a href="">Diapers</a></li>

                    <li><a href="">Derbies</a></li>

                    <li><a href="">Driving shoes</a></li>

                    <li><a href="">Espadrilles</a></li>

                    <li><a href="">Loafers</a></li>

                </ul>

            </div>

            <div id="r1">

                <ul class="one">

                    <li><a href="" class="two"><h2 >RELATED

                        CATEGORIES</h2></a></li>

                    <li><a href="">Pampers Diapers</a></li>

                    <li><a href="">Huggies Diapers</a></li>

                    <li><a href="">Diapers</a></li>

                    <li><a href="" class="two"><h2>BRANDS</h2></a></li>

                    <li><a href="">Driving shoes</a></li>

                    <li><a href="">Espadrilles</a></li>

                </ul>

            </div>

            </div>

         </li>

            <li><a href="">Top rated</a></li>

            <li><a href="">Earnings</a></li>

            <li id="R2"><a href="">Rings</a>

                <div id="r0">

                    <div id="r1">

                            <ul class="one">                  

                                <li><a href=""><h2>HOME</h2></a></li>

                                <li><a href="">Pampers Diapers</a></li>

                                <li><a href="">Huggies Diapers</a></li>

                                <li><a href="">Seventh Generation</a></li>

                                <li><a href="">Diapers</a></li>

                                <li><a href="">Derbies</a></li>

                                <li><a href="">Driving shoes</a></li>

                                <li><a href="">Espadrilles</a></li>

                                <li><a href="">Loafers</a></li>

                            </ul>

                    </div>

                <div id="r1">

                            <ul class="one">

                                <li><a href=""><h2>HOME</h2></a></li>

                                <li><a href="">Driving shoes</a></li>

                                <li><a href="">Espadrilles</a></li>

                                <li><a href="">Loafers</a></li>

                                <li><a href=""><h2>HOME</h2</a></li>

                                <li><a href="">Driving shoes</a></li>

                                <li><a href="">Espadrilles</a></li>

                                <li><a href="">Loafers</a></li>

                            </ul>

                </div>

                <div id="r1">

                    <ul class="one">

                        <li><a href=""><h2>HOME</h2></a></li>

                        <li><a href="">Pampers Diapers</a></li>

                        <li><a href="">Huggies Diapers</a></li>

                        <li><a href="">Seventh Generation</a></li>

                        <li><a href="">Diapers</a></li>

                        <li><a href="">Derbies</a></li>

                        <li><a href="">Driving shoes</a></li>

                        <li><a href="">Espadrilles</a></li>

                        <li><a href="">Loafers</a></li>

                    </ul>

                </div>

                <div id="r1">

                    <ul class="one">

                        <li><a href="" class="two"><h2 >RELATED

                            CATEGORIES</h2></a></li>

                        <li><a href="">Pampers Diapers</a></li>

                        <li><a href="">Huggies Diapers</a></li>

                        <li><a href="">Diapers</a></li>

                        <li><a href="" class="two"><h2>BRANDS</h2></a></li>

                        <li><a href="">Driving shoes</a></li>

                        <li><a href="">Espadrilles</a></li>

                    </ul>

                </div></li>

            <li><a href="">Bracelets</a></li>

            <li><a href="">All Categories</a>

                <div id="r0">

                <div id="r1">

                        <ul class="one">                  

                            <li><a href=""><h2>HOME</h2></a></li>

                            <li><a href="">Pampers Diapers</a></li>

                            <li><a href="">Huggies Diapers</a></li>

                            <li><a href="">Seventh Generation</a></li>

                            <li><a href="">Diapers</a></li>

                            <li><a href="">Derbies</a></li>

                            <li><a href="">Driving shoes</a></li>

                            <li><a href="">Espadrilles</a></li>

                            <li><a href="">Loafers</a></li>

                        </ul>

                </div>

            <div id="r1">

                        <ul class="one">

                            <li><a href=""><h2>HOME</h2></a></li>

                            <li><a href="">Driving shoes</a></li>

                            <li><a href="">Espadrilles</a></li>

                            <li><a href="">Loafers</a></li>

                            <li><a href=""><h2>HOME</h2</a></li>

                            <li><a href="">Driving shoes</a></li>

                            <li><a href="">Espadrilles</a></li>

                            <li><a href="">Loafers</a></li>

                        </ul>

            </div>

            <div id="r1">

                <ul class="one">

                    <li><a href=""><h2>HOME</h2></a></li>

                    <li><a href="">Pampers Diapers</a></li>

                    <li><a href="">Huggies Diapers</a></li>

                    <li><a href="">Seventh Generation</a></li>

                    <li><a href="">Diapers</a></li>

                    <li><a href="">Derbies</a></li>

                    <li><a href="">Driving shoes</a></li>

                    <li><a href="">Espadrilles</a></li>

                    <li><a href="">Loafers</a></li>

                </ul>

            </div>

            <div id="r1">

                <ul class="one">

                    <li><a href="" class="two"><h2 >RELATED

                        CATEGORIES</h2></a></li>

                    <li><a href="">Pampers Diapers</a></li>

                    <li><a href="">Huggies Diapers</a></li>

                    <li><a href="">Diapers</a></li>

                    <li><a href="" class="two"><h2>BRANDS</h2></a></li>

                    <li><a href="">Driving shoes</a></li>

                    <li><a href="">Espadrilles</a></li>

                </ul>

            </div></li>

        </ul>  

         

    </div>

   

</body>

</html>

利用css浮动效果完成二级导航栏的排列问题，同时利用css定位元素对下拉任务栏的位置完成调整。

预众。
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS导航栏的制作
m0_49830850的博客
08-19 1059
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <link type="text/css" rel="stylesheet" href="../static/reset.css" /> <style> /* ...
CSS 导航栏
梁辰兴的博客
09-20 2222
CSS导航栏是网站中一个基本的组成部分，它能够快速帮助用户进行需求选择，也是网站中不可或缺的一部分。CSS导航栏一般由选项列表、子选项列表和搜索框等组成。选项列表是可以点击的链接，子选项列表是鼠标滑过选项列表时出现的更详细的列表，搜索框便于用户搜索目标内容。除此之外，还可以添加LOGO等元素来增加导航栏的个性化。CSS可以设置导航栏的各种外观，包括背景色、宽度、高度、边框等，通过调整这些属性可以使得导航栏更加美观易用。
CSS之导航栏
Fancymeng的博客
09-01 2414
今天接着谈谈CSS CSS除了简单的文字背景样式外，还有着多样的格式本篇文章笔者将谈一谈导航栏 今天这篇会涉及HTML和VUE哦~ ~ ~
css 导航栏效果
蓝朽的小世界
04-08 7033
html实现导航栏效果
CSS【导航栏】
随便写写
07-09 3953
作为标准的HTML基础一个导航栏是必须的。在我们的例子中我们将建立一个标准的HTML列表导航栏。导航条基本上是一个链接列表，所以使用 和 元素非常有意义： 从列表中删除边距和填充： 创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色： 在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中： 可以在 or 上添加text-align:center 样式来让链接居中。可以在 border 上添加 borde............
CSS — 导航栏篇（一）
热门推荐
畅谈、
01-04 1万+
CSS 和 HTML 综合应用之导航栏。让你初步了解导航栏的组成和写法
CSS制作导航栏.pdf
11-19
。。。
CSS 制作网页导航条(下)
09-25
【CSS 制作网页导航条(下)】这篇文章主要介绍了如何使用CSS来创建一个功能完备的网页导航条，包括添加链接、调整文字样式以及实现鼠标悬停时的交互效果。以下是对文章内容的详细说明： 1. **添加链接**： - 在HTML...
23种CSS导航条样式
05-10
导航条样式，DIV + CSS适合用做网站头部导航
使用CSS制作立体导航栏
09-24
本文将详细介绍如何使用CSS（层叠样式表）来创建具有立体感的导航栏，包括其基本结构、样式设置以及实现立体效果的关键技术。 首先，一个基本的HTML结构是创建导航栏的基础。在提供的代码片段中，我们看到一个`<ul>...
CSS基础学习--18 导航栏
yyxhzdm的博客
06-18 2579
如果要在每个选项上添加边框，可以在每个 元素上添加。导航条基本上是一个链接列表，所以使用 和 元素非常有意义。这两种方法都很好，但如果你想链接到具有相同的大小，你必须使用浮动的方法。对于所有的链接宽度相等，浮动 元素，并指定为 元素的宽度。接下来我们创建一个左边是全屏高度的固定导航条，右边是可滚动的内容。在我们的例子中我们将建立一个标准的 HTML 列表导航栏。我们只需要 元素的样式，建立一个垂直的导航栏。在上面的例子中链接有不同的宽度。
＜CSS＞一级导航栏和二级导航栏
Snowyufly的博客
07-18 1万+
二级导航栏的制作
CSS — 导航栏篇（二）
畅谈、
01-05 2404
CSS 和 HTML 综合应用之导航栏。让你初步了解导航栏的组成和写法
利用css做导航栏,利用CSS制作导航栏
weixin_31090341的博客
08-03 9409
导航栏是一个网站不可或缺的一部分,它可以让网站的层次结构以一种有条理的方式清晰展示，并引导用户毫不费力地找到并管理信息，让用户在浏览网站过程中不至迷失。基于初学者对css各种属性的综合运用还不是很熟练，小编今天就教大家怎样利用CSS各种属性制作导航栏。首先我们来看一些简单的导航栏效果:一、导航栏的基础代码导航栏基本上是一个链接列表，因此使用ul和li元素是非常合适的。我们先看一下基础代码:运行效果...
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-05 8846
一、盒子测量及样式 1、总体盒子测量及样式 2、左侧盒子测量及样式 3、中间盒子测量及样式 4、右侧盒子测量及样式 二、横版导航栏代码示例 1、HTML 标签结构 2、CSS 样式 3、显示效果
导航栏用css样式设计
2301_79080050的博客
07-17 100
<ul><li></ul></ul></ul></ul></li></ul></li><li></li></ul></li><li></li></ul></li><li></li></ul></li><li></li></ul></li><li></li></ul></li></ul></div>
Tailwind CSS：颠覆常规的实用主义设计利器
最新发布
艾恩小灰灰的博客
07-18 519
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
html和css制作导航栏
05-24
HTML和CSS可以结合起来制作导航栏，以下是一个简单的示例： HTML代码： ``` <li><a href="#">首页</a></li> <li><a href="#">产品</a></li> <li><a href="#">服务</a></li> <li><a href="#">关于我们</a></...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值