在网页设计与制作（html5+csss3+js）课程中 横向和纵向菜单经常会运用到废话不多说，请看下方效果图：
横向效果图：
纵向效果图：
首先这种方法的运用为两部分，一部分是列表代码和文字内容，另外一部分是css样式。
横向菜单代码为：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>使用列表、超链接和CSS创建横向菜单 </title> <link rel="stylesheet" type="text/css" href="css/horizontical.css"/> </head> <body> <div id="menu"> <!--利用列表实现横向菜单效果--> <ul> <li><a href="https://www.zueb.edu.cn/">郑州经贸学院</a></li> <li><a href="https://www.shengda.edu.cn/">郑州升达经贸管理学院</a></li> <li><a href="https://www.zut.edu.cn/">中原工学院</a></li> <li><a href="http://www.zzu.edu.cn/">郑州大学</a></li> <li><a href="http://www.haue.edu.cn/">河南工程学院</a></li> <li><a href="https://www.hhstu.edu.cn/">黄河科技学院</a></li> </ul> </div> </body> </html>
纵向菜单代码为：
<!doctype html> <html> <head> <meta charset="utf-8"> <title> 使用列表、超链接和CSS创建纵向菜单菜单 </title> <link rel="stylesheet" type="text/css" href="css/vertical.css"/> </head> <body> <div id="menu"> <!--利用列表实现纵向菜单效果--> <ul> <li>大数据与人工智能学院</li> <li>计算机学院</li> <li>管理学院</li> <li>经济学院</li> <li>外国语学院</li> <li>传媒学院</li> </ul> </div> </body> </html>
最后效果由css实现，代码如下：
横向css样式：
body { font-size: 13px; font-family: "微软雅黑"; text-align: center; } #menu { width: 800px; margin: 10px auto; } #menu ul { padding: 0;/* 重置 ul 的内边距为 0*/ margin: 0;/* 重置 ul 的外边距为 0*/ background: #eee; list-style: none;/* 取消列表项前面的前导符号 */ height:36px; line-height:36px;/*必须设置行高，这样才能垂直居中*/ } #menu ul li { display: inline;/* 将块级元素的 li 修改为行内元素*/ padding: 0 12px; border-right: 1px dashed #ccc; } #menu ul li.last { border-right: 0;/* 取消菜单中最右边的边框线 */ } a:link {/* 使用伪类设置末访问状态样式 */ color: #000; text-decoration: none; } a:visited{/*使用伪类设置已访问状态样式,必须放在hover前面设置*/ color: #000; } a:hover {/* 使用伪类设置鼠标选停状态样式 */ color: #f00; }
纵向css样式：
body { font-size: 13px; font-family: "微软雅黑"; text-align: center; } #menu{ width: 120px; } #menu ul { margin: 0; /*ul 上、下外边距默认为 12px，重置 ul 的默认外边距样式 */ padding: 0 10px;/*ul 的左内边距默认为 40px，重置 ul 的默认内边距样式 */ list-style: none;/* 取消列表项的项目符号 */ background: #eee; } #menu ul li { padding: 12px 0;/* 设置列表项与边框的上、下内边距为 12px，左、右内边距为 0*/ border-bottom: 1px dotted #ccc;/* 设置列表项的下边框 */ } #menu ul li.last { border-bottom: 0; /* 将最后一个列表项的下边框取消 */ } a:link { /* 使用伪类设置未访问状态样式 */ color: #000; text-decoration: none; } a:visited{/*必须放在hover前面设置*/ color: #000; } a:hover { /* 使用伪类设置鼠标选停状态样式 */ color: #f00; }
以上就是横向菜单及纵向菜单运用方法，并运用到了css样式，要注意到的是此css样式用的是外链式方法！
