第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>&emsp;&emsp;古人云:善养生者,上养神智、中养形态,下养筋骨。</p ><p>&emsp;&emsp;养生不是简单的体育锻炼,也不是吃一顿营养餐,打一套太极拳。养生是以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以期达到保养、调养,颐养生命,实现人类健康、长寿的目的。</p ><p>&emsp;&emsp;养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生,注重身体机能的维护和康复;也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老;心理层面的养生包括养心、养性、养神。</p ></div><hr /><div class="footer">版权所有&copy;优名养生馆</div></div></body>
</html>

浏览效果如图：

​​​​​​​ 

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/60303.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

将数据上传至hdfs的两种方式：java代码上传、将数据放入kafka中,通过flume抽取

将数据上传至hdfs的两种方式：java代码上传、将数据放入kafka中,通过flume抽取

目录 1、 生成一条&#xff0c;使用 java 代码将数据放入hdfs上传。 2、 生成一条&#xff0c;编写kafka生产者&#xff0c;将数据放入kafka。kafka source-->flume -->hdfs sink 场景题&#xff1a; 使用 java 代码随机生成学生信息&#xff0c;学生的学号从 0001 开…
阅读更多...
【vue】echarts地图添加蒙版图片，多图层地图实现天气信息展示

【vue】echarts地图添加蒙版图片，多图层地图实现天气信息展示

实现原理&#xff1a;多层图层叠加实现复杂的信息展示。 <template><div class"wrapper"><el-drawertitle"天气信息":modal"iszz":visible.sync"weatherinfo":direction"direction"><drawer:labelnam…
阅读更多...
100+SCI科研绘图系列教程（R和python）

100+SCI科研绘图系列教程（R和python）

科研绘图系列&#xff1a;箱线图加百分比点图展示组间差异-CSDN博客科研绘图系列&#xff1a;箱线图加蜜蜂图展示组间数据分布-CSDN博客科研绘图系列&#xff1a;小提琴图和双侧小提琴图展示组间差异-CSDN博客科研绘图系列&#xff1a;组间差异的STAMP图的ggplot2实现-CSDN博客…
阅读更多...
QT鼠标事件

QT鼠标事件

QT鼠标事件 1.概述 这篇文章介绍如何使用事件和获取事件的信号 2.创建项目 创建一个widget类型项目&#xff0c;在widget.ui文件中添加一个label控件 然后在项目名称上右键选择Add new... 添加文件&#xff0c;选择 C Class 自定义类名Mylabel&#xff0c;选择基类Base …
阅读更多...
“双十一”电商狂欢进行时，在AI的加持下看网易云信IM、RTC如何助力商家！

“双十一”电商狂欢进行时，在AI的加持下看网易云信IM、RTC如何助力商家！

作为一年一度的消费盛会&#xff0c;2024年“双十一”购物狂欢节早已拉开帷幕。蹲守直播间、在主播热情介绍中点开链接并加购&#xff0c;也已成为大多数人打开“双11”的重要方式。然而&#xff0c;在这火热的购物氛围背后&#xff0c;主播频频“翻车”、优质主播稀缺、客服响…
阅读更多...
深入浅出rust内存对齐

深入浅出rust内存对齐

在 Rust 中&#xff0c;内存对齐是一个重要的概念&#xff0c;它涉及到数据在内存中的存储方式&#xff0c;以及如何优化内存访问的效率。往往一门语言的内存布局以及对齐方式决定了一门语言的性能&#xff0c;因此学会并深入理解rust中内存布局会让我们写出高性能的rust代码&a…
阅读更多...
题目练习之二叉树那些事儿（续集）

题目练习之二叉树那些事儿（续集）

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨个人…
阅读更多...
【STL栈和队列】：高效数据结构的应用秘籍

【STL栈和队列】：高效数据结构的应用秘籍

前言&#xff1a; C 标准模板库&#xff08;STL&#xff09;为我们提供了多种容器&#xff0c;其中 stack&#xff08;栈&#xff09;和 queue&#xff08;队列&#xff09;是非常常用的两种容器。 根据之前C语言实现的栈和队列&#xff0c;&#xff08;如有遗忘&#xff0c;…
阅读更多...
Zabbix 7 最新版本安装 Rocky Linux 8

Zabbix 7 最新版本安装 Rocky Linux 8

前言 本实验主要在Rocky Linux 中安装Zabbix&#xff0c;其他centos8、Debian、Ubuntu、Alma Linux都可以安装&#xff0c;就是在中间件有点不同。Nginx就要配置一下&#xff0c;官网给的教程也算是很规范的&#xff0c;就是在MySQL上要自己安装&#xff0c;他没有告诉我们&am…
阅读更多...
git新手使用教程

git新手使用教程

