导航栏 基础代码

最新推荐文章于 2024-08-16 08:24:52 发布
最新推荐文章于 2024-08-16 08:24:52 发布
阅读量164 收藏
点赞数
文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ylxrrr/article/details/131793696
版权

<!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>

        *{

            margin: 0;

            padding: 0;

        }

        li{

            list-style: none;

           

        }

        #box{

            width:400px;

            height: 600px;

            border: 1px solid black;

            margin: 100px auto;

        }

        #box1{

            width: 400px;

            height: 40px;

            background-color: pink;

        }

        #box1>li{

            float: left;

            font-weight: bold;

            height: 40px;

            width: 100px;

            text-align: center;

            line-height: 40px;

           

        }

        #box2{

            width: 400px;

            height: 360px;

            box-sizing: border-box;

            /* border: 1px solid black; */

            padding: 10px;

            position: relative;

            display: none;

           

        }

        #box2>li{

            font-weight: bold;

            height: 100px;

            width: 400px;

           

        }

        #box3>li{

            font-weight: bold;

            height: 100px;

            width: 400px;

           

        }

        #box4>li{

            font-weight: bold;

            height: 100px;

            width: 400px;

           

        }

        #box5>li{

            font-weight: bold;

            height: 100px;

            width: 400px;

           

        }

        #box1>li:nth-child(1):hover~#box2{

            /* z-index: 5; */

            display: block;

        }

        #box3{

            width: 400px;

            height: 360px;

            box-sizing: border-box;

            /* border: 1px solid black; */

            padding: 10px;

            position: relative;

            display: none;

        }

        #box4{

            width: 400px;

            height: 360px;

            box-sizing: border-box;

            /* border: 1px solid black; */

            padding: 10px;

            position: relative;

            display: none;

        }

        #box5{

            width: 400px;

            height: 360px;

            box-sizing: border-box;

            /* border: 1px solid black; */

            padding: 10px;

            position: relative;

            display: none;

        }

        #box1>li:nth-child(2):hover~#box3{

            /* z-index: 5; */

            display: block;

        }

        #box1>li:nth-child(3):hover~#box4{

            /* z-index: 5; */

            display: block;

        }

        #box1>li:nth-child(4):hover~#box5{

            /* z-index: 5; */

            display: block;

        }

        /* #box3{

            width: 300px;

            height: 360px;

            position: absolute;

        } */

       img{

            width: 100px;

            height: 100px;

            box-sizing: border-box;

            padding: 10px;

            position: absolute;

           

        }

        /* #box2 li:nth-child(1):hover~#box3>img:nth-child(1){ */

            /* z-index: 5; */

            /* display: block; */

        /* } */

    </style>

</head>

<body>

    <div id="box">

        <div id="box1">

            <li><a href="">电影</a></li>

            <li><a href="">电视</a></li>

            <li><a href="">小说</a></li>

            <li><a href="">游戏</a></li>

            <div style="clear: both;"></div>

            <div id="box2">

                <li><a href="" target="_blank"> 1. 八角笼中</a><img src="./bjlz.png" alt="">

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热度指数921109↓ <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地区：中国大陆 <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型：剧情

                </li>

                <li><a href="" target="_blank">2. 消失的他</a><img src="./xsdt.jpg" alt="">

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热度指数921109↓ <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地区：中国大陆 <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型：剧情

                </li>

                <li><a href="" target="_blank">3. 碟中谍7</a><img src="./dzd.jpg" alt="">

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热度指数921109↓ <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地区：中国大陆 <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型：剧情

                </li>

                <li><a href="" target="_blank">4. 东北警察故事</a><img src="./dbjc.jpg" alt="">

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热度指数921109↓ <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地区：中国大陆 <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型：剧情

                </li>

                <li><a href="" target="_blank">5. 变形金刚</a><img src="./bxjg.jpg" alt="">

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;热度指数921109↓ <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;地区：中国大陆 <br>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型：剧情

                </li>

            </div>

            <div id="box3">

                <li><a href="">1. 我的人间烟火</a></li>

                <li><a href="">2. 长风度</a></li>

                <li><a href="">3. 玉骨瑶</a></li>

                <li><a href="">4. 消失的11层</a></li>

                <li><a href="">5. 偷偷藏不住</a></li>

            </div>

            <div id="box4">

                <li><a href="">1. 长风度</a></li>

                <li><a href="">2. 万象瑶</a></li>

                <li><a href="">3. 斗罗大陆</a></li>

                <li><a href="">4. 雪中悍刀行</a></li>

                <li><a href="">5. 活着</a></li>

            </div>

            <div id="box5">

                <li><a href="">1. op</a></li>

                <li><a href="">2. 农p</a></li>

                <li><a href="">3. 火p</a></li>

                <li><a href="">4. 瓦</a></li>

                <li><a href="">5. cf</a></li>

            </div>

        </div>

    </div>

</body>

</html>

