第8章 利用CSS制作导航菜单
8.1 水平顶部导航栏
水平莱单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平
导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。
如果导航过于普通，无法容纳复杂的信息结构，就需要在内容模块较多的情况下，结合
下拉子导航使用。
8.1.1 简单水平导航栏的设计与实现
8.1.1.1 导航栏的创建：
使用HTML的<nav>标签和<ul>/<li>列表结构来创建基本的导航栏。
示例：
<!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 列表样式的设计：
通过CSS去除列表的默认样式（如点号和缩进），并设置列表项的布局方式（如浮动或Flexbox）。
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><style type="text/css">ul{list-style-type: none;}li{float: left;}</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 超链接样式的设计：
设计导航链接的样式，包括颜色、字体、悬停效果等。
示例：
<!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;text-decoration: none;}</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.4 鼠标事件：
添加鼠标悬停和点击事件，以改变链接的外观或执行其他动作。
示例：
<!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;padding: 10px;text-align: center;text-decoration: none;}a:link,a:visited{background-color: #ff0000;color: #ffffff;}a:hover,a:active{background-color: #ff00ff;color: #ffffff;}</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>、<ul>/<li>结构，但为某些列表项添加嵌套的<ul>以创建下拉子菜单。
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>下拉子导航栏的制作</title><style type="text/css"></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.2 列表样式的设计：
除了基本样式外，还需设计子菜单的隐藏和显示方式。
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul,ol{list-style-type: none;margin: 0;padding: 0;}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 二级菜单的隐藏和显示设计：
使用CSS的display: none和display: block来控制子菜单的显示和隐藏，以及通过JavaScript或CSS的:hover伪类来实现动态效果。
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul,ol{list-style-type: none;margin: 0;padding: 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.4 DIV样式的设计：
可能需要额外的<div>来包裹导航栏或子菜单，以便进行更精细的布局和样式控制。
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">ul,ol{list-style-type: none;margin: 0;padding: 0;}ul li{float: left;}ul li ol li{float: none;}ul li ol{display: none;}ul li:hover ol{display: block;}a{display: block;width: 80px;padding: 10px;text-align: center;text-decoration: 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.5 超链接样式的设计：
设计子菜单链接的样式，确保与主菜单链接风格一致或有所区分。
示例：
ul li a{background-color:#ff0000 ;color: #dddddd;}ul li ol li a{background-color: #dddddd;color: #ff0000;}浏览效果如图：
8.1.2.6 鼠标事件：
为下拉子菜单添加鼠标悬停和点击事件，确保用户交互的流畅性。
示例：
ul li a:hover,ul li a:active{border-bottom: #22aaff solid 5px;}ul li ol li a:hover,ul li ol li a:active{background-color: #ff0000;color: #dddddd;border-bottom: none;}浏览效果如图：
8.2 纵向侧边导航栏
8.2.1 简单纵向导航栏的设计与实现
8.2.1.1 导航栏的创建：
使用<nav>和垂直排列的<ul>/<li>结构。
示例：
<!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>家具用品</a></li><li><a>手机数码</a></li><li><a>家用电器</a></li><li><a>厨卫工具</a></li><li><a>汽车用品</a></li><li><a>运动器材</a></li></ul></div></nav></body>
</html>浏览效果如图：
8.2.1.2 DIV样式的设计：
可能使用<div>来包裹导航栏，以便进行布局和样式调整。
示例：
<style type="text/css">#nav{width: 150px;background-color: #aaccff;}h3{text-align: center;line-height: 50px;}</style>浏览效果如图：
8.2.1.3 列表样式的设计：
设置列表项为垂直排列，并去除默认样式。
示例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>纵向侧边导航栏</title><style type="text/css">#nav{width: 150px;background-color: #aaccff;}h3{text-align: center;line-height: 50px;}ul{margin: 0;padding: 0;list-style-type: none;}ul li{line-height: 40px;border: #aaffff solid 2px;text-align: center;}</style></head><body><nav><div id="nav"><h3 class="tit">所以商品分类</h3><ul><li><a>家具用品</a></li><li><a>手机数码</a></li><li><a>家用电器</a></li><li><a>厨卫工具</a></li><li><a>汽车用品</a></li><li><a>运动器材</a></li></ul></div></nav></body>
</html>浏览效果如图：
8.2.1.4 超链接样式的设计：
设计纵向导航链接的样式。
示例：
a{display: block;line-height: 40px;border: #aaffff solid 2px;text-align: center;text-decoration: none;}a:hover,a:active{background-color: #ff0000;color: #dddddd;}浏览效果如图：
8.2.2 出式子菜单导航栏的设计与实现
8.2.2.1 导航栏的创建：
与简单纵向导航栏类似，但包含嵌套的<ul>以创建出式子菜单。
示例：
<!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样式的设计：
用于包裹导航栏和子菜单，以便进行布局和样式控制。
示例：
<style type="text/css">#nav{width: 150px;background-color: #ff0000;padding: 10px;}h3{text-align: center;color: #dddddd;}</style>浏览效果如图：
8.2.2.3 二级菜单的隐藏和显示设计：
使用CSS或JavaScript控制子菜单的显示和隐藏。
示例：
ul li{height: 30px;line-height: 30px;text-align: center;position: relative;}ul li ol{display: none;position: absolute;left: 150px;width: 120px;background-color: #eeeeee;color: #00cc33;}ul li:hover ol{display: block;}浏览效果如图：
8.2.2.4 列表样式的设计：
为子菜单列表项设计样式，确保与主菜单一致或有所区分。
示例：
ul li{height: 30px;line-height: 30px;text-align: center;position: relative;}ul li ol {display: none;position: absolute;top: -1px;left: 150px;width: 120px;background-color: #eeeeee;color: #00cc33;text-decoration: none;浏览效果如图：
8.2.2.5 超链接样式的设计：
设计子菜单链接的样式。
示例：
ul li{height: 30px;line-height: 30px;text-align: center;position: relative;}ul li ol {display: none;position: absolute;top: -1px;left: 150px;width: 120px;background-color: #eeeeee;color: #00cc33;text-decoration: none;}ul li:hover ol{display: block;}ul li a{width: 150px;background-color: #eeeeee;color: #00cc33;}ul li a:hover,ul li a:active{background:url(img/bg2.JPG);}ul li ol a:hover,ul li ol a:active{background:#00cc33;color: #eeeeee;浏览效果如图：
8.3 底部固定导航栏
8.3.1 导航栏的创建：
使用<nav>标签和<ul>/<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 列表样式的设计：
设置列表项的布局和样式。
示例：
<!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 菜单固定底部的设计：
使用CSS的position: fixed; bottom: 0;等属性将导航栏固定在页面底部。
示例：
<!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{display: block;width: 80px;padding: 10px;text-decoration: none;text-align: center;}a:link,a:visited{background-color:#000000 ;color: #ffffff;}a:hover,a:active{background-color: #ffffff;color: #000000;}.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 超链接样式的设计：
设计底部导航链接的样式。
a{display: block;width: 80px;padding: 10px;text-decoration: none;text-align: center;}浏览效果如图：
8.3.5 鼠标事件：
添加鼠标悬停和点击事件。
示例：
a:link,a:visited{background-color:#000000 ;color: #ffffff;}a:hover,a:active{background-color: #ffffff;color: #000000;}浏览效果如图：
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{width: 25%;float: left;line-height: 50px;}img{margin-top: 70px;margin-right: 40px;}.footer{height: 50px;width: 100%;background-image: url(img/footer-bg.jpg);border-top: 3px solid gray;z-index: 9998;position: fixed;bottom: 0;left: 0;}.footer-top{height: 90px;width: 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:valid{display: block;font-size: 20px;color: brown;text-decoration: none;font-weight: bold;border-top: 3px solid gray;background-image: url(img/footer-top-bg1.jpg);}.footer-top a:hover{background-image: url(img/footer-top-bg2.jpg);color: wheat;}.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="rifht" 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>浏览效果如图：
2.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>优名养生馆</title><style type="text/css">body{background-image:url(img/bg.jpg);}.all{margin: 0px auto;width: 900px;}.top{width: 900px;height: 225px;background-image: url(img/top-bg.jpg);}.cent{width: 320px;margin-left: auto;margin-right: auto;font-size: 58px;font-family: "楷体";color: lemonchiffon;font-style: italic;}.nav{width: 200px;float: left;margin-top: 30px;font-size: 20px;font-weight: bold;color: saddlebrown;}.main{width: 700px;height: 300px;float: left;margin-top: 10px;}.footer{font-size: 14px;font-weight: bold;color: brown;text-align: center;clear: both;background-image: url(img/footer-bg.jpg);}p{color: brown;font-size: 16px;}img{margin: 15px;}ul{list-style-type: none;}li{height: 22px;}a:link{font-size: 16px;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><a href="#">运动养生</a></li><li><a href="#">四季养生</a></li><li><a href="#">健康养生</a></li></ul></tr><tr>中医养生</tr><tr><ul><li><a href="#">经络养生</a></li><li><a href="#">体质养生</a></li><li><a href="#">特色养生</a></li></ul></tr></table></div></nav><div class="main"><img src="img/main.jpg" align="left"/><p>  古人云:善养生者,上养神智、中养形态,下养筋骨。</p ><p>  养生不是简单的体育锻炼,也不是吃一顿营养餐,打一套太极拳。养生是以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以期达到保养、调养,颐养生命,实现人类健康、长寿的目的。</p ><p>  养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生,注重身体机能的维护和康复;也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老;心理层面的养生包括养心、养性、养神。</p ></div><hr /><div class="footer">版权所有©优名养生馆</div></div></body>
</html>浏览效果如图：
相关文章：
第8章 利用CSS制作导航菜单
8.1 水平顶部导航栏 水平莱单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平 导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。 如果导航过于普通，无法容纳复杂的信息结构，就需要在…...
C# 集合与泛型
文章目录 前言1.什么是集合？2.非泛型集合（了解即可）2.1常见的非泛型集合 3.泛型的概念4.常用的泛型集合4.1 List < T > <T> <T>4.2 Dictionary<TKey, TValue>4.3 Queue < T > <T> <T>4.4 S t a c…...
el-date-picker 设置开始时间和结束时间
<el-date-picker v-model"ruleForm.RECORDDATE" type"date" placeholder"日期" format"YYYY/M/D" value-format"YYYY/M/D" style"width: 100%;" :disabled-date"publishDateAfter" > </el-dat…...
【Docker】 常用命令
文章目录 介绍Docker和容器化技术什么是Docker？Docker的优势和应用场景Docker的应用场景包括但不限于： 安装和配置Docker安装Docker引擎配置Docker环境 Docker镜像命令搜索镜像拉取镜像查看本地镜像删除本地镜像 Docker容器命令创建容器启动容器停止容器…...
docker compose - 设置名字
只使用 docker compose up 启动容器，默认名字为当前文件夹的名字 设置 project-name，docker 客户端会显示设置的名字，方便区分 docker compose --project-name webtest up错误： docker compose up --project-name webtest 效果…...
工业拍卖平台、信息发布、租赁商城平台系统适用于全行业解决方案。
工业拍卖平台系统是为工业领域的资产交易、设备处置等提供线上拍卖服务的数字化平台。 主要功能： 拍卖信息发布：平台会展示待拍卖的工业资产详细信息，包括设备的名称、型号、规格、使用年限、生产厂家等基本信息，以及资产的图片…...
一个win32 / WTL下多线程库（CThread类）的使用心得
说是多线程库，其实就是一个单独的.h文件，可以方便的放入WTL/win32工程中。 下载地址：CThread. 里面也简单介绍了 用法。 具体用法，首先自定义一个子线程类继承CThreadImpl<T>，注意他是个模板类。 class CMySu…...
使用wordpress搭建简易的信息查询系统
背景 当前有这样的一个需求，要实现让客户能够自助登录系统查询一些个人的信息，市面上没有特别符合我的需求的产品，经过一段时间的研究，想出了一个用wordpress实现简易信息查询系统，有两种方式。 方式一：使…...
PAT甲级 1076 Forwards on Weibo（30）
文章目录 题目题目翻译深度优先搜索（dfs）宽度优先搜索（bfs）总结 原题链接 题目 题目翻译 微博被称为中国的推特。在微博上，一个用户可能有很多粉丝，也可能关注许多其他用户。因此，通过粉丝关系…...
揭开 gRPC、RPC 、TCP和UDP 的通信奥秘
差异点 特性TCPUDPRPCgRPCHTTP工作层级传输层传输层应用层应用层应用层传输协议面向连接的传输协议无连接传输协议使用 TCP、HTTP 等协议HTTP/2HTTP/1.1, HTTP/2序列化格式字节流数据报文XML、JSON 或自定义Protocol BuffersJSON 或 XML特点可靠的连接传输无连接、快速传输远程…...
使用Web Worker来处理多线程操作，以及如何避免主线程卡顿。
在JavaScript中处理大量数据时，由于JavaScript是单线程的，所有的操作都在主线程上运行，因此处理大量数据可能导致页面卡顿和响应迟缓。为了避免这些问题，可以使用Web Workers来实现多线程操作，允许在后台线程中处理复杂…...
杂谈：业务说的场景金融是什么？
引言：市场格局的转变 在供应短缺的年代，是典型的卖方市场。为了保证稳定供货，买方会提前一段时间下单，也几乎没什么议价能力。卖方只需等着接单就行。 现在很多领域的供应商数量越来越多，而且随着互联网的普及&#…...
在vscode实现用和Chrome开发者工具中相同的快捷键进行面板切换
在Chrome开发者工具中，我们可以用 Ctrl [ 和 Ctrl ] 快捷键来切换面板，用起来很方便。 vscode中默认没有这两个快捷键，我们可以通过配置自定义快捷键来实现相同的功能。 配置方法： 1. 按 Ctrl K, Ctrl S 调出快捷键配置面板。…...
【ESP32+MicroPython】硬件控制基础
ESP32是一款功能强大的微控制器，具有多种硬件接口。本文以“ESP32硬件控制”为主题，逐步介绍GPIO（通用输入输出）、PWM（脉宽调制）、ADC（模数转换）等功能的原理与实现，并结…...
Python学习从0到1 day26 第三阶段 Spark ① 数据输入
要学会 剥落旧痂 然后 循此新生 —— 24.11.8 一、Spark是什么 定义： Apache Spark 是用于大规模数据处理的统一分析引擎 简单来说，Spark是一款分布式的计算框架，用于调度成百上千的服务器集群，计算TB、PB乃至EB级别的海量数据…...
kafka消费者的消费分区策略有哪些，默认是哪个？
Kafka消费者的分区分配策略主要有以下几种，分别决定了如何将多个分区分配给消费者： 1. Range（范围分配） 描述：将分区连续地分配给消费者。每个消费者负责一段连续的分区。如果有多个消费者，那么消费者会按…...
前端常用时间操作汇总
（1）获取中国标准时间： let now new Date(); // Thu Nov 14 2024 17:13:49 GMT0800 (中国标准时间) （2）获取年份： let year now.getFullYear(); // 2024 （3）获取月份&…...
106. UE5 GAS RPG 使用MVVM
MVVM 是 Model-View-ViewModel的缩写，个人理解它和MVC很相似，有区别的地方在于，在MVC里，Controller会服务多个View，而MVVM里，每个View都拥有一个单独的ViewModel，所以ViewModel相当于精简版的Co…...
Elasticsearch中什么是倒排索引？
倒排索引（Inverted Index）是一种索引数据结构，它在信息检索系统中被广泛使用，特别是在全文搜索引擎中。倒排索引允许系统快速检索包含给定单词的文档列表。它是文档内容（如文本）与其存储位置之间的映射&…...
深度学习：AT Decoder 详解
AT Decoder 详解 在序列到序列的模型架构中，自回归解码器（Autoregressive Translator, AT Decoder）是一种核心组件，其设计目标是确保生成的序列在语义和语法上的连贯性与准确性。自回归解码器通过逐步、依赖前一输出来生成新的输…...
java_网络服务相关_gateway_nacos_feign区别联系
1. spring-cloud-starter-gateway 作用：作为微服务架构的网关，统一入口，处理所有外部请求。 核心能力： 路由转发（基于路径、服务名等）过滤器（鉴权、限流、日志、Header 处理）支持负…...
脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）
一、数据处理与分析实战 （一）实时滤波与参数调整 基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。 平滑处理&…...
k8s从入门到放弃之Ingress七层负载
k8s从入门到放弃之Ingress七层负载 在Kubernetes（简称K8s）中，Ingress是一个API对象，它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress，你可…...
IGP（Interior Gateway Protocol，内部网关协议）
IGP（Interior Gateway Protocol，内部网关协议） 是一种用于在一个自治系统（AS）内部传递路由信息的路由协议，主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
【JVM】- 内存结构
引言 JVM：Java Virtual Machine 定义：Java虚拟机，Java二进制字节码的运行环境好处： 一次编写，到处运行自动内存管理，垃圾回收的功能数组下标越界检查（会抛异常，不会覆盖到其他代码…...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时，可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案： 1. 检查电源供电问题 问题原因：多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
NFT模式：数字资产确权与链游经济系统构建
NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...
腾讯云V3签名
想要接入腾讯云的Api，必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口，但总是卡在签名这一步，最后放弃选择SDK，这次终于自己代码实现。 可能腾讯云翻新了接口文档，现在阅读起来，清晰了很多&…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...