HTML实战篇：纯css制作二级横向以及竖向菜单导航

本篇文章主要给大家介绍一下如何使用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与XHTML的区别

（1）在XHTML 中标签名称必须小写，在HTML 中标签名称既可以小写也可以大写；

（2）在XHTML 中标签必须封闭，在HTML中标签可以不成对出现；

（3）在XHTML 中标签必须严格嵌套，HTML对标签嵌套没有严格规定；

（4）在XHTML 中属性名称必须小写，在HTML 中也一样；

（5）在XHTML 中标签必须用双引号引起来，HTML中可以不用；

二、特殊符号

表示空格；
"表示双引号；
&表示&符号；
>表示大于号>；
<表示小于号<；
&copy©表示版权符号©；

三、列表的使用

（1）无序列表

无序列表是一个项目列表，使用项目符号标记无序列表的项目，无序列表也就是没有顺序的列表；
无序列表的type属性取值有三种，分别是circle（圆圈）、disc（实心圆点）、square（方块）；

# 打印实心圆点的无序列表

<body>
 <ul type="disc">
 <li>第一</li>
 <li>第二</li>
 <li>第三</li>
 </ul>
</body>

（2）有序列表

有序列表也是由一个个列表项组成，列表想既可以使用数字标记，也可以使用字母标记；
有序列表的type属性取值有5中，分别是1（数字）、i（小写罗马字母）、I（大写罗马字母）、a（小写字母）、A（大写字母）；

# 打印数字排序的有序列表

<body>
 <ol type="1">
 <li>我最爱椰奶</li>
 <li>第二爱可乐</li>
 <li>第三爱橙汁</li>
 </ol>
</body>

（3）定义列表

定义列表是当无序列表和有序列表都不适合时，通过自定义列表来完成自定义展示，所以定义列表不仅仅是一个项目列表，而是项目和注释的组合；

<body>
 <dl>
 <dt>春晓</dt>
 <dd>春眠不觉晓，处处闻啼鸟</dd>
 <dd>夜来风雨声，花落知多少</dd>
 </dl>
</body>

四、表格的使用

（1）表格的基本结构

单元格：表格的最小单位，一个或多个单元格纵横排列组成了表格；
行：一个或多个单元格横向堆叠形成了行；
列：一个或多个单元格纵向堆叠形成了列；

<table>
 <tr>
 <td>第一行第一列</td> 
 <td>第一行第二列</td> 
 <td>第一行第三列</td> 
 </tr>
 <tr>
 <td>第二行第一列</td> 
 <td>第二行第二列</td> 
 <td>第二行第三列</td> 
 </tr>
</table>

（2）表格的对齐方式

align属性：left表示水平居左、center表示水平居中、right表示水平居右；
valign属性：top表示垂直置顶、middle表示垂直居中、bottom表示垂直靠底；

（3）表格的其他属性

th：一种特殊的单元格，加粗并居中；
caption：表格标题；
cellspacing：规定单元格之间的空间；
cellpadding：规定单元边沿与其内容之间的空白；
colspan：表格跨列；
rowspan：表格跨行；

果图：

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML+CSS3横向导航栏</title>
<link rel="stylesheet" href="index.css" media="screen" type="text/css" />
</head>
<body>
<article class="tabs">
<input checked id="one" name="tabs" type="radio">
<label for="one">Tab One</label>
<input id="two" name="tabs" type="radio" value="Two">
<label for="two">Tab Two</label>
<input id="three" name="tabs" type="radio">
<label for="three">Tab Three</label>
<input id="four" name="tabs" type="radio">
<label for="four">Tab Four</label>
<div class="panels">
<div class="panel">
<h2>This is Panel One</h2>
<p>This is Panel One</p>
</div>
<div class="panel">
<h2>This is Panel Two</h2>
<p>this is panel two</p>
</div>
<div class="panel">
<h2>This is Panel Three</h2>
<p>this is panel three</p>
</div>
<div class="panel">
<h2>This is Panel four</h2>
<p>this is panel four</p>
</div>
</div>
</article>
</body>
</html>

index.css

在线咨询

上一篇：如何制作海景酒店预订小程序，民宿旅馆预订小程序全攻略
下一篇：HTML的基本语法以及如何使用HTML来创建网页

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML实战篇：纯css制作二级横向以及竖向菜单导航

1）制作页面所用知识点

2）纵向菜单导航

您的项目需求