导航栏代码

已于 2023-07-17 17:54:34 修改
阅读量119 收藏 1
点赞数 1
文章标签： html5 前端 css css3 html
于 2023-07-17 17:53:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_67366360/article/details/131771828
版权

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Document</title>

    <link rel="stylesheet" href="./dh.css">

</head>

<body>

    <div id="box">

        <ul>

          <li>

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

            <div class="box1">

                <div>

                    <ul>

                        <li class="aa">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li>asdf gtyyrttrt</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

                <div>

                    <ul>

                        <li class="aa">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li>asdf gtyyrttrt</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

                <div>

                    <ul>

                        <li class="aa">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li class="ab">HOME</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

                <div>

                    <ul>

                        <li class="ab">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li class="ab">HOME</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

            </div>

        </li>

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

            <div class="box1">

                <div>

                    <ul>

                        <li class="aa">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li>asdf gtyyrttrt</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

                <div>

                    <ul>

                        <li class="aa">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li>asdf gtyyrttrt</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

                <div>

                    <ul>

                        <li class="aa">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li class="ab">HOME</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

                <div>

                    <ul>

                        <li class="ab">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li class="ab">HOME</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

            </div>

        </li>

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

            <div class="box1">

                <div>

                    <ul>

                        <li class="aa">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li>asdf gtyyrttrt</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

                <div>

                    <ul>

                        <li class="aa">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li>asdf gtyyrttrt</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

                <div>

                    <ul>

                        <li class="aa">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li class="ab">HOME</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

                <div>

                    <ul>

                        <li class="ab">HOME</li>

                        <li>reambertds7</li>

                        <li>ewrfs swqa</li>

                        <li>erquy qwe</li>

                        <li class="ab">HOME</li>

                        <li>sdff</li>

                        <li>drggrweing</li>

                        <li>ertegtraewes</li>

                    </ul>

                </div>

            </div>

        </li>

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

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

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

        </ul>

    </div>

</body>

</html>

ccs

*{

margin: 0;

padding: 0;

}

ul li{list-style: none;}

#box{

    width: 900px;

    height: 80px;

    background-color: aqua;

    margin:  0 auto;

    position: relative;

}

#box>ul>li{

    float: left;

    width: 144px;

    height: 80px;

    text-align: center;

    line-height: 80px;

    font-size: 15px;

    border: 1px solid black;

 }

 a{

    text-decoration: none;

    color: rgb(43, 127, 201);

 }

 .box1:hover{

    background-color: rgb(163, 166, 159);

 }

 a:hover{

    color: blue;

    font-size: 20px;

 }

 .box1{

    display: none;

    width: 900px;

    height: 300px;

    background-color: skyblue;

    position: absolute;

    left: 0;

 }

 #box>ul>li:hover .box1{

    display: block;

  }

  .box1>div{

    width: 223px;

    height: 300px;

    /* border: 1px solid black; */

    float: left;

    font-size: 10px;

  }

  .box1 li{

  display: block;

  height: 30px;

  }

  .box1 .aa{

    font-weight: bold;

  }

  .box1 .ab{

    color: aqua;

    font-weight: bold;

  }

效果图

 

