参考慕课网学做三级导航

最新推荐文章于 2024-10-02 13:25:04 发布
最新推荐文章于 2024-10-02 13:25:04 发布
阅读量163 收藏
点赞数
分类专栏： 三级导航栏 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40341342/article/details/105093214
版权 
<!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>
*{
    padding: 0;
    margin: 0;
    
}

ul{
    list-style-type: none;
}
.page{
    width: 100%;
    height: 1000px;
}
.nav{
    width: 160px;
    position: fixed;
    left: 0;
    top: 103px;
    height: auto;
    text-align: center;
    font-family: fantasy;
font-size: 16px;
}
.nav-list{
    width: 160px;
    height: auto;
    line-height: 40px;
   border-bottom: 1px solid white;
   color: white;
   background-color:
    #333;
    
}
.tit{
    width: 160px;
    height: 40px;
    line-height: 40px;
}
.nav-list ul{
    width: 160px;
    height: auto;
    background-color: white;
    color: #666;
    display: none;
}
.nav-list ul li{
    width: 160px;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px dashed #333; 
    position: relative;
}
.nav-list:hover ul{
    display: block;
}
.tit-3{
height: auto;
width: 160px;
position: absolute;
left: 160px;
top: 0;
display: none;
  
}
.tit-3dom{
    width: 160px;
    height: 40px;
    line-height: 40px;
    background-color: #444;
    color: white;
    border-bottom: 1px solid white;
    
}
.nav-list ul li:hover .tit-3{
    display: block;
}



    </style>
</head>
<body>
    <div class="page">
        <div class="nav">
            <div class="nav-list"><div class="tit">慕课网标题</div>
                <ul>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                </ul>

                 

            </div>
            <div class="nav-list"><div class="tit">慕课网标题</div>
                <ul>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                </ul>

                 

            </div>
            <div class="nav-list"><div class="tit">慕课网标题</div>
                <ul>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                </ul>

                 

            </div>
            <div class="nav-list"><div class="tit">慕课网标题</div>
                <ul>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                </ul>

                 

            </div>
            <div class="nav-list"><div class="tit">慕课网标题</div>
                <ul>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                    <li>二级标题
                        <div class="tit-3">
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
                            <div class="tit-3dom">三级标题</div>
            

                        </div>
                    </li>
                </ul>

                 

            </div>
        </div>
    </div>
    
