第8章利用CSS制作导航菜单
8.1 水平顶部导航栏
水平菜单导航栏是应用范围最广的网站导航设计，一般位于页面顶部。它适用性强，几乎适用于所有类型的网站，且设计难度低。若导航过于普通，无法承载复杂信息结构，在内容模块较多时，则需结合下拉子导航使用。
8.1.1 简单水平导航栏的设计与实现
8.1.1.1导航栏的创建
<nav>标签作为 HTML5 新增的文档结构标签，其作用在于标记导航栏，以方便后续与网站的其他内容进行整合，故而常常使用<nav>标签于页面上构建导航栏菜单区域。
例如，在<nav>的起始与结束标签之间，运用无序列表<ul>标签并结合列表选项<li>来创建菜单选项，其中选项内容采用超链接形式，其链接地址当前设定为空链接，用户可依据实际状况将其更改为具体的 URL 地址。
代码：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><center><h3>简单水平菜单导航栏</h3></center><hr><ul><li><a href="#">前端</a></li><li><a href="#">后端</a></li><li><a href="#">移动工具</a></li><li><a href="#">数据库</a></li><li><a href="#">操作系统</a></li><li><a href="#">服务器</a></li></ul></body>
</html>
8.1.1.2 列表样式的设计
此时会带有<ul>元素的默认样式，即每个列表选项前面有实心点标记，可以利用CSS在<head>标签中进行声明，对列表样式进行改变。
代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>水平导航栏</title><style type="text/css">ul {list-style-type: none;}li {float: left;}a {display: block;width: 80px;text-align: center;padding: center;}</style>
</head>
<body><center><h3>简单水平菜单导航栏</h3></center><hr><ul><li><a href="#">前端</a></li><li><a href="#">后端</a></li><li><a href="#">移动工具</a></li><li><a href="#">数据库</a></li><li><a href="#">操作系统</a></li><li><a href="#">服务器</a></li></ul>
</body>
</html>
8.1.1.3 超链接样式的设计
利用CSS为超链接重新设置样式，包括对a:link和a:visited这两个伪类的设置，以此来分别表示超链接未被访问和已被访问的状态，同时将其display属性设为block，这样就能把超链接变成块级元素，进而可以为超链接设置80像素的宽度，满足特定的页面布局需求。
代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水平导航栏</title><style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;overflow: auto; /* 清除浮动 */background-color: #f1f1f1; /* 导航栏背景色 */}li {float: left;}a {display: block;width: 100px; /* 宽度调整 */text-align: center;padding: 14px 16px; /* 上下和左右内边距 */text-decoration: none; /* 去除下划线 */color: #333; /* 文字颜色 */}a:hover {background-color: #ddd; /* 鼠标悬停时的背景色 */color: #000; /* 鼠标悬停时的文字颜色 */}/* 使用 Flexbox 居中对齐导航栏 */.container {display: flex;justify-content: center;align-items: center;}</style>
</head>
<body><center><h3>简单水平菜单导航栏</h3></center><hr><div class="container"><ul><li><a href="#">前端</a></li><li><a href="#">后端</a></li><li><a href="#">移动工具</a></li><li><a href="#">数据库</a></li><li><a href="#">操作系统</a></li><li><a href="#">服务器</a></li></ul></div>
</body>
</html>
8.1.1.4 鼠标事件
利用CSS为a:hover和a:active设置样式，可呈现出当鼠标悬停在超链接上以及超链接处于活动状态（如被点击时）的特殊样式变化，像改变颜色、添加下划线、增大字号等，这些样式变化能够吸引用户的注意力，从而使页面交互效果更丰富，提升用户体验。
代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>水平导航栏</title><style type="text/css">ul {list-style-type: none;}li {float: left;}a {display: block;width: 80px;text-align: center;padding: center;text-decoration: none;}a:link, a:visited {background-color: #ff0000;color: #ffffff;}a:hover, a:active {background-color: #ffffff;color: #ff0000;}</style>
</head>
<body><center><h3>简单水平菜单导航栏</h3></center><hr><ul><li><a href="#">前端</a></li><li><a href="#">后端</a></li><li><a href="#">移动工具</a></li><li><a href="#">数据库</a></li><li><a href="#">操作系统</a></li><li><a href="#">服务器</a></li></ul>
</body>
</html>
8.1.2 下拉子菜单导航栏的设计与实现
下拉子菜单导航是常见的网站子导航设计，它适用于内容复杂、具有多个层级结构的网站，这种设计方式能够使网站的整体布局更加清晰明了、有条理。而且，当前备受青睐的汉堡包导航也是借鉴了这种隐藏式设计思路，这种设计在提升用户体验方面有着独特的优势。
8.1.2.1导航栏的创建
依旧在<nav>标签的首尾之间，通过<div>标签划定菜单范围，然后综合运用无序列表<ul>和有序列表<ol>标签，并与列表选项<li>相配合来创建菜单选项，这里的选项内容以超链接形式呈现，不过当前链接地址设置为空链接。
代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>下拉子导航栏的制作</title>
</head>
<body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav>
</body>
</html>
8.1.2.2 列表样式的设计
此时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用 CSS 在<head>标签中进行声明，对列表样式进行改变。
同样，使用 list-style-type 属性去掉默认标记，设置margin和 padding属性为 0，为<li>列表选项定义浮动效果，设置text-decoration属性none。这里使用通配符“*”整体设置。
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">ul,ol {list-style-type: none;padding: 0;margin: 0;text-decoration: none;}ul li {float: left;}ul li ol li {float: none;}</style></head><body><center><h3>下拉子菜单导航栏</h3></center><hr /><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav></body>
</html>
8.1.2.3 二级菜单的隐藏和显示设计
为了隐藏有序列表的二级菜单，需将其display属性设为none。而当鼠标悬停在一级菜单时，要使二级菜单显示，则应把有序列表的display属性改为block。此外，为了让二级菜单在其从属的一级菜单正下方显示，要对二级菜单设置绝对定位，同时对一级菜单设置相对定位。
代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">ul,ol {list-style-type: none;padding: 0;margin: 0;text-decoration: none;}ul li {float: left;}ul li ol li {float: none;}ul li ol {display: none;}ul li:hover ol {display: block;}</style>
</head>
<body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav>
</body>
</html>
8.1.2.4 DIV样式的设计
完成以上关键步骤后，对内容所处的div样式进行设置，包括宽度、高度、边框和对齐方式。
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">#nav{width: 600px;Height: 40px;background-color: #f00;border: 5px solid blue;margin: 0 auto;}ul,ol{list-style-type: none;padding: 0;margin: 0;}ul li{float: left;}ul li ol li{float: none;}ul li ol{display: none;}ul li:hover ol{display: block;}</style></head><body><center><h3>下拉子菜单导航栏</h3></center><hr><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav></body>
</html>
8.1.2.5 超链接样式的设计
利用CSS重新设置列表超链接样式，可设置a:link和a:visited来分别定义超链接未被访问与已被访问的状态。之后把超链接的display属性设为block，让超链接变为块级元素，如此一来，就能为超链接设置80像素的宽度，从而满足特定的页面设计需求，增强页面的视觉效果和交互性。
代码如下:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">ul,ol {list-style-type: none;padding: 0;margin: 0;text-decoration: none;}ul li {float: left;}ul li ol li {float: none;}ul li ol {display: none;}ul li:hover ol {display: block;}ul li a {background-color: #ff0000;color: #ffffff;}ul li ol li a {background-color: #dddddd;color: #ff0000;}a {text-decoration: none;text-align: center;width: 80px;padding: 10px;display: block;}</style>
</head>
<body><center><h3>下拉子菜单导航栏</h3></center><hr /><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav>
</body>
</html>
8.1.2.6 鼠标事件
利用CSS为无序列表选项li:hover和有序列表中的a:hover设置样式，可呈现出鼠标悬停在无序列表选项或有序列表超链接上时的独特视觉变化，以此增强页面交互性和视觉吸引力。
代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css">ul,ol {list-style-type: none;padding: 0;margin: 0;}ul li {float: left;}ul li ol li {float: none;}ul li ol {display: none;}ul li:hover ol {display: block;}a {text-decoration: none;text-align: center;width: 80px;padding: 10px;display: block;}ul li a {background-color: #f00;color: #aea;}ul li ol li a {background-color: #acacac;color: #afa;}ul li a:hover,ul li a:active {border-bottom: #22aaff solid 5px;font-weight: 900;}ul li ol li a:hover,ul li ol li a:active {background-color: #ee1188;color: #11ee99;border-bottom: none;}</style>
</head>
<body><center><h3>下拉子菜单导航栏</h3></center><hr /><nav><div id="nav"><ul><li><a href="#">前端</a><ol><li><a href="#">HTML5</a></li><li><a href="#">CSS</a></li><li><a href="#">Javascript</a></li></ol></li><li><a href="#">后台</a><ol><li><a href="#">Java</a></li><li><a href="#">PHP</a></li><li><a href="#">Python</a></li></ol></li><li><a href="#">移动应用</a><ol><li><a href="#">Android</a></li><li><a href="#">IOS</a></li></ol></li><li><a href="#">数据库</a><ol><li><a href="#">MySql</a></li><li><a href="#">SqlServer</a></li></ol></li><li><a href="#">操作系统</a><ol><li><a href="#">Linux</a></li><li><a href="#">Unix</a></li><li><a href="#">Windows</a></li></ol></li><li><a href="#">服务器</a><ol><li><a href="#">Tomcat</a></li><li><a href="#">WebSphere</a></li><li><a href="#">WebLogicc</a></li></ol></li></ul></div></nav>
</body>
</html>
8.2 纵向侧边导航栏
侧边菜单导航栏在网站设计里应用频率颇高，仅次于水平导航栏，常置于首页左上角，多以文字链接作导航项，能容纳诸多链接。
不过，要是导航菜单过长，会加大用户浏览难度，所以侧边导航栏一般会与出式子导航相结合来使用，商城网站建设就大多采用这种复合式的导航设计方式，以便为用户提供更便捷的浏览体验。
8.2.1 简单纵向导航栏的设计与实现
8.2.1.1导航栏的创建
普通纵向导航可借助超链接与列表元素达成，仅需将文字链接设定为块级元素即可。与水平导航栏有所不同的是，纵向导航栏无需对列表选项<li>设置浮动属性。
具体而言，是在<nav>的起始与结束标签之间，利用<div>标签来创建菜单的范围，并且通过结合无序列表<ul>标签以及列表选项<li>标签来构建菜单选项。此处的超链接地址暂且设定为空链接，之后用户能够依据实际状况把它更改为具体的URL地址。
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>无标题文档</title></head><body><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家具用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫用具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></body>
</html>
8.2.1.2 DIV样式的设计
对导航栏所在的 div 样式加以设置，具体涵盖宽度属性的调整，明确其边框的样式（如边框粗细、类型、颜色等）以及背景相关设置（包括背景颜色、背景图像等）。
与此同时，针对大标题文字的 CSS 样式也要进行设定，这包括规定高度值，设置合适的行高，确定文字颜色（可依据设计风格选择不同色彩）以及文字的对齐方式（如居中对齐、左对齐等），以此来达到理想的视觉呈现效果，提升导航栏和标题的美观度与可读性。
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#nav {background-color: #ddffaa;width: 150px;padding: 10px;}h3 {text-align: center;}</style></head><body><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家具用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫用具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></body>
</html>
8.2.1.3 列表样式的设计
在这种情况下，由于列表选项带有<ul>元素的默认实心圆点样式，所以需要通过设置 list-style-type 属性来将其去掉，从而使列表呈现出更为简洁的外观。例如，可以将 list-style-type 属性设置为 "none"，这样就能消除掉默认的实心圆点标记。
同时，为了进一步优化列表选项的布局和视觉效果，还需要对 margin 和 padding 的属性值进行合理设置。通过调整 margin 属性，可以控制列表选项与周围元素之间的间距，使其在页面中的位置更加合理；而设置 padding 属性，则能够改变列表选项内部内容与边框之间的距离，让内容展示得更加清晰、美观。
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#nav {background-color: #00cc33;width: 150px;padding: 10px;}h3 {text-align: center;color: #eeeeee;}ul {list-style-type: none;margin: 0;padding: 0;}a {display: block;width: 150px;Line-height: 40px;background-color: #eeeeee;color: #00cc33;text-decoration: none;text-align: center;}</style></head><body><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家具用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫用具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></body>
</html>
8.2.1.4 超链接样式的设计
利用CSS为超链接重新设置样式，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a:hover和a:active进行样式设置，表示标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体 CSS样式的设置。
代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">#nav {background-color: #00cc33;width: 150px;padding: 10px;}h3 {text-align: center;color: #eeeeee;}ul {list-style-type: none;margin: 0;padding: 0;}a {display: block;width: 150px;Line-height: 40px;background-color: #eeeeee;color: #00cc33;text-decoration: none;text-align: center;}a:link,a:visited {background-color: #eeeeee;color: #00cc33;}a:hover,a:active {background-color: #00cc33;color: #eeeeee;}</style>
</head>
<body><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家具用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫用具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div>
</body>
</html>
以图片为背景：
代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">#nav {background-color: #00cc33;width: 150px;padding: 10px;}h3 {text-align: center;color: #eeeeee;}ul {list-style-type: none;margin: 0;padding: 0;}a {display: block;width: 150px;line-height: 30px;background-color: #eeeeee;color: #00cc33;text-decoration: none;text-align: center;}a:link,a:visited {background-color: #eeeeee;color: #00cc33;}a:hover,a:active {background: url("img/bg.JPG") no-repeat;}</style></head><body><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家具用品</a></li><li><a href="#">手机数码</a></li><li><a href="#">家用电器</a></li><li><a href="#">厨卫用具</a></li><li><a href="#">汽车用品</a></li><li><a href="#">运动器材</a></li></ul></div></body>
</html>
8.2.2 出式子菜单导航栏的设计与实现
出式子菜单导航和下拉子菜单导航均为网站设计中常见的子导航设计类型。不过，出式子菜单导航有其独特之处，它更多地应用于侧边纵向导航栏。对于那些具有多个层级、内容繁杂的网站而言，这种子菜单非常适用，它能够使网站的整体设计更具条理性，更加整洁有序，为用户浏览信息提供便利。
8.2.2.1 导航栏的创建
在<nav>标签的起始和结束标签之间，利用<div>标签来划定菜单的范围。之后，将无序列表<ul>标签和有序列表<ol>标签相结合，并与列表选项<li>配合使用，以此创建菜单选项。这里的菜单选项内容采用超链接形式，不过当前其链接地址被设置为空链接，后续可根据实际情况修改为具体的 URL。
代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>出式子导航栏的制作</title><style type="text/css"></style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav></body>
</html>
8.2.2.2 DIV样式的设计
代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>导航栏制作</title><style type="text/css">#nav {background-color: #00cc33;width: 150px;padding: 10px;}h3 {text-align: center;color: #eeeeee;}ol, ul {list-style-type: none;margin: 0;padding: 0;}</style>
</head>
<body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right"/></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav>
</body>
</html>
8.2.2.3 二级菜单的隐藏和显示设计
为隐藏有序列表二级菜单，设其display为none。鼠标悬停一级菜单时要显示二级菜单，则设有序列表display为block。要让二级菜单在一级菜单正右方显示，需设二级菜单绝对定位、一级菜单相对定位。
代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>菜单导航栏的制作</title><style type="text/css">#nav {background-color: #00cc33;width: 150px;padding: 10px;}h3 {text-align: center;color: #eeeeee;}ol,ul {list-style-type: none;margin: 0;padding: 0;}ul li {position: relative;}ul li ol {display: none;position: absolute;Top: -1px;left: 150px;}ul li:hover ol {display: block;}</style></head><body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav></body>
</html>
8.2.2.4 列表样式的设计
在此情形下，由于列表选项存在<ul>元素的实心圆点样式以及<ol>元素的阿拉伯序号这些默认标记，所以要利用list-style-type属性将它们去除，比如把list-style-type设为“none”。
同时，合理设置margin和padding的属性值，以此来调整列表选项与周边元素的间距以及其内部内容的布局空间。 另外，给列表选项添加上合适的背景颜色，通过色彩对比，能够让大小标题更易于区分开来，提升页面的层次感与可读性。
代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>出式子导航栏的制作</title><style type="text/css">#nav {background-color: #00cc33;width: 150px;padding: 10px;}h3 {text-align: center;color: #eeeeee;}ol,ul {list-style-type: none;margin: 0;padding: 0;}ul li {position: relative;}ul li ol {display: none;position: absolute;Top: -1px;left: 150px;}ul li:hover ol {display: block;}a {text-decoration: none;text-align: center;display: block;width: 150px;Line-height: 30px;}</style>
</head>
<body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav>
</body>
</html>
8.2.2.5 超链接样式的设计
利用CSS为超链接重新设置样式，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a:hover和a:active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置。
代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>商品分类导航栏的制作</title><style type="text/css">#nav {background-color: #00cc33;width: 150px;padding: 10px;}h3 {text-align: center;color: #ffffff;}ol,ul {list-style-type: none;margin: 0;padding: 0;}ul li {position: relative;}ul li ol {display: none;position: absolute;Top: -1px;left: 150px;}ul li:hover ol {display: block;}a {text-decoration: none;text-align: center;display: block;width: 150px;Line-height: 30px;background-color: #ffffff;color: #00cc33;}ul li a:hover,ul li a:active {background: url("img/bg2.JPG");}ul li ol li a:hover,ul li ol li a:active {background-color: #00cc33;color: #ffffff;background-image: none;}</style>
</head>
<body><nav><div id="nav"><h3 class="tit">所有商品分类</h3><ul><li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">收纳箱</a></li><li><a href="#">雨伞雨具</a></li><li><a href="#">家务清洁</a></li><li><a href="#">茶具</a></li><li><a href="#">环保袋</a></li></ol></li><li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">电脑主机</a></li><li><a href="#">鼠标键盘</a></li><li><a href="#">无人机</a></li><li><a href="#">数码相机</a></li></ol></li><li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">吸尘器</a></li><li><a href="#">电饭煲</a></li><li><a href="#">冰箱</a></li></ol></li><li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">消毒柜</a></li><li><a href="#">抽油烟机</a></li><li><a href="#">碗柜</a></li><li><a href="#">花洒笼头</a></li><li><a href="#">洗手台</a></li></ol></li><li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">打蜡服务</a></li><li><a href="#">超级试驾</a></li><li><a href="#">导航仪</a></li><li><a href="#">机油</a></li></ol></li><li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a><ol><li><a href="#">跑鞋</a></li><li><a href="#">帐篷</a></li><li><a href="#">山地车</a></li></ol></li></ul></div></nav>
</body>
</html>
8.3 底部固定导
航栏
底部导航，顾名思义是放在页脚部位，是网站设计中一种辅助导航。底部导航应用性不是很广，比较常出现在一些活动或个性化的网站当中。并且，底部导航被广泛使用的并不是在PC端中，而是在移动端。如果在PC端中采用底部导航的形式，一般都是采用固定的方式。
底部导航可以减少用户的使用成本，但对于结构复杂有二级或三级导航的网站，就不是很合适。而且，用户浏览的习惯都是从上到下、从左往右的，将导航放置底部，这样的设计比较挑战用户的使用习惯。所以，很多网站在设计的时候首页导航会放在底部，其后的导航就会固定到顶部。
8.3.1 导航栏的创建
在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<u>配合列表选项<li>创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接。
代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav>
</body>
</html>
8.3.2 列表样式的设计
在这种情况下，由于存在<ul>元素默认的实心点标记，确实可借助list-style-type属性将其去除，使外观更为简洁。 与此同时，合理设置margin和padding属性值，能够有效调整列表选项与周边元素的间距以及其自身内部的空间布局。 另外，通过为列表选项设置float属性，可促使列表元素实现水平排列，从而在同一行进行显示，进一步优化页面的布局效果，使其更加规整、美观且便于浏览。
代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;}li {float: left;}</style>
</head>
<body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav>
</body>
</html>
8.3.3 菜单固定底部的设计
为了美化文字内容的外观，可以设置div的高度、宽度、背景、边框和文本对齐方式等。为了使导航菜单始终处于页面的最上层，需要设置z-index属性的优先值。为了使导航菜单固定于页面底部，需要设置位置属性position 和各个方向的位置值。
代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;}li {float: left;}a {width: 80px;display: block;padding: 10px;text-decoration: none;text-align: center;}a:link, a:visited {background-color: #0000ff;color: #ffff00;}a:hover, a:active {background-color: #ffff00;color: #0000ff;}.fix-footer {position: fixed;bottom: 0;}</style>
</head>
<body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav>
</body>
</html>
8.3.4 超链接样式的设计
利用CSS为超链接重新设置样式，对超链接的a:link和a:visited 进行设置，表示超链接未被访问和已访问状态。然后将其dispay属性设置为block，使得超链接成为块级元素
代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;}li {float: left;}a {width: 80px;display: block;padding: 10px;text-decoration: none;text-align: center;}a:link,a:visited {background-color: #0000ff;color: #ffff00;}</style>
</head>
<body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav>
</body>
</html>
8.3.5 鼠标事件
利用CSS为a:hover 和a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。
代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;}li {float: left;}a {width: 80px;display: block;padding: 10px;text-decoration: none;text-align: center;}a:link,a:visited {background-color: #0000ff;color: #ffff00;}a:hover,a:active {background-color: #ffff00;color: #0000ff;}</style>
</head>
<body><nav><div class="fix-footer"><ul><li><a href="#">首页</a></li><li><a href="#">前端</a></li><li><a href="#">后台</a></li><li><a href="#">移动应用</a></li></ul></div></nav>
</body>
</html>8.4 综合案例——优名养生馆
8.4.1 封面页的设计与实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>优名养生馆</title><style type="text/css">body{background-image: url("img/bg.jpg");}ul{margin: 0;padding: 0;list-style-type: none;}li{img: 25%;float: left;linimgt: 50px;}img{margiimg70px;margin-right: 40px;}.footer{height: 50px;width: 100%;background-image: url("img/footer-bg.jpg");border: 3px solid gray;text-align: center;z-index: 9998;position: fixed;bottom: 0;left: 0;}.footer-top{width: 90px;height: 90px;text-align: center;line-height: 90px;z-index: 9999;position: fixed;bottom: 0;left: 45%;}.footer-top a{border-radius: 90px;}.footer-top a:link,a:visited{display: block;font-size: 20px;color: brown;text-decoration: none;font-weight: bold;border-top: 3px solid gray;background-image: url("img/marquee1.jpg");}.footer-top a:hover{background-image: url("img/marquee2.jpg");color: white;}.footer a:link,a:visited{display: block;font-size: 20px;color: brown;text-decoration: none;font-weight: bold;}.footer a:hover{background-color: darkgray;border-left: 2px solid white;border-right: 2px solid white;font-size: 16px;color: red;}</style></head><body><div><marquee direction="right" scrollamount="20"><img src="img/marquee1.jpg"/><img src="img/marquee2.jpg"/><img src="img/marquee3.jpg"/></marquee></div><nav><div class="footer-top"><a href="index.html">进入官网</a></div><div class="footer"><ul><li><a href="#">奇幻世界</a></li><li><a href="#">主题风采</a></li><li><a href="#">加盟相关</a></li><li><a href="#">友情推荐</a></li></ul></div></nav></body>
</html>
8.4.2 主页的设计与实现
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>优名养生馆</title><style>body{background-image: url("img/bg.jpg");background-repeat: no-repeat;background-size: 100%;}.all{margin: 0px auto;width: 1300px;/* height: 1000px; */}.top{width: 1300px;height: 300px;background-image: url("img/top-bg01.jpg");background-repeat: no-repeat;background-size: 100%;}.cent{width: 300px;margin-left: auto;margin-right: auto;font-size: 58px;font-family: "楷体";color: lemonchiffon;font-style: italic;}.nav{width: 400px;float: left;margin-top: 30px;font-size: 40px;font-weight: bold;color: saddlebrown;}.main{width: 800px;height: 300px;float: left;margin-top: 10px;/* font-size: 50px; */}.footer{font-size: 16px;font-weight: bold;color: brown;text-align: center;clear: both;background-image: url("img/footer-bg0.jpg");}p{color: brown;font-size: 20px;}img{margin: 15px;}ul{list-style-type: none;}li{height: 40px;font-size: 20px;}a:link{font-size: 30px;text-decoration: none;color: brown;}a:hover{background-color: burlywood;color: white;}</style></head><body><div class="all"><div class="top"><br /><div class="cent">优名养生馆</div></div><nav><div class="nav"><table><tr>养生之道</tr><tr><ul><li>运动养生</li><li>四季养生</li><li>健康检测</li></ul></tr><tr>中医养生</tr><tr><ul><li>经络养生</li><li>体质养生</li><li>特色疗法</li></ul></tr></table></div></nav><div class="main"><img src="img/main01.jpg" align="left" width="350px"/><p>  古人云:善养生者,上养神智、中养形态、下养筋骨。</p ><p>  养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以期达到保养、调养、颐养生命,实现人类健康、长寿的目的。</p ><p>  养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生,注重身体机能的维护和康复:也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老:心理层面的养生包括养心、养性、养神。</p ></div><hr /><div class="footer">版权所有©优名养生馆</div></div></body>
</html>
相关文章：
第8章利用CSS制作导航菜单
8.1 水平顶部导航栏 水平菜单导航栏是应用范围最广的网站导航设计，一般位于页面顶部。它适用性强，几乎适用于所有类型的网站，且设计难度低。若导航过于普通，无法承载复杂信息结构，在内容模块较多时，则需结…...
UNIX网络编程-TCP套接字编程
概述 TCP客户端/服务器程序示例是执行如下步骤的一个回射服务器： 客户端从标准输入读入一行文本，并写给服务器。服务器从网络输入读入这行文本，并回射给客户端。客户端从网络输入读入这行回射文本，并显示在标准输出上。 TCP服务器…...
美团代付微信小程序 read.php 任意文件读取漏洞复现
0x01 产品描述： 美团代付微信小程序是美团点评旗下的一款基于微信小程序技术开发的应用程序功能，它允许用户方便快捷地请求他人为自己支付订单费用。通过微信小程序，用户可以轻松实现代付操作，无需跳转到其他应用或网页…...
centos7 node升级到node18
使用jenkins发布vue3项目提示node18安装失败 错误日志： /var/lib/jenkins/tools/jenkins.plugins.nodejs.tools.NodeJSInstallation/Node18/bin/node: /lib64/libm.so.6: version GLIBC_2.27 not found (required by /var/lib/jenkins/tools/jenkins.plugins.node…...
使用Matlab建立随机森林
综述 除了神经网络模型以外，树模型及基于树的集成学习模型是较为常用的效果较好的预测模型。我们以下构建一个随机森林模型。 随机森林是一种集成学习方法，通过构建多个决策树并结合其预测结果来提高模型的准确性和稳定性。在MATLAB中，可以…...
【江苏-无锡】《无锡市市级政务信息化建设及运行维护项目支出预算标准（试行）》 -省市费用标准解读系列10
2023年3月28日，无锡市政府投资评审中心出台《无锡市市级政务信息化建设及运行维护项目支出预算标准（试行）》，此标准是为进一步提高财政评审效率，规范评审行为，保证评审质量，节约政府投资&#x…...
2024-11-12 问AI: [AI面试题] 您将如何设计一个人工智能系统来预测电信公司的客户流失？
文心一言 设计一个人工智能系统来预测电信公司的客户流失，是一个复杂但至关重要的任务，它涉及到多个步骤和关键要素。以下是一个详细的设计方案： 一、明确需求和目标 在设计智能系统之前，需要明确系统的需求和目标，…...
【数字静态时序分析】复杂时钟树的时序约束SDC写法
以上图为例，SoC芯片上往往存在几种不同的时钟源，有pll时钟、环振时钟、外部的晶振时钟，在SoC不同的模块或者不同的运行阶段使用的时钟也往往不同，所以在使用的时候，相同的模块会出现选择不同的时钟源的情况。上图的情形…...
springboot苍穹外卖实战：五、公共字段自动填充(aop切面实现)+新增菜品功能+oss
公共字段自动填充 不足 比起瑞吉外卖中的用自定义元数据类型mybatisplus的实现，这里使用的是aop切面实现，会麻烦许多，建议升级为mp。 定义好数据库操作类型 sky-common中已经定义好，OperationType。 自定义注解 AutoFill co…...
Go 语言中，golang结合 PostgreSQL 、MySQL驱动 开启数据库事务
Go 语言中，golang结合 PostgreSQL 、MySQL驱动 开启数据库事务 PostgreSQL代码说明： MySQL代码说明： PostgreSQL 在 Go 语言中，使用 database/sql 包结合 PostgreSQL 驱动（如 github.com/lib/pq）可以方便地…...
Git核心概念
目录 版本控制 什么是版本控制 为什么要版本控制 本地版本控制系统 集中化的版本控制系统 分布式版本控制系统 认识Git Git简史 Git与其他版本管理系统的主要区别 Git的三种状态 Git使用快速入门 获取Git仓库 记录每次更新到仓库 一个好的 Git 提交消息如下&#…...
网络安全技术在能源领域的应用
摘要 随着信息技术的飞速发展，能源领域逐渐实现了数字化、网络化和智能化。然而，这也使得能源系统面临着前所未有的网络安全威胁。本文从技术的角度出发，探讨了网络安全技术在能源领域的应用，分析了能源现状面临的网络安全威胁&a…...
这些场景不适合用Selenium自动化！看看你踩过哪些坑？
Selenium是自动化测试中的一大主力工具，其强大的网页UI自动化能力，让测试人员可以轻松模拟用户操作并验证系统行为。然而，Selenium并非万能，尤其是在某些特定场景下，可能并不适合用来自动化测试。本文将介绍Selenium不…...
PHP反序列化靶场（php-SER-libs-main 第一部分）
此次靶场为utools-php-unserialize-main。适合有一定基础的师傅，内容是比较全面的，含有我们的大部分ctf中PHP反序列化的题型。 level1： <?php highlight_file(__FILE__); class a{var $act;function action(){eval($this->act);} } …...
基于大数据爬虫+Python+SpringBoot+Hive的网络电视剧收视率分析与可视化平台系统(源码+论文+PPT+部署文档教程等)
博主介绍：CSDN毕设辅导第一人、全网粉丝50W,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围…...
DHCP与FTP
DHCP dhcp：动态主机配置的协议，应用在大型的局域网环境中 服务端和客户端 服务端：提供IP地址，某种特定功能的提供者 客户端：请求IP地址，请求对应的功能的使用者 服务端的端口号：67 客户端的端…...
云渲染与云电脑，应用场景与技术特点全对比
很多朋友问，你们家一会宣传云渲染，一会宣传云电脑的，我到底用哪个？今天，渲染101云渲染和川翔云电脑就来对比下两者的区别！ 渲染101&川翔云电脑，都是我们的产品，邀请码6666 一、…...
RockPI 4A单板Linux 4.4内核下的RK3399 GPIO功能解析
RockPI 4A单板Linux 4.4内核下的RK3399 GPIO功能解析 摘要：本文将基于RockPI 4A单板，介绍Linux 4.4内核下RK3399 GPIO（通用输入输出）功能的使用方法。通过详细的代码解析和示例，帮助读者理解如何在Linux内核中使用GPI…...
【Vue】Vue3.0（二十三）Vue3.0中$attrs 的概念和使用场景
文章目录 一、$attrs的概念和使用场景概念使用场景 二、代码解释Father.vueChild.vueGrandChild.vue 三、另一个$attrs使用的例子 一、$attrs的概念和使用场景 概念 在Vue 3.0中，$attrs是一个组件实例属性，它包含了父组件传递给子组件的所有非props属性…...
RHEL/CENTOS 7 ORACLE 19C-RAC安装（纯命令版）
一 首先需要安装两个CENTOS 7虚拟机(此处省略)。 由于我们是要安装ORCLE-RAC双节点集群所以至少每个CENTOS虚拟机上需要两块网卡，并且两块网卡都是HOST-ONLY具体步骤请看视频一《为虚拟机添加网卡》 这里大家需要注意的是，我们需要绑定两台机器的IP一共…...
【kafka】Golang实现分布式Masscan任务调度系统
要求： 输出两个程序，一个命令行程序（命令行参数用flag）和一个服务端程序。 命令行程序支持通过命令行参数配置下发IP或IP段、端口、扫描带宽，然后将消息推送到kafka里面。 服务端程序： 从kafka消费者接收…...
《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》
引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...
前端倒计时误差!
提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...
Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级
在互联网的快速发展中，高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司，近期做出了一个重大技术决策：弃用长期使用的 Nginx，转而采用其内部开发…...
EtherNet/IP转DeviceNet协议网关详解
一，设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。 在自动…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中，从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备（如专用硬件设备），从而消除了直接物理连接的需要。USB over IP的…...
Netty从入门到进阶（二）
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架，用于…...