各种网页_导航栏代码
12-11
各种网页_导航栏代码，有常见的各种单行条代码。。。
jQuery响应式网站导航栏代码.zip
07-04
jQuery响应式网站导航栏代码是一款基于jQuery Sass制作的PC端跟手机端导航菜单代码。
一个导航栏的代码
weixin_45359234的博客
06-09 2400
成品如上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> a { /* 去.
第八章 利用CSS制作导航栏菜单
最新发布
whitesandcnm的博客
09-26 3266
水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。
导航条代码
web开发自学
10-14 315
&lt;!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;THEBEAUTIFULLIST&lt;/TITLE&gt; &lt;styletype="text/css"&gt; div#BeautifulList{width:30
PHP网站导航栏下拉菜单代码,html导航栏下拉菜单怎么制作？这里有详细的代码实例...
weixin_26884391的博客
03-11 721
本篇文章介绍了关于html导航栏下拉菜单的制作，文章一开始就给出了全部的导航栏下拉菜单的代码，没看懂的下面都有详细的解释。下面就让我们一起来看这篇文章吧我们要说的是html导航栏下拉菜单的制作，先看一个完整的实例代码：.dropdown {position: relative;display: inline-block;}.dropdown-content {display: none;posit...
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
手机移动端固定在顶部的导航栏代码
05-19
手机移动端固定在顶部的导航栏代码，支持iOS，Android（暂不支持WP）等系统以webkit为内核的浏览器，建议在PC端使用以webkit为内核的浏览器（如：Google Chrome）中缩小浏览器窗口宽度查看效果,PC端查看效果需要用...
jQuery自适应网站导航栏代码
06-24
"jQuery自适应网站导航栏代码"就是一个针对这种需求的解决方案，它允许网站的导航栏根据用户浏览设备的屏幕尺寸自动调整布局，提供一致且友好的用户体验。 jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、...
展开收缩jQuery折叠导航栏代码.zip
07-04
"展开收缩jQuery折叠导航栏代码.zip" 提供了一个蓝色风格的jQuery插件，用于创建响应式的竖向折叠导航菜单。这个插件使得网页的导航结构更加清晰、交互更友好。 首先，jQuery是一个广泛使用的JavaScript库，它简化...
jQuery右侧弹出侧边导航栏代码.zip
07-04
"jQuery右侧弹出侧边导航栏代码.zip"是一个包含实现右侧弹出式侧边导航栏样式的资源包，特别适用于创建交互性强、用户体验良好的网站。这个代码实例可能包括HTML结构、CSS样式以及jQuery脚本，旨在帮助开发者快速...
网页导航栏示例100个
12-05
网页导航栏示例100个很多效果很不错。喜欢的小虾可以下载看看。
常用导航栏代码
热门推荐
从零出发
04-25 1万+
很多公司的官网，都是有一个始终在窗口最上端的导航栏，本人小白也是多次遇见这个问题，现在模仿了一个导航栏，希望可以帮助大家学习简单的导航栏。。。。。。&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;简单导航栏学习&lt;/title&gt; &a
html实现导航栏
studyinstall的博客
05-19 3509
【代码】【无标题】
网页导航栏制作
weixin_54327001的博客
08-03 3919
代码】网页导航。
web导航栏制作
m0_61665967的博客
03-19 736
【代码】web导航栏制作。
前端固定的导航栏（纯代码）
LucKaren的博客
08-31 1795
导航栏使用纯html+Css、实现导航栏固定，ul的固定悬浮，hover和display的显示隐藏。 面向纯新手小白
网页设计之导航栏
m0_46242592的博客
03-19 6609
本学期期末考如图所示，我们主要靠css样式的应用。div虽然很烦，但是和css搭配好就很简单哦！ 如图，首先打开编译软件，比如我下的vscode,这个软件还要搭配谷歌浏览器一起使用。（就我个人而言下了谷歌，当然还可以搭配其他的一起，目前没看见360浏览器 首先映入眼帘的是一个导航栏，如上图橙色部分 nav代码： /*nav 代码如下*/ <div class="nav"> <ul> <li><a href="https://n...
「网页开发｜前端开发｜Vue」05 Vue实战：从零到一实现一个网站导航栏
过美好生活，做高效程序员
09-06 2607
本文主要介绍如何从最开始的草图，通过确定基本结构、修改元素布局、美化外观来实现一个网站导航栏，从而熟悉网页开发的基本流程。同时，我们会把性能、规范性、可维护性方面的代码优化也考虑其中。
京东风格网页导航条代码实现
"这是一个关于创建网页导航条的代码示例，风格类似于京东商城的侧边导航栏。通过CSS样式定义了导航条的布局、颜色、字体等视觉效果，并且包含了鼠标悬停时的动态效果。" 在网页设计中，导航条是页面结构的重要组成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值
>