git新手使用教程 一、安装和初始化配置2、新建仓库3.工作区域和文件状态4.添加和提交文件5 git reset回退版本6 使用git diff查看差异7 使用git rm删除文件8 .gitignore忽略文件9 注册GitHub账号10 SSH配置和克隆仓库11 关联本地仓库和远程仓库12 Gitee的使用 由B站视频教程整理…
阅读更多...
【GPTs】Email Responder Pro：高效生成专业回复邮件

【GPTs】Email Responder Pro：高效生成专业回复邮件

博客主页&#xff1a; [小ᶻZ࿆] 本文专栏: AIGC | GPTs应用实例 文章目录 &#x1f4af;GPTs指令&#x1f4af;前言&#x1f4af;Email Responder Pro主要功能适用场景优点缺点 &#x1f4af;小结 &#x1f4af;GPTs指令 中文翻译&#xff1a; Email Craft 是一款专门用于…
阅读更多...
2024下半年软考系统架构师案例分析题试题与答案--ROS机器人操作系统

2024下半年软考系统架构师案例分析题试题与答案--ROS机器人操作系统

一、知识点回顾 ROS（Robot Operating System）是一个用于编写机器人软件的框架。它提供了一系列的工具和库，帮助开发者创建复杂的、可以在多种操作系统上运行的机器人应用程序。 ROS的主要特点包括： 分布式计算能力：ROS提供了一种方式让多个计算机或设备协同工作，通过…
阅读更多...
探索Copier：Python项目模板的革命者

探索Copier：Python项目模板的革命者

文章目录 **探索Copier&#xff1a;Python项目模板的革命者**1. 背景介绍&#xff1a;为何Copier成为新宠&#xff1f;2. Copier是什么&#xff1f;3. 如何安装Copier&#xff1f;4. 简单库函数使用方法4.1 创建模板4.2 从Git URL创建项目4.3 使用快捷方式4.4 动态替换文本4.5 …
阅读更多...
密码学知识点整理二：常见的加密算法

密码学知识点整理二：常见的加密算法

常用的加密算法包括对称加密算法、非对称加密算法和散列算法。 对称加密算法 AES&#xff1a;高级加密标准&#xff0c;是目前使用最广泛的对称加密算法之一&#xff0c;支持多种密钥长度&#xff08;128位、192位、256位&#xff09;&#xff0c;安全性高&#xff0c;加密效率…
阅读更多...
大模型就业收入高吗？大模型入门到精通，收藏这篇就够了

大模型就业收入高吗？大模型入门到精通，收藏这篇就够了

目前&#xff0c;已经可以说人工智能&#xff08;AI&#xff09;是推动社会进步和产业升级的重要力量。 其中&#xff0c;AI大模型作为人工智能领域的核心技术之一&#xff0c;正引领着新一轮的技术革命。 2024年&#xff0c;AI大模型开发工程师无疑成为了IT行业中最炙手可热…
阅读更多...
Kubebot：一款Google云平台下的Slackbot安全测试工具

Kubebot：一款Google云平台下的Slackbot安全测试工具

Kubebot 今天给大家介绍的是一款名叫Kubebot的安全测试Slackbot&#xff0c;该工具基于Google 云平台搭建&#xff0c;并且提供了Kubernetes后端。 项目架构 数据流 1.API请求由Slackbot发起&#xff0c;发送至API服务器&#xff0c;API服务器以Kubernetes(K8s)集群中的Docke…
阅读更多...
openai Realtime API （实时语音）

openai Realtime API （实时语音）

https://openai.com/index/introducing-the-realtime-api/ 官方demo https://github.com/openai/openai-realtime-console 官方demo使用到的插件 https://github.com/openai/openai-realtime-api-beta?tabreadme-ov-file 装包配置 修改yarn.lock 这个包是从github下载的 &q…
阅读更多...
【IC】DTCO

【IC】DTCO

DTCO本质上是DSE。。。 文章A Novel Framework for DTCO: Fast and Automatic Routability Assessment with Machine Learning for Sub-3nm Technology Options中提到&#xff1a; std cell尺寸缩小不一定会在block模块级获得面积收益。。。得综合考虑&#xff0c;综合了设计…
阅读更多...
SpringBoot配置Rabbit中的MessageConverter对象

SpringBoot配置Rabbit中的MessageConverter对象

SpringAMQP默认使用SimpleMessageConverter组件对消息内容进行转换 SimpleMessageConverter&#xff1a; only supports String, byte[] and Serializable payloads仅仅支持String、Byte[]和Serializable对象Jackson2JsonMessageConverter&#xff1a;was expecting (JSON Str…
阅读更多...
Python毕业设计选题：基于django+vue的医院挂号系统设计与实现

Python毕业设计选题：基于django+vue的医院挂号系统设计与实现

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 病人管理 科室类型管理 医生管理 公告咨询管理 挂号预约管理 科室信息管理 摘要 医…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023