Ylxrrr
关注
Bootstrap CSS入门初步学习---导航栏设计、代码展示
qq_46304554的博客
11-21 1878
1.基础导航栏制作步骤： 1.添加一个容器<nav>或<div>标签，使用.navbar类和.navbar-default类，并且添加role=“navigation”，增加访问性。 2.向<div>标签添加一个标题，使用.navbar-header类，内部包含有带有.navbar-brand类的<a>标签，用于定义品牌图标，或文字。 3.向导航栏添加链接，简单添加带有.nav类、 .navbar-nav类的无须列表即可。 下面进行代码展示： <!DOC
导航栏模版代码
01-16
适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
html导航样式模板
11-29
多种导航样式模板集合；其中有生成模板的方式，使用方式。项目主要是为了练手 项目适用于移动端 PC端。有兴趣的可以下载看看
探索高效导航栏：NavigationBar开源项目推荐
最新发布
gitblog_00525的博客
08-16 359
探索高效导航栏：NavigationBar开源项目推荐 NavigationBar标题导航栏，两三句代码即可实现项目地址:https://gitcode.com/gh_mirrors/na/NavigationBar 在移动应用开发中，一个直观且功能强大的导航栏是提升用户体验的关键。今天，我们将深入介绍一个名为NavigationBar的开源项目，它以其简洁的实现方式和丰富的定制选项，成为了An...
全面的导航选项模板样式及代码
今夕莫离-IT
07-11 1469
三级下拉菜单 为方便设定菜单样式，我为列表容器nav 添加了multi_drop_menu 类。这个菜单的每一条CSS规则都以.multi_drop_menu开头，以确保它们只会应用给带有这个类的容器。下拉菜单的标记是在前面菜单例子基础上扩充而来的。下面就是所有标记，虽然看起来挺吓人，但实际上不过是一个简单的三层嵌套列表而已。 Power Money Love F
常用导航栏代码
热门推荐
从零出发
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
css动感导航栏特效代码
03-20
本文将深入探讨“CSS动感导航栏特效代码”的相关知识点，包括CSS基础、导航栏设计原则、动态效果实现以及如何利用提供的资源进行实际应用。 首先，CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或...
JQuery 浮动导航栏实现代码
10-29
标题中的“JQuery 浮动导航栏实现代码”是指使用jQuery库来创建一个在页面滚动时始终保持在屏幕顶部的导航栏。这样的设计可以提供更好的用户体验，因为用户可以在任何位置快速访问导航链接，而无需滚动回页面顶部。 ...
jQuery 苹果官网导航栏效果代码
11-03
1. **HTML 结构**：基础的HTML结构是构建导航栏的第一步。通常，一个简单的导航栏由`<nav>`元素包裹，包含一系列`<ul>`列表项，每个列表项是一个`<li>`，其中嵌套着链接`<a>`。例如： ```html <li><a href="#...
jQuery自适应网站导航栏代码
06-24
"jQuery自适应网站导航栏代码"就是一个针对这种需求的解决方案，它允许网站的导航栏根据用户浏览设备的屏幕尺寸自动调整布局，提供一致且友好的用户体验。 jQuery是一种广泛使用的JavaScript库，它简化了DOM操作、...
【纯html+css垂直导航栏代码】
weixin_52218117的博客
07-18 4791
【纯html+css垂直导航栏代码】
CSS web导航菜单模板
12-16
包含20个漂亮的纯CSS的web导航菜单
红色的html导航栏模板
06-08
红色的html导航栏模板 比较漂亮 界面效果好
web导航栏制作
m0_61665967的博客
03-19 558
【代码】web导航栏制作。
2020-10-31 css实例：导航栏模板及样式解释
Amanda&Rachel的博客
10-31 574
W3C完整样式的水平导航栏实例 <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none;/*设置列表项目符号为空*/ margin:0;/*去掉ul，li默认外边距*/ padding:0;/*去掉ul,li默认内间距*/ overflow:hidden;/*清除浮动*/ } li { float:left;/*li向左浮动，使列表横向排列*/ } a:link,a:visited /*a
页面导航源码
05-20 445
HTML：     Thing one     Thing two     Thing three     Thing four Back Next
Flutter初学者之普通底部导航栏及自定义不规则底部导航栏的实现，赶紧收藏备战金三银四
2401_84149381的博客
04-08 456
老规矩，先上效果图一般我们做APP的都知道，很多APP 底部导航栏采用这样的样式，如果用原生开发还是比较费劲的，但是用Flutter 开发还是很便捷的，原理大概就是将 Flutter 中的 FloatActionButton 悬浮按钮融合到底部导航栏中去实现，上代码！这里我们还是采用刚开始那段入口代码，只是我们的 bottomNavigationBar 属性实现的组件我们去单独定义，将这个自定义底部导航栏的功能单独写一个组件。///自定义组件 StatelessWidget(无状态组件)
HTML简约导航栏代码
chenzhi0122的博客
06-15 726
【代码】HTML简约导航栏代码。
css 导航栏效果
蓝朽的小世界
04-08 7562
html实现导航栏效果
Bootstrap导航条详解与基础应用
Bootstrap每天必学之导航条是前端开发中常用的基础组件之一，它在Bootstrap框架中的表现形式比导航更为多样和灵活。导航条和导航虽然仅一字之差，但它们在Bootstrap中的角色和用途有所区别。导航条（navbar）通常...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值