第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）是一种核心组件，其设计目标是确保生成的序列在语义和语法上的连贯性与准确性。自回归解码器通过逐步、依赖前一输出来生成新的输…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06（十亿美元）。漏洞扫描服务市场行业预计将从 2024 年的 3.48（十亿美元）增长到 2032 年的 9.54（十亿美元）。预测期内漏洞扫描服务市场 CAGR（增长率&…...
1688商品列表API与其他数据源的对接思路
将1688商品列表API与其他数据源对接时，需结合业务场景设计数据流转链路，重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点： 一、核心对接场景与目标 商品数据同步 场景：将1688商品信息…...
C++ 基础特性深度解析
目录 引言 一、命名空间（namespace） C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用（reference） C 中的引用 与 C 语言的对比 四、inline（内联函数…...
华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
华为云FlexusDeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色，华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型，能助力我们轻松驾驭 DeepSeek-V3/R1，本文中将分享如何…...
鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南
1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发，使用DevEco Studio作为开发工具，采用Java语言实现，包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题
【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要： 近期，在使用较新版本的OpenSSH客户端连接老旧SSH服务器时，会遇到 "no matching key exchange method found", "n…...
jdbc查询mysql数据库时，出现id顺序错误的情况
我在repository中的查询语句如下所示，即传入一个List<intager>的数据，返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致，会导致返回的id是从小到大排列的，但我不希望这样。 Query("SELECT NEW com…...
【深尚想】TPS54618CQRTERQ1汽车级同步降压转换器电源芯片全面解析
1. 元器件定义与技术特点 TPS54618CQRTERQ1 是德州仪器（TI）推出的一款 汽车级同步降压转换器（DC-DC开关稳压器），属于高性能电源管理芯片。核心特性包括： 输入电压范围：2.95V–6V，输…...
js 设置3秒后执行
如何在JavaScript中延迟3秒执行操作 在JavaScript中，要设置一个操作在指定延迟后（例如3秒）执行，可以使用 setTimeout 函数。setTimeout 是JavaScript的核心计时器方法，它接受两个参数： 要执行的函数&…...