导航的制作

最新推荐文章于 2022-09-28 09:42:37 发布
最新推荐文章于 2022-09-28 09:42:37 发布
阅读量486 收藏 2
点赞数 8
分类专栏： HTML和CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45806781/article/details/109487313
版权

目录

一、导航

二、简单导航

一、导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*方案一：转化为行级块*/
        /*.menu{
            font-size: 0;
        }
        .menu>li{
            list-style: none;
            display: inline-block;
            border: 1px solid red;
            font-size: 14px;
        }*/
        /*方案二：设置浮动*/
        .bgback{
            position: relative;
            background-color: #000;
        }
        .menu{
            height: 40px;
            padding: 4px 0;
        }
        .nav{
            position: absolute;
            left: 0;
            top: 40px;
            padding: 4px 0;
            height: auto;
            display: none;
            z-index: 1;
        }
        .menu:after,.nav:after,.nav_child:after{
            content: " ";
            position: absolute;
            width: 100%;
            height: 4px;
            left: 0;
            bottom: 0;
            /*border-bottom: 3px solid red;*/
            /*background: linear-gradient(to 
            right,red,green,blue,orangered,deeppink,chocolate,gold);*/
            /*用角度设置*/
            /*background: linear- 
            gradient(0deg,red,green,blue,orangered,deeppink,chocolate,gold);*/
            background: linear- 
            gradient(90deg,red,green,blue,orangered,deeppink,chocolate,gold);
        }
        .menu:before,.nav:before,.nav_child:before{
            content: " ";
            position: absolute;
            width: 100%;
            height: 4px;
            left: 0;
            top: 0;
            /*border-bottom: 3px solid red;*/
            /*background: linear-gradient(to 
             right,red,green,blue,orangered,deeppink,chocolate,gold);*/
            /*background: linear- 
             gradient(0deg,red,green,blue,orangered,deeppink,chocolate,gold);*/
             background: linear- 
             gradient(90deg,red,green,blue,orangered,deeppink,chocolate,gold);
        }
        .menu>li{
            /*设置等宽的导航*/
            /*width: 100px;
            text-align: center;*/
            /*根据内容设置宽度*/
            position: relative;
            padding: 0 50px;
            color: #fff;
            list-style: none;
            float: left;
            height: 40px;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
        }
        .menu>li:hover{
            background-color: white;
            color: black;
        }
        .nav>li{
            list-style: none;
            width: 118px;
            text-align: left;
            padding: 10px;
            position: relative;


        }
        .menu>li:hover>.nav{
            color: white;
        }
        .nav>li:hover{
            background-color: white;
            color: black;
        }
        .nav:after{
            content: " ";
            position: absolute;
            width: 100%;
            height: 4px;
            left: 0;
            bottom: 0;
            background: linear- 
            gradient(90deg,red,green,blue,orangered,deeppink,chocolate,gold);
        }
        .menu>li:hover>.nav{
            display: block;
        }
        .nav_child {
            display: none;
            position: absolute;
            width: 100px;
            right: -100px;
            top: 0px;
        }
        .nav_child > li {
            list-style: none;
            padding: 0 20px 0 10px;
            color: white;
            background-color: black;
        }
        .nav_child > li:hover {
            color: black;
            background-color: white;

        }
        .nav > li:hover > .nav_child {
            color: #fff;
            display: block;
        }
    </style>
</head>
<body>
<ul class="menu bgback">
    <li>首页</li>
    <li>课程
        <ul class="nav bgback">
            <li>html1/css</li>
            <li>html5/css3</li>
            <li>javascript
                <ul class="nav_child">
                    <li>数据库</li>
                    <li>JSP</li>
                    <li>java</li>
                </ul>
            </li>
            <li>vue</li>
        </ul>
    </li>
    <li>社交活动</li>
    <li>联系我们</li>
    <li>论坛</li>
</ul>
</body>
</html>

二、简单导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .menu{
            height: 40px;
        }
        .menu>li{
            /*margin-left: -1px;*/
            list-style: none;
            float: left;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid black;
            box-sizing: border-box;
            box-shadow: 0 0 1px black;
        }
        .nav>li{
            list-style: none;
            border: 1px solid black;
            box-sizing: border-box;
            height: 40px;
            text-align: center;
            padding-left: 10px;
        }
        .nav{
            display: none;
        }
        .menu>li:hover>.nav{
            display: block;
        }
        .menu>li:hover,.nav>li:hover,.nav_child>li:hover{
            background-color: aliceblue;
        }
        .nav_child{
            margin-left: 87px;
            margin-top: -40px;
            display: none;
        }
        .nav_child>li{
            width: 100px;
            height: 40px;
            list-style: none;
            border: 1px solid black;
            padding-left: -10px;
        }
        .nav>li:hover>.nav_child{
            display: block;
        }
    </style>
</head>
<body>
<ul class="menu">
    <li>动态</li>
    <li>博客</li>
    <li>分类专栏
        <ul class="nav">
            <li>c语言</li>
            <li>java</li>
            <li>JSP</li>
            <li>前端
                <ul class="nav_child">
                    <li>html</li>
                    <li>css</li>
                    <li>javascript</li>
                    <li>vue</li>
                </ul>
            </li>
            <li>数据库</li>
        </ul>
    </li>
    <li>Bink</li>
    <li>更多</li>