</body>
</html>
qq_40341342
关注
专栏目录
使用axure9绘制三级导航
jujuzhu00的博客
04-06 1990
先放一张效果图???? 学习axure肯定会碰到需要做导航栏的时候，并且我觉得导航栏的设计是最基础的，但却不是最简单的交互效果。设计导航栏时，只需要将其想象成多个图层即可。因为axure是原型设计软件，就像一个会动的ps，所有的效果都是通过不同的图片交替展现出来的，每一个鼠标的操作，都对应着改操作下的一个样式，或者说一张图片。所以说交互效果就是不同图层的交换展示，这样可能会好理解一些。 下面我们开始进入教程 1.首先需要将你的全部1、2、3级导航的样式做出来 2.设置三级导航 不管几级导航，都要从最低一级
慕课网笔记-阶段3-分布式消息队列-RabbitMQ-分布式消息队列（MQ）认知提升
weixin_42415707的博客
02-17 594
一、学习指南 Hello，小伙伴们大家好。从今天开始，我们一起来进入下一个大模块的知识点学习，这个大模块我们来一起学习一下分布式消息队列，也就是mq的设计与落地。在大模块中，我们其实主要围绕这两个业界非常主流的开源消息中间件为主，第一个就是我们的RabbitMQ，也就是兔子，第二个就是我们的apache的kafka，这两个mq也是业界非常主流的mq，当然在课程学习过程中还会涉及到比如说像activeMQ或者是RocketMQ这些都作为一些课外的扩展知识，会跟小伙伴们去提一下，如果有兴趣的话，以后小伙伴可以跟
仿慕课网导航栏
weixin_34055910的博客
07-26 359
慕课网官网挺好看的，也是典型的三行布局 头部 底部 还有跟随页面的导航栏。适合头部、中部、底部同级的div 在页面划过超不多一半的时候 会有返回顶部 先实现这三个吧 头部的box-shawdow属性 参数分别是 x的偏移 y便宜 向右向下就是正的 Blur就是模糊度，模糊的才好看，越大越模糊 spr...
三级导航
ZOEylchen的博客
09-27 7008
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index/navheader.css"> </head> <body> <ul id="header"> <li><a>一级
三级导航栏
weixin_54668937的博客
03-04 2308
三级导航 导航栏是一个页面必备的部分，主要用来引导人们去浏览相应的内容。下面我们来看一下导航栏里面的三级导航是如何制作的，首先我们来看一下HTML部分，如图： 然后我们来认识一下俩个css的属性1. Visibility属性可指定一个元素是否可见。2. Opacity属性可来设置一个元素的透明度。接下来我们要给类名为C的ul标签的Visibility属性设为hidden，也就是隐藏，Opacity属性设置为0。如图： 这样我们就可以把二级导航部分隐藏起来。然后给类名为B的li标签一个伪类，使其在鼠标移到
iOS最全学习资源汇总
热门推荐
DCSnail-蜗牛
04-07 1万+
目录: 第一部分: iOS 学习资源整理(包括视频/教程/博客/书记/插件/社区/网站) 第一部分: iOS 各大牛博客列表 第一部分: iOS github 上托管的各类第三方       ---------------------------------------------------------------------------------------------------...
网页制作课作业基于HTML+CSS+JavaScript+jquery仿慕课网教学培训网站设计实例 企业网站制作
STU网页设计
12-24 78
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web
临摹中国慕课静态网页周记
weixin_53363646的博客
03-28 423
临摹中国慕课静态网页周记 第一周 一 、MD语法学习 (1) 标题 # ——一级标题 ## ——二级标题 ### ——三级标题 #### ——四级标题 ##### ——五级标题 ###### ——六级标题 （#与标题之间存在空格） 效果： ——一级标题 ——二级标题 ——三级标题 ——四级标题 ——五级标题 ——六级标题 (2) 字体 ①——加粗 **（加粗语言）** ②——高亮 ==高亮== ③——删除键 ~~（删除语言）~~ ④——斜体 *（斜体语言）* 效果： ①——加粗 （加粗语言） ②——高
学习计算机编程（IT、偏网站开发）的参考学习网址syk
chouzhan0246的博客
06-01 9738
这两年自己学到了许多东西，发现以前想学，可却不知道在哪里学，没有好的学习资源，这里我把这一年自己学习过程中了解到的好的计算机相关知识的学习网址分享给大家，虽然不是很全面，但希望能帮到那些想找学习资源的博友们。 IT学习资料（初晓） 1. 综合学习网址 （1）教学网站 http://...
如何实现导航菜单栏中的二级下拉菜单？
sulan2131的博客
04-03 445
我们在淘宝、搜狐等大型网站上都可以看到使用的一些二级下拉菜单，比如下面这张图片。 但是如何实现类似的图片呢？实际上，我们有至少三种方式来实现，下面，我附上代码供大家参考。 1.仅使用html和css 1 2 3 4 5 6 7 8 9 10 11 12 13 14
【渝粤题库】陕西师范大学152112 网络信息检索与利用
渝粤题库
12-08 5192
单选题 1、信息素养的核心是( )。 A、信息意识 B、信息知识 C、信息能力 D、信息道德 2、20世纪70年代，联合国教科文组织提出：人类要向着( )发展。 A、终身学习 B、学习型社会 C、创新发展 D、信息素质 3、从对文献的生产加工与组织层次来看，文献可以分成一次文献、二次文献和三次文献。一次文献主要有（ ）。 A、专著、报纸、期刊 B、书目、索引、文摘 C、百科全书、年鉴、手册 D、
ios微信浏览器-div设置滚动-不出现滚动条的解决办法
一叶扁舟
02-14 6592
.scrolldiv{ height: 85%; overflow: hidden; overflow-y: scroll; } .scrolldiv::-webkit-scrollbar-track-piece { background-color: #FFF; border-left: 1px solid #FFF; } .scrolldiv::-webkit-scrollbar {
CSS画出三角形的做法
mingangel的博客
10-01 327
在网页中，会有三角形的出现，我们脑海里会有很多想法，如何去实现他们，我来提供一种比较好玩的做法。
CSS-Day3
m0_74039531的博客
09-29 325
伪类的语法：selector:pseudo-class {property:value;}CSS类也可以使用伪类：selector.class:pseudo-class {property:value;}您可以使用 :first-child 伪类来选择父元素的第一个子元素。p:first-child { color:blue; }在下面的例子中，选择相匹配的所有<p>元素的第一个 <i> 元素：p > i:first-child { color:blue; }在下面的例子中，选择器匹配所有作
CSS 盒子属性
最新发布
m0_74012211的博客
10-02 320
CSS 盒子属性
数据挖掘驱动的慕课在线学习行为深度综述
随着信息技术的飞速发展和互联网的普及，慕课(MOOCs)作为在线教育的新潮流，已经成为许多人首选的学习方式。这些在线学习平台不仅提供了丰富的课程资源，还积累了海量的学习行为数据。在这个背景下，数据挖掘技术的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值