html+css设计导航条及下拉框

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

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

    <style>

        * {

            margin: 0;

            padding: 0;

            text-decoration: none;

            list-style: none;

        }

//导航条设计

        .nav {

            width: 1500px;

            height: 50px;

            background-color: rgb(39, 203, 191);

            border-radius: 10px;

            border: 3px solid rgb(255, 254, 255);

            box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);

            margin: 50px auto;

        }

        .navlist {

            width: 1000px;

            height: 50px;

            display: block;

            /* background-color: pink; */

            margin-left: 50px;

        }

        .navitem {

            float: left;

            width: auto;

            display: block;

        }

        .navitem a {

            color: white;

            height: 50px;

            width: 70px;

            display: block;

            text-align: center;

            line-height: 50px;

        }

        .navitem:hover {

            background-color: rgb(0, 188, 211);

        }

        .navitem:first-of-type {

            background-color: rgb(0, 188, 211);

        }

//下拉框设计

        .droplist {

            background-color: #fff;

            /* box-shadow: #eee; */

            border: 1px solid aquamarine;

            /* clear: both; */

            display: block;

            position: absolute;

            display: none;//隐藏下拉框

        }

        .dropitem:hover {

            background-color: gray;

            color: white;

        }

        .navitem:hover .droplist{

            display: block;//点击显示下拉框

        }

    </style>

</head>

<body>

    <div class="nav">

        <ul class="navlist">

            <li class="navitem">

                <a href="#">首页</a>

            </li>

            <li class="navitem">

                <a href="#">机票</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">酒店</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">火车票</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">度假</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">团购</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">门票</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">当地人</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">汽车票</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">行程设计</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">攻略</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

            <li class="navitem">

                <a href="#">旅游快讯</a>

                <ul class="droplist">

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">楚一皇</li>

                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>

                </ul>

            </li>

        </ul>

    </div>

</body>

