本篇文章主要给大家介绍一下如何使用html+css完成二级横向以及竖向菜单导航制作；菜单导航是网站建设中最常用的一块了，基本每个网站内都会有个导航菜单，用鼠标划过还可以有下拉子菜单。

由上图我们可以看出，该图包含一个横向导航条，然后鼠标经过横向导航条之后，子导航显示出来。

1)制作页面所用知识点

我们这里主要用到的知识点就是列表标签(ul、dl)的使用、浮动(float)的使用、绝对定位(absolute)及鼠标经过(hover)的效果。

1、列表标签ul、dl(我们使用ul、dl来创建同类型的导航元素内容，通过设置css样式来达到图片所示效果)；

2、浮动元素float(每个导航元素我们需要使用float:left;让其左对齐，这里涉及到了我们之前讲解的如何清除浮动的影响)；

3、绝对定位absolute(对于子导航我们要使用绝对定位来让其浮动在上级有定位元素的下方，不占据元素空间)

4、鼠标经过hover(使用css的鼠标经过元素(hover)效果，配合display的none(隐藏)和block(显示)来实现子菜单的显示与隐藏)

具体的实现html代码以及css代码就如下图所示：

2)纵向菜单导航

还有一个纵向菜单导航原理跟横向的类似，只需简单调整一下css代码即可。

html代码跟横向一样，这里就不再贴图，具体的实现图片效果以及css代码就如下图所示：

好了，本篇文章就给大家说到这里，大家自己动手写一下看能不能写出一样的页面效果出来，也可以找一些类似的页面自己练习一下，有需要源码的可以直接私信我即可。

每日金句：每天收获小进步，积累起来就是大进步；每天收获小幸福，积攒起来便成大幸福。喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。

html 隐藏_HTML实战篇：纯css制作二级横向以及竖向菜单导航相关推荐

web前端入门到实战：纯css制作电闪雷鸣的天气图标
效果效果图如下实现思路使用box-shadow属性写几个圆,将这些圆错落的组合在一起,形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构用两个嵌套的 ...
纯css制作三级下拉菜单
css本身的功能就挺强大的,尤其是css3出来之后,大部分特效只用css3就能完成了,无需再费心思去想js怎么怎么做jQuery怎么怎么做,代码简洁质量轻巧.下面是本人用纯css制作的三级下拉菜单效果 ...
CSS3实战开发: 纯CSS实现图片过滤分类显示特效
CSS3实战开发: 纯CSS实现图片过滤分类显示特效原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大 ...
如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
html正方形边框,HTML实战篇：html制作边框为1px的九宫格
原标题:HTML实战篇:html制作边框为1px的九宫格本篇文章主要给大家介绍一下如何使用html+css完成边框为1px的九宫格的制作:九宫格这个比较常用于购物网站的商品展示区域,商品图片一般存在 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
转圈加载html,web前端入门到实战：纯CSS实现加载转圈样式
web前端入门到实战:纯CSS实现加载转圈样式发布时间:2020-05-27 18:11:33 来源:51CTO 阅读:134 作者:前端向南不同的项目中对于等待加载时转圈圈的样式是不同的,有的是 ...

html 隐藏_HTML实战篇：纯css制作二级横向以及竖向菜单导航

1)制作页面所用知识点

2)纵向菜单导航

html 隐藏_HTML实战篇：纯css制作二级横向以及竖向菜单导航相关推荐

最新文章

热门文章