</ul>
</body>
</html>

南初️
关注
  • 8
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
前端开发——导航栏的制作
qq_40172361的博客
03-17 9236
在前端开发中，导航栏制作是比较基本的操作，这是我写的导航栏的代码。先写基本的HTML文件，用div框起来，使用ul标签。结果是这样的使用css文件设置样式先给导航栏设置宽，高和背景颜色，然后使用p标签左浮动，ul标签右浮动，使其脱离文档流在一行显示；将p标签的line-height和top的height值设置一样，使p标签居中显示；line-height设置垂直居中，text-align设置水平居...
各种导航的制作
weixin_43755513的博客
07-30 365
各种导航的制作 1 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0;} /* nav1 */ .nav1{width:489px;h...
制作导航
weixin_30652271的博客
02-10 122
转载于:https://www.cnblogs.com/liujianing/p/10358671.html
导航制作
qq_41398448的博客
10-03 351
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;导航&lt;/title&gt; &lt;style&gt; /*body 标签 将默认格式清楚掉*/ body{ padding: 0; margin: 0 auto;
网站导航制作软件
10-27
网站导航制作软件是一种工具，专为开发者和网页设计师设计，帮助他们轻松创建具有特效和下拉功能的导航菜单。在网页设计中，导航是至关重要的元素，它引导用户浏览网站的不同部分，提供清晰的结构和易用性。这款软件...
纯CSS实现标签导航制作
10-30
纯CSS实现标签导航制作 在本文中，我们将学习如何使用纯CSS实现标签导航制作，不需要使用JavaScript或背景图片。下面是相关知识点的总结： 1. CSS Reset：在CSS中，我们需要重置浏览器的默认样式，以确保我们的...
flash导航制作
07-01
导航制作 精美flash导航栏制作 导航栏法拉盛
html知识-导航制作
最新发布
04-27
这个视频讲了html中的导航栏制作，大家有没有发现很多网站里面都有导航栏，比如京东，天猫，淘宝，小米商城等，今天手把手教大家如何制作网页的一个导航栏
简易css导航制作
01-07
通过该软件可以实现多级导航菜单的制作，样式多样
网页模板(制作网页导航栏)
02-10
一个非常不错的制作网页工具栏的小工具.制作完毕之后,将生成的代码复制到页面中就可使用.
制作导航的资料
08-17
网站中各种导航制作的资料，方便学习和应用
网页常用各种导航菜单
01-06
导航菜单，横向导航，抽地菜单，多级下拉菜单，JS效果导航菜单都是现在网页中常用的导航菜单
导航制作的几个步骤
weixin_30918633的博客
09-05 380
导航制作的几个步骤: 1.首先对地面进行处理,既对其导航位置进行生成，步骤为: 首先点开Navigation属性界面: 2.将其中要进行烘焙的物体其设置为导航静态 3.然后对地形进行烘焙 点击Bake进行烘焙 4.然后给要进行运动的物体添加组件 然后就给物体进行了范围的导航的控制 注意点： 当设置导航的时候将物体的 状态改为： 当将其标记成stat...
导航电子地图的制作过程
toto+的博客
09-28 2804
注册测绘师《测绘综合能力》第11章-导航电子地图制作
做一个主页导航
晴天Smile
09-06 398
div id="app" @click='hiddenNav()'>     router-view>router-view>     upimg>upimg>     nav class="cd-stretchy-nav">       a class="cd-nav-trigger" href="javascript:void(0);" @click.stop="trigger()
如何做一个简单的网页导航
安生生爱做梦的博客
01-20 2540
如何运用html和css制作一个简单的网页导航 代码示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .nav{ /* 设置高和宽 */ height: 90px; width: 530px; /* 背景颜色 */ back
制作一个网站的导航菜单
leslieiloveyou的博客
03-15 1952
啊哈！从今天起我要做一个勤奋好学的孩纸。现代社会是一个信息爆炸的社会，无论什么更新换代的都很快，我希望自己在2年后可以做到行业里的一把好手，那么学习就是必不可少的啦！学到老活到老~~ 我打算在闲暇时间做一个农产品营销系统，之前bulabula一堆构思准备，现在我先要开始做界面啦！今儿个一会儿还有事，先做个导航菜单栏吧！希望大家不要笑话哈！ 我打算实现下图的效果~~ 那这个结构类似于书籍目
怎么制作一键导航
聆听岁月的博客
04-25 2487
关于导航，我想大家都会用，那么怎么去制作一个网页导航呢，怎样去制作一个简单的导航呢。 在这里我喜欢使用百度地图导航，实现很简单，只需要你传入目的地的经、纬度就可以了。第一、怎么去获取目的地的经、纬度？ 在百度地图开放平台官网，找到地图拾取工具，然后输入你的目的地，就可以查找到相应的经、纬度坐标了第二、怎么生成一个导航链接 http://api.map.baidu.com/marker?loca
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南初️

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值