</html>

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }

        .nav {
            width: 1500px;
            height: 50px;
            background-color: rgb(39, 203, 191);
            border-radius: 10px;
            border: 3px solid rgb(255, 254, 255);
            box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
            margin: 50px auto;
        }

        .navlist {
            width: 1000px;
            height: 50px;
            display: block;
            /* background-color: pink; */
            margin-left: 50px;

        }

        .navitem {
            float: left;
            width: auto;
            display: block;
        }

        .navitem a {
            color: white;
            height: 50px;
            width: 70px;
            display: block;
            text-align: center;
            line-height: 50px;
        }

        .navitem:hover {
            background-color: rgb(0, 188, 211);
        }

        .navitem:first-of-type {
            background-color: rgb(0, 188, 211);
        }

        .droplist {
            background-color: #fff;
            /* box-shadow: #eee; */
            border: 1px solid aquamarine;
            /* clear: both; */
            display: block;
            position: absolute;
            display: none;
        }

        .dropitem:hover {
            background-color: gray;
            color: white;
        }
        .navitem:hover .droplist{
            display: block;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul class="navlist">
            <li class="navitem">
                <a href="#">首页</a>

            </li>
            <li class="navitem">
                <a href="#">机票</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">酒店</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">火车票</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">度假</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">团购</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">门票</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">当地人</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">汽车票</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">行程设计</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">攻略</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
            <li class="navitem">
                <a href="#">旅游快讯</a>
                <ul class="droplist">
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">楚一皇</li>
                    <li class="dropitem">得无报搏。jjvjahcdksdhkv</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>

实现结果：

html+CSS打造的简单网站导航.rar
03-04
本教程将聚焦于如何使用HTML和CSS构建一个简单的带有下拉框的网站导航条。这个压缩包“html+CSS打造的简单网站导航.rar”包含了实现这一功能所需的全部资源，可以直接应用于你的网站。 首先，我们来探讨HTML的基础...
纯CSS实现下拉框
six6de6的博客
07-12 4851
css简单下拉框的实现！
css实现下拉框效果
weixin_48122970的博客
08-20 821
【代码】css实现下拉框效果。
前端必知必会-CSS下拉菜单
qq_24018193的博客
08-24 1868
本文介绍了的CSS下拉菜单使用，如有问题欢迎私信和评论。
HTML设计一个水平导航栏，完成水平导航栏下拉列表交互效果的实现。
2301_76652768的博客
06-09 7615
完成水平导航栏下拉列表交互效果的实现，（1）使用无序列表ul及嵌套的子列表ul做该导航菜单结构；（2）使用浮动实现主菜单项的水平排列； （3）使用:hover伪类选择器为主菜单项添加鼠标悬停效果（可自定义） （4）使用display 或 visibility 或opacity 属性隐藏子列表菜单 （5）使用:hover伪类选择器添加鼠标悬停时显示子菜单效果 （6）使用:hover伪类选择器添加鼠标悬停在子菜单选项时显示背景颜色和字体颜色改变效果。
CSS——下拉框的制作（以小米商城为例）
Bonsoir777的博客
07-08 3398
本文主要介绍了下拉框的实现过程（以小米商城为例），以及display:none和visibiliy：hidden的区别。
CSS基础学习--19 下拉菜单
yyxhzdm的博客
06-18 3351
我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。
CSS导航条菜单之带小三角形的实现代码
09-22
在网页设计中，导航条是不可或缺的组成部分，它负责引导用户在不同的页面或区域间切换。其中，在导航条的各个选项旁边添加小三角形（或者称之为下拉箭头），可以指示该选项下还有更多内容，提供给用户下拉菜单的操作...
w3cfuns网站jquery导航条
04-07
在网页设计中，导航条是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。"w3cfuns网站jquery导航条"就是一个专为网站设计的交互式导航组件，利用jQuery库来实现动态效果和下拉菜单功能。jQuery是...
js_jquery_css3实现带旋转提示_下拉框导航
04-04
在这个下拉框导航中，CSS3被用来定义导航条的样式，包括颜色、字体、布局以及最重要的——旋转效果。CSS3的transition属性可以平滑地改变元素的样式，比如在下拉菜单出现或消失时，配合transform属性可以实现箭头的...
layui固定下拉框的显示条数(有滚动条)的方法
10-16
要实现这个功能，关键是通过CSS设置下拉框的最大高度（max-height），并确保下拉框内能够显示滚动条。具体做法是在相应的HTML元素上添加一个特定的类名，并为这个类设置max-height属性。 根据提供的文件内容，我们...
导航栏以及二级菜单栏（下拉列表）的制作
weixin_74835614的博客
11-30 1万+
作为新手小白，在我们熟悉了HTML , CSS，JS的功能和语法之后，Web前端开发中，更重要的还有界面的美化，主要依据CSS的庞大功能来实现，今天我来给大家分享的是，利用html代码来实现横向导航栏以及下拉菜单列表的实现。首先，用和标签将导航栏的布局搭建出来（此时的一级导航栏还是纵向的位置，如何拉至横向需要CSS部分的辅助，下面CSS部分会提到），代码中的"登录","注册","留言","我的"为导航栏的标签部分，搭建二级菜单栏的代码位置，类似于“嵌套”
用纯css实现下拉菜单的几种方式
weixin_30333885的博客
11-15 768
第一种:display:none和display:block切换 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <st...
HTML＋CSS导航栏及下拉菜单的实现
热门推荐
zhxzrd的博客
04-18 2万+
导航栏是位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，起着链接站点或者软件内的各个页面的作用。 关于位于页面顶部的导航栏究竟是如何实现的，希望下面的代码可以对朋友们有帮助。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>书香之家</title> <style type="text/c
css下拉框
weixin_43913877的博客
11-20 5174
css下拉框 在逛淘宝京东等网站时经常会有这种效果——鼠标悬浮会显示隐藏元素，我们称为下拉框，效果如下 下面介绍实现下拉框的原理以及方法 原理1： ① 触发鼠标悬浮状态的元素和隐藏的元素为兄弟关系，即必须拥有相同的父元素 ②将伪类：hover绑定给父元素，让父元素触发鼠标悬浮事件 ③隐藏的元素使用绝对定位，父元素设置相对定位，使其相对于父元素定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset
html导航栏+下拉菜单+表单验证
Golemon的博客
03-13 1032
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./bootstrap-5.3.3/dist/css/bootstrap-grid.min.cs
HTML+CSS实现导航条及下拉菜单1
青梅煮酒
06-05 9968
1、效果截图 2、html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="main-menu"> <div class="logo"> <p>XXX后台管理系统</p> <
html导航栏相关知识
qq_43201652的博客
08-03 2115
html导航栏
网页设计如何设计三级菜单导航条通过HTML和CSS实现
最新发布
10-18
在网页设计中，创建一个三级菜单导航栏通常涉及到HTML结构的布局和CSS样式控制。下面是一个简单的步骤描述： 1. **HTML结构**: - 使用`<ul>`标签创建无序列表，这是导航菜单的基本容器。 - 对于一级菜单，创建一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值