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

最新推荐文章于 2024-05-19 09:58:49 发布
最新推荐文章于 2024-05-19 09:58:49 发布
阅读量849 收藏 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>

实现结果：

魑魅魍魉1564
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css +html实现网站二级导航
lansing_1995的博客
05-22 1760
做了好几个小时，也算有点模样，学到了很多东西，看过的东西还是要多练才能理解的透彻，连接处的白边可以用小白块覆盖，真的很有创意（这是’剽窃’老师的思想了），做的练习还是不太够的感觉，以后应该可以做的快一点。<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
html+css实现简单导航栏
qq18__的博客
05-06 992
实现一个简单的导航栏，当鼠标移动到某个链接时改变背景颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用行内块元素做一个导航栏</title> <style type="text/css"> a { disp...
纯CSS实现下拉框
six6de6的博客
07-12 4765
css简单下拉框的实现！
html实现导航栏
最新发布
studyinstall的博客
05-19 901
【代码】【无标题】
css实现下拉框效果
weixin_48122970的博客
08-20 702
【代码】css实现下拉框效果。
HTML设计一个水平导航栏，完成水平导航栏下拉列表交互效果的实现。
2301_76652768的博客
06-09 6920
完成水平导航栏下拉列表交互效果的实现，（1）使用无序列表ul及嵌套的子列表ul做该导航菜单结构；（2）使用浮动实现主菜单项的水平排列； （3）使用:hover伪类选择器为主菜单项添加鼠标悬停效果（可自定义） （4）使用display 或 visibility 或opacity 属性隐藏子列表菜单 （5）使用:hover伪类选择器添加鼠标悬停时显示子菜单效果 （6）使用:hover伪类选择器添加鼠标悬停在子菜单选项时显示背景颜色和字体颜色改变效果。
CSS——下拉框的制作（以小米商城为例）
Bonsoir777的博客
07-08 3295
本文主要介绍了下拉框的实现过程（以小米商城为例），以及display:none和visibiliy：hidden的区别。
CSS基础学习--19 下拉菜单
yyxhzdm的博客
06-18 3029
我们可以使用任何的 HTML 元素来打开下拉菜单，如：, 或 a 元素。使用容器元素 (如： ) 来创建下拉菜单的内容，并放在任何你想放的位置上。使用 元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。（1）、设置左浮动的下拉菜单内容方向是从左到右，而不是从右到左。（2）、设置右浮动的下拉菜单内容方向是从右到左，而不是从左到右。如果你想设置下拉内容与下拉按钮的宽度一致，可设置。, 这将设置下拉菜单的内容放置在下拉按钮 (使用。
html+CSS打造的简单网站导航.rar
03-04
本教程将聚焦于如何使用HTML和CSS构建一个简单的带有下拉框的网站导航条。这个压缩包“html+CSS打造的简单网站导航.rar”包含了实现这一功能所需的全部资源，可以直接应用于你的网站。 首先，我们来探讨HTML的基础...
w3cfuns网站jquery导航条
04-07
在网页设计中，导航条是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。"w3cfuns网站jquery导航条"就是一个专为网站设计的交互式导航组件，利用jQuery库来实现动态效果和下拉菜单功能。jQuery是...
js_jquery_css3实现带旋转提示_下拉框导航
04-04
在这个下拉框导航中，CSS3被用来定义导航条的样式，包括颜色、字体、布局以及最重要的——旋转效果。CSS3的transition属性可以平滑地改变元素的样式，比如在下拉菜单出现或消失时，配合transform属性可以实现箭头的...
JQuery&CSS;&CSS;+DIV实例大全.rar
08-13
23.jquery实现的动感菜单导航条源码 24.jquery实用滚动下拉菜单代码 25.jquery鼠标移动出现下拉菜单及提示特效代码 26.jquery外国滚动型多级展开菜单插件(jGlideMenu)下载 27.jquery自由滚动切换 标签式...
css实例 包括 布局 菜单 下拉菜单 导航条 圆角框等
10-16
在CSS（层叠样式表）领域，理解和应用各种布局、菜单、下拉菜单、导航条以及圆角框等设计元素是至关重要的。这些组件是构建现代网页界面的基础，能够为用户提供直观、美观且易于导航的体验。下面我们将深入探讨这些...
导航栏以及二级菜单栏（下拉列表）的制作
weixin_74835614的博客
11-30 1万+
作为新手小白，在我们熟悉了HTML , CSS，JS的功能和语法之后，Web前端开发中，更重要的还有界面的美化，主要依据CSS的庞大功能来实现，今天我来给大家分享的是，利用html代码来实现横向导航栏以及下拉菜单列表的实现。首先，用和标签将导航栏的布局搭建出来（此时的一级导航栏还是纵向的位置，如何拉至横向需要CSS部分的辅助，下面CSS部分会提到），代码中的"登录","注册","留言","我的"为导航栏的标签部分，搭建二级菜单栏的代码位置，类似于“嵌套”
弹性盒练习
w18789476022的博客
11-19 287
<!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="../../c
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 5107
css下拉框 在逛淘宝京东等网站时经常会有这种效果——鼠标悬浮会显示隐藏元素，我们称为下拉框，效果如下 下面介绍实现下拉框的原理以及方法 原理1： ① 触发鼠标悬浮状态的元素和隐藏的元素为兄弟关系，即必须拥有相同的父元素 ②将伪类：hover绑定给父元素，让父元素触发鼠标悬浮事件 ③隐藏的元素使用绝对定位，父元素设置相对定位，使其相对于父元素定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset
HTML+CSS实现导航条及下拉菜单1
青梅煮酒
06-05 9726
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导航栏
ganlinczz的博客
02-04 2760
简易导航栏
js+css实现下拉框
07-14
要实现一个下拉框，你可以使用JavaScript和CSS来完成。下面是一种常见的实现方法： HTML结构： ```html <div class="dropdown"> <button class="dropdown-toggle" onclick="toggleDropdown()">下拉框</button> <ul class="dropdown-menu"> <li>选项1</li> <li>选项2</li> <li>选项3</li> </ul> </div> ``` CSS样式： ```css .dropdown { position: relative; display: inline-block; } .dropdown-toggle { background-color: #f1f1f1; border: none; color: black; padding: 10px; cursor: pointer; } .dropdown-menu { position: absolute; top: 100%; left: 0; background-color: #f1f1f1; list-style: none; padding: 0; margin: 0; display: none; } .dropdown-menu li { padding: 10px; } .dropdown-menu li:hover { background-color: #ddd; } ``` JavaScript代码： ```javascript function toggleDropdown() { var dropdownMenu = document.querySelector('.dropdown-menu'); if (dropdownMenu.style.display === 'none') { dropdownMenu.style.display = 'block'; } else { dropdownMenu.style.display = 'none'; } } ``` 上面的代码实现了一个简单的下拉框。当点击下拉框按钮时，通过JavaScript的`toggleDropdown`函数切换下拉菜单的显示隐藏状态。 在CSS中，`.dropdown`类定义了下拉框的容器样式，`.dropdown-toggle`类定义了下拉框按钮的样式，`.dropdown-menu`类定义了下拉菜单的样式，包括其位置、背景颜色和列表项样式。 通过这种方式，你可以实现一个基本的下拉框。你可以根据需要进一步自定义样式和功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值