如何利用html制作网页水平导航菜单？

作者：禚曾发布：2023-05-04 12:42 715浏览

回答共1个

禚曾

1、新建html页面

打开html编辑软件，新建一个html页面。如图：

2、添加导航标签

在标签里新建一个

标签，然后在

3、在

标签内添加文字。
在新建的
添加要显示的内容。如图：

4、创建样式标签
在标签后新建一个<styletype=\"text/css\"></style>标签。</p><p><br /></p><p>5、创建横向导航的样式</p><p>在<style>标签里添加一个样式类为：.navli{}，然后再.navli类中设置样式背景颜色为红色，浮动为左浮动，内边框上下为8px左右为15px，列表属性为none，字体颜色为白色。</p><p>样式代码为：</p><p>navli{background-color:red;padding:8px15px;float:left;list-style:none;color:#fff;}</p><p><br /></p><p>6、引用样式类。</p><p>在<ul>标签内添加，就可以让nav下的<li>标签引用到设置好的样式类。如图：</p><p><br /></p><p>7、查看效果。</p><p>把html文件保存后，使用浏览器打开即可看到横向导航菜单效果。如图：</p><p>1、a标签既可以当作链接符号来用，本身也是行内标签的一种，直接用a标签输入文字，可以直接在横排显示。</p><p>2、可以做出如图所示效果，横排显示的导航。</p><p>3、如果想要对整体的导航进行移动位置，可以对整个的a标签添加上一个大的盒子div，这样对整体div的移动就可以了。</p><p>4、如图，对div添加居中，添加个描边就直接影响到整个a标签内容了。</p><p>5、我们还可以使用块状标签div来作为导航的一份子，如果中间有链接的时候需要a标签。</p><p>6、默认的块状标签div是竖排排列的，就是会换行。</p><p>7、然后我们将div添加float:left；浮动效果就好了。</p><p>8、这样刚才的竖排导航就变成了横排排列的导航页了。</p><p>9、很多时候我们做导航会用到无序列表ul或者有序列表ol来制作导航，做法和div也是一样的，如图建立ulli标签；将li添加浮动效果。</p><p>10、再添加些边框值，这样一个导航页也好了。</p> </div> <div class='bottom-info'> <p class='thumbs-wrapper J-add-like-num' data-anid='384683' data-likenum='12'><i class='thumb-icon'></i><span class='num'>12</span>赞同</p> <span class='pub-time'>2023-05-04 12:42:48</span> </div> </div> </div><script> utopia.arrived({uid:'utopia_widget_8', js:[], entry:function(){var t=-1!==window.location.host.indexOf("zbjdev")?"https://industry.test.zbjdev.com":"https://industry.zbj.com";$("body").on("click",".J-add-like-num",function(){var i=$(this).attr("data-anid"),s=$(this).attr("data-likenum")||0,e=this;$.ajax({url:t+"/solutionapi/slQuestionAnswerService/addLikesNum",type:"post",data:{id:i},xhrFields:{withCredentials:!0},crossDomain:!0,success:function(t){t.success?($(e).addClass("active"),$(e).attr("data-likenum",Number(s)+1),$(e).find(".num").html(Number(s)+1)):console.log(t.description)},error:function(){console.log("服务器繁忙，请您稍后重试")}})})}}); </script> <div class='reading-recoms-container' id='utopia_widget_9'> <div class='title-block'> <p class='title'> 推荐阅读 <span class='for-eng'>RECOMMENDED READING</span> <i class='icon'></i> </p> </div> <div class='news-item-block'> <a href='/zx/wz/35864' target='_blank'> <div class='content-box'> <p class='news-title' title='vr全景制作效果图软件哪家好_vr全景图制作软件有哪些'> <span class='column-wrapper' title='软件开发'>软件开发</span> vr全景制作效果图软件哪家好_vr全景图制作软件有哪些 </p> <div class='news-desc' title='一、六牛科技-专精特新企业 1、介绍：山东六牛网络科技有限公司，其前身为深圳云网通网络科技有限公司，成立于2012年，专注移动互联网技术开发和产品运营。公司拥有120余名国内优秀研发工程师。公司成立近'>一、六牛科技-专精特新企业 1、介绍：山东六牛网络科技有限公司，其前身为深圳云网通网络科技有限公司，成立于2012年，专注移动互联网技术开发和产品运营。公司拥有120余名国内优秀研发工程师。公司成立近</div> <p class='bottom-info'> <img src='//rms.zbj.com/resource/redirect?key=homesite/task/2022/02/15/359.jpg/origine/980cef39-3d31-45fa-82b1-7ec3caa9834b' class='profile-img' alt='用户头像'/> <span class='user-name'>全虹</span> <span class='read-num'>629浏览</span> </p> </div> </a> </div> <div class='news-item-block'> <a href='/zx/wz/69734' target='_blank'> <div class='content-box'> <p class='news-title' title='手机app做笔记的哪个好_手机上适合做笔记的软件'> <span class='column-wrapper' title='软件开发'>软件开发</span> 手机app做笔记的哪个好_手机上适合做笔记的软件 </p> <div class='news-desc' title='一、来客网络科技 1、介绍：山东来客科技公司拥有四十多名开发工程师，经过多年的技术沉淀，公司拥有丰富的行业开发经验和专业的技术能力，与国内外多家知名企业和政府部门建立了合作关系，公司服务项目有app开'>一、来客网络科技 1、介绍：山东来客科技公司拥有四十多名开发工程师，经过多年的技术沉淀，公司拥有丰富的行业开发经验和专业的技术能力，与国内外多家知名企业和政府部门建立了合作关系，公司服务项目有app开</div> <p class='bottom-info'> <img src='//rms.zbj.com/resource/redirect?key=homesite/task/2022/02/15/435.jpg/origine/ab1b8142-6bf6-4229-9126-3aa88007c644' class='profile-img' alt='用户头像'/> <span class='user-name'>骑思宸</span> <span class='read-num'>562浏览</span> </p> </div> </a> </div> <div class='news-item-block'> <a href='/zx/wz/31884' target='_blank'> <div class='content-box'> <p class='news-title' title='游戏app 开发案例(手机游戏app开发制作)'> <span class='column-wrapper' title='软件开发'>软件开发</span> 游戏app 开发案例(手机游戏app开发制作) </p> <div class='news-desc' title='一、恋爱话术学院录音app小程序开发定制公众号微信软件管理系统 1、案例详情：其他的项目详情请与我司客服联系... 点击查看>> 2、案例金额：￥6000.00元 3、案例属性：色调：暖色为主；行业'>一、恋爱话术学院录音app小程序开发定制公众号微信软件管理系统 1、案例详情：其他的项目详情请与我司客服联系... 点击查看>> 2、案例金额：￥6000.00元 3、案例属性：色调：暖色为主；行业</div> <p class='bottom-info'> <img src='//rms.zbj.com/resource/redirect?key=homesite/task/2022/02/15/345.jpg/origine/15da060f-c51a-408d-b62e-97db527be777' class='profile-img' alt='用户头像'/> <span class='user-name'>太叔初阳</span> <span class='read-num'>429浏览</span> </p> </div> </a> </div> <div class='qa-item-block'> <a href='/zx/wd/473708' target='_blank'> <div class='content-box'> <p class='qa-title' title='有谁知道ppt模板设计那里有免费下载的吗？或者是比较便宜的，公司展会上用的'>有谁知道ppt模板设计那里有免费下载的吗？或者是比较便宜的，公司展会上用的</p> <p class='qa-desc' title=''></p> <p class='bottom-info'> <span class='qa-tag'>ppt设计</span> <span class='read-num'>4026浏览</span> <span class='thumbs-num'>14点赞</span> </p> </div> </a> </div> <div class='qa-item-block'> <a href='/zx/wd/472975' target='_blank'> <div class='content-box'> <p class='qa-title' title='酒店设计风格对酒店设计来说具有怎样的影响'>酒店设计风格对酒店设计来说具有怎样的影响</p> <p class='qa-desc' title=''></p> <p class='bottom-info'> <span class='qa-tag'>装修设计</span> <span class='read-num'>2910浏览</span> <span class='thumbs-num'>15点赞</span> </p> </div> </a> </div> <div class='qa-item-block'> <a href='/zx/wd/473448' target='_blank'> <div class='content-box'> <p class='qa-title' title='PPT可不可以设计一个属于自己的模板，保存后方便以后使用的时候套用的？'>PPT可不可以设计一个属于自己的模板，保存后方便以后使用的时候套用的？</p> <p class='qa-desc' title=''></p> <p class='bottom-info'> <span class='qa-tag'>ppt设计</span> <span class='read-num'>2791浏览</span> <span class='thumbs-num'>14点赞</span> </p> </div> </a> </div> </div> </div> </div> </div> <div id="utopiacs-vue-ssr-footer-v1" data-server-rendered="true"><div data-floor="safeguardIntroduce" class="safeguard-advertising-introduce" data-v-ecaf4304><div class="centre-module" data-v-ecaf4304><div class="entirety-area" data-v-ecaf4304><div class="left-explain-content fl" data-v-ecaf4304><div class="navigation-area" data-v-ecaf4304><a href="javascript:void(0);" data-linkid="pc-home-common-bottomNavigation-qffxg" target="" class="skip-dispose-area" data-v-ecaf4304><img src="https://rms.zbj.com/v2/resource/redirect?key=202408290002/2024/10/12/3a230f4a1b904208b5cf4311a0a439f5.png" alt="图标" class="icon-img fl" data-v-ecaf4304></a><span class="fl" data-v-ecaf4304>找专业人做专业事，多快好省</span></div><div class="content-list-explain" data-v-ecaf4304><div class="single-explain-mk fl" data-v-ecaf4304><a href="https://www.zbj.com/ensurance/" data-linkid="pc-home-common-bottomNavigation-safeguard-0" target="_self" class="skip-dispose-area skip" data-v-ecaf4304><div class="left-img fl" data-v-ecaf4304><img src="https://rms.zbj.com/v2/resource/redirect?key=202408290002/2024/10/11/f55c7429e48546a4b60bb96f13f6bb45.png" alt="图标" class="icon" data-v-ecaf4304></div><div class="right-content fl" data-v-ecaf4304><div class="title-text" data-v-ecaf4304>海量人才品类多</div><div class="explain-text" data-v-ecaf4304>800+种服务品类，700万+专业<br/>人才选择多</div></div></a></div><div class="single-explain-mk fl" data-v-ecaf4304><a href="https://www.zbj.com/ensurance/" data-linkid="pc-home-common-bottomNavigation-safeguard-1" target="_self" class="skip-dispose-area skip" data-v-ecaf4304><div class="left-img fl" data-v-ecaf4304><img src="https://rms.zbj.com/v2/resource/redirect?key=202408290002/2024/10/11/736b2aba9bbc4f81b9646839a1199028.png" alt="图标" class="icon" data-v-ecaf4304></div><div class="right-content fl" data-v-ecaf4304><div class="title-text" data-v-ecaf4304>高效服务响应快</div><div class="explain-text" data-v-ecaf4304>快速响应高效服务，精准解决<br/>需求</div></div></a></div><div class="single-explain-mk fl" data-v-ecaf4304><a href="https://www.zbj.com/ensurance/" data-linkid="pc-home-common-bottomNavigation-safeguard-2" target="_self" class="skip-dispose-area skip" data-v-ecaf4304><div class="left-img fl" data-v-ecaf4304><img src="https://rms.zbj.com/v2/resource/redirect?key=202408290002/2024/10/11/9351e2bb15454e458791cd6f6e7106af.png" alt="图标" class="icon" data-v-ecaf4304></div><div class="right-content fl" data-v-ecaf4304><div class="title-text" data-v-ecaf4304>品质保障服务好</div><div class="explain-text" data-v-ecaf4304>30类服务保障，品质服务好，<br/>全程有保障</div></div></a></div><div class="single-explain-mk fl" data-v-ecaf4304><a href="https://www.zbj.com/ensurance/" data-linkid="pc-home-common-bottomNavigation-safeguard-3" target="_self" class="skip-dispose-area skip" data-v-ecaf4304><div class="left-img fl" data-v-ecaf4304><img src="https://rms.zbj.com/v2/resource/redirect?key=202408290002/2024/10/11/ea201d4d2b6249fa899dccf9602a8c18.png" alt="图标" class="icon" data-v-ecaf4304></div><div class="right-content fl" data-v-ecaf4304><div class="title-text" data-v-ecaf4304>平台交易更省心</div><div class="explain-text" data-v-ecaf4304>资金全程托管，验收后付款，<br/>安全又省心</div></div></a></div></div></div></div></div></div> <div class="bottom-navigation-module" data-v-fb2fd3ce><div class="centre-module" data-v-fb2fd3ce><div class="navigation-content-entirety" data-v-fb2fd3ce><div class="one-area-plate" data-v-fb2fd3ce><div class="left-area fl" data-v-fb2fd3ce><div class="single-navigation-message fl" data-v-fb2fd3ce><a href="javascript:;" target="" data-linkid="pc-home-common-bottomNavigation-tab-0" class="navigation-title nclick" data-v-fb2fd3ce>业务产品</a><a href="https://chongqing.cs.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-0-0" class="second-level-title kclick" data-v-fb2fd3ce>八戒财税</a><a href="https://ipr.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-0-1" class="second-level-title kclick" data-v-fb2fd3ce>八戒知产</a><a href="https://kjfw.zbj.com/qyfw/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-0-2" class="second-level-title kclick" data-v-fb2fd3ce>八戒科技</a><a href="https://ipr.witmart.cn/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-0-3" class="second-level-title kclick" data-v-fb2fd3ce>八戒国际</a><a href="https://cg.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-0-4" class="second-level-title kclick" data-v-fb2fd3ce>八戒公采</a><a href="https://zt.zbj.com/dist/20250421-5005479/index.html" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-0-5" class="second-level-title kclick" data-v-fb2fd3ce>八戒法律</a><a href="https://k.zbj.com/bjk" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-0-6" class="second-level-title kclick" data-v-fb2fd3ce>八戒客推广</a></div><div class="single-navigation-message fl" data-v-fb2fd3ce><a href="javascript:;" target="" data-linkid="pc-home-common-bottomNavigation-tab-1" class="navigation-title nclick" data-v-fb2fd3ce>我是雇主</a><a href="https://www.zbj.com/ensurance/" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-1-0" class="second-level-title kclick" data-v-fb2fd3ce>平台保障</a><a href="https://www.zbj.com/guide/" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-1-1" class="second-level-title kclick" data-v-fb2fd3ce>新人指南</a><a href="https://tf.zbj.com/zt/pc/welfarev2" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-1-2" class="second-level-title kclick" data-v-fb2fd3ce>新人福利</a><a href="https://help.zbj.com/gz/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-1-3" class="second-level-title kclick" data-v-fb2fd3ce>帮助中心</a><a href="https://cygj.zbj.com/pc/cygj/vip/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-1-4" class="second-level-title kclick" data-v-fb2fd3ce>雇主PLUS</a><a href="https://www.zbj.com/about/payment.html" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-1-5" class="second-level-title kclick" data-v-fb2fd3ce>支付方式</a></div><div class="single-navigation-message fl" data-v-fb2fd3ce><a href="javascript:;" target="" data-linkid="pc-home-common-bottomNavigation-tab-2" class="navigation-title nclick" data-v-fb2fd3ce>我是服务者</a><a href="https://zs.zbj.com/zsrz" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-2-0" class="second-level-title kclick" data-v-fb2fd3ce>0元开店</a><a href="https://jianzhi.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-2-1" class="second-level-title kclick" data-v-fb2fd3ce>兼职赚钱</a><a href="https://vip.zbj.com/plusvip" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-2-2" class="second-level-title kclick" data-v-fb2fd3ce>畅聊通</a><a href="https://vip.zbj.com/rwt" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-2-3" class="second-level-title kclick" data-v-fb2fd3ce>任务通</a><a href="https://www.zbj.com/xq/" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-2-4" class="second-level-title kclick" data-v-fb2fd3ce>任务大厅</a><a href="https://zt.zbj.com/dist/20211208-5005031/indexyuG.html" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-2-5" class="second-level-title kclick" data-v-fb2fd3ce>学习中心</a></div><div class="single-navigation-message fl" data-v-fb2fd3ce><a href="javascript:;" target="" data-linkid="pc-home-common-bottomNavigation-tab-3" class="navigation-title nclick" data-v-fb2fd3ce>规则|反馈</a><a href="https://rule.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-3-0" class="second-level-title kclick" data-v-fb2fd3ce>规则中心</a><a href="https://zt.zbj.com/dist/20220628-5005220/index.html" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-3-1" class="second-level-title kclick" data-v-fb2fd3ce>平台信息公示区</a><a href="https://rule.zbj.com/ruleshow-0/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-3-2" class="second-level-title kclick" data-v-fb2fd3ce>隐私保护政策</a><a href="https://i.zbj.com/workorder/feedback/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-3-3" class="second-level-title kclick" data-v-fb2fd3ce>客服|反馈</a><a href="https://ptzl.zbj.com/fe/dist/index.html#/jubao/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-3-4" class="second-level-title kclick" data-v-fb2fd3ce>八戒举报中心</a><a href="https://reportservice.zbj.com/mediation/" target="_blank" data-linkid="pc-home-common-bottomNavigation-tab-items-3-5" class="second-level-title kclick" data-v-fb2fd3ce>交易纠纷调解室</a></div><div class="single-navigation-message fl" data-v-fb2fd3ce><a href="javascript:;" target="" data-linkid="pc-home-common-bottomNavigation-tab-4" class="navigation-title nclick" data-v-fb2fd3ce>关于我们</a><a href="https://www.zbj.com/about/index/" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-4-0" class="second-level-title kclick" data-v-fb2fd3ce>公司信息</a><a href="https://www.zbj.com/zizhi/gszz.html" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-4-1" class="second-level-title kclick" data-v-fb2fd3ce>公司资质</a><a href="https://www.zbj.com/about/course/" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-4-2" class="second-level-title kclick" data-v-fb2fd3ce>取经历程</a><a href="https://www.zbj.com/about/ecology/" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-4-3" class="second-level-title kclick" data-v-fb2fd3ce>业务范畴</a><a href="https://www.zbj.com/about/contactus/" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-4-4" class="second-level-title kclick" data-v-fb2fd3ce>联系我们</a><a href="https://www.zbj.com/about/branch/" target="_self" data-linkid="pc-home-common-bottomNavigation-tab-items-4-5" class="second-level-title kclick" data-v-fb2fd3ce>办公地点</a></div></div><div class="right-area fl" data-v-fb2fd3ce><div class="else-message-area" data-v-fb2fd3ce><div class="service-title" data-v-fb2fd3ce>关注猪八戒网</div><div class="attention-appear-area" data-v-fb2fd3ce><div class="single-content-area fl" data-v-fb2fd3ce><img src="https://rms.zbj.com/v2/resource/redirect?key=202408290002/2026/05/25/9492fbf564424b72b8d4c5c020c6ffe8.png" alt="二维码" class="img-qr-code" data-v-fb2fd3ce><div class="content-explain" data-v-fb2fd3ce>猪八戒APP</div></div><div class="single-content-area fl" data-v-fb2fd3ce><img src="https://rms.zbj.com/v2/resource/redirect?key=202408290002/2026/05/25/e631a10843534dc7b223362608f1db21.jpg" alt="二维码" class="img-qr-code" data-v-fb2fd3ce><div class="content-explain" data-v-fb2fd3ce>猪八戒微信公众号</div></div><div class="single-content-area fl" data-v-fb2fd3ce><img src="https://rms.zbj.com/v2/resource/redirect?key=202408290002/2026/05/25/e87129b60b6c4eb085425cfbf640d89f.png" alt="二维码" class="img-qr-code" data-v-fb2fd3ce><div class="content-explain" data-v-fb2fd3ce>猪八戒小程序</div></div></div></div></div></div><div class="two-area-plate" data-v-fb2fd3ce><div class="share-template-area hot-business-section" data-v-fb2fd3ce><div class="headline-area fl" data-v-fb2fd3ce>热门业务</div><div class="label-list-area fl" data-v-fb2fd3ce><a href="https://ipr.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-0" class="label-content-text kclick" data-v-fb2fd3ce>八戒知识产权</a><a href="https://cs.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-1" class="label-content-text kclick" data-v-fb2fd3ce>八戒财税</a><a href="http://kjfw.zbj.com/qyfw/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-2" class="label-content-text kclick" data-v-fb2fd3ce>八戒科技服务</a><a href="https://www.zbj.com/zx/wd/" target="_self" data-linkid="pc-home-common-bottomNavigation-hot-business-3" class="label-content-text kclick" data-v-fb2fd3ce>八戒问答</a><a href="https://www.zbj.com/category/" target="_self" data-linkid="pc-home-common-bottomNavigation-hot-business-4" class="label-content-text kclick" data-v-fb2fd3ce>全部频道</a><a href="https://www.zbj.com/xq/" target="_self" data-linkid="pc-home-common-bottomNavigation-hot-business-5" class="label-content-text kclick" data-v-fb2fd3ce>外包项目大厅</a><a href="https://www.zbj.com/ser/" target="_self" data-linkid="pc-home-common-bottomNavigation-hot-business-6" class="label-content-text kclick" data-v-fb2fd3ce>热门服务</a><a href="https://www.zbj.com/xq/" target="_self" data-linkid="pc-home-common-bottomNavigation-hot-business-7" class="label-content-text kclick" data-v-fb2fd3ce>外包服务大全</a><a href="https://www.zbj.com/al/" target="_self" data-linkid="pc-home-common-bottomNavigation-hot-business-8" class="label-content-text kclick" data-v-fb2fd3ce>热门案例</a><a href="https://cg.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-9" class="label-content-text kclick" data-v-fb2fd3ce>八戒公采</a><a href="https://vip.zbj.com/plusvip" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-10" class="label-content-text kclick" data-v-fb2fd3ce>畅聊通会员</a><a href="http://dasai.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-11" class="label-content-text kclick" data-v-fb2fd3ce>八戒大赛</a><a href="https://zt.zbj.com/dist/20250421-5005479/index.html" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-12" class="label-content-text kclick" data-v-fb2fd3ce>八戒法律</a><a href="https://work.zbj.com/list/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-13" class="label-content-text kclick" data-v-fb2fd3ce>工位出租</a><a href="https://dm.zbj.com" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-14" class="label-content-text kclick" data-v-fb2fd3ce>八戒数字交易市场</a><a href="https://app.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-15" class="label-content-text kclick" data-v-fb2fd3ce>app开发</a><a href="https://rj.zx.zbj.com/ " target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-16" class="label-content-text kclick" data-v-fb2fd3ce>软件开发</a><a href="https://xcx.zx.zbj.com/ " target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-17" class="label-content-text kclick" data-v-fb2fd3ce>小程序开发</a><a href="https://kf.zx.zbj.com/ " target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-18" class="label-content-text kclick" data-v-fb2fd3ce>系统开发</a><a href="https://logo.zx.zbj.com/ " target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-19" class="label-content-text kclick" data-v-fb2fd3ce> logo设计</a><a href="https://sh.zx.zbj.com/ " target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-20" class="label-content-text kclick" data-v-fb2fd3ce>上海猪八戒网</a><a href="https://bj.zx.zbj.com/ " target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-21" class="label-content-text kclick" data-v-fb2fd3ce>北京猪八戒网</a><a href="https://xj.zx.zbj.com/ " target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-22" class="label-content-text kclick" data-v-fb2fd3ce>新疆猪八戒网</a><a href="https://nx.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-23" class="label-content-text kclick" data-v-fb2fd3ce>宁夏猪八戒网</a><a href="https://xz.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-24" class="label-content-text kclick" data-v-fb2fd3ce>西藏猪八戒网</a><a href="https://gx.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-25" class="label-content-text kclick" data-v-fb2fd3ce>广西猪八戒网</a><a href="https://nmg.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-26" class="label-content-text kclick" data-v-fb2fd3ce>内蒙古猪八戒网</a><a href="https://qh.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-27" class="label-content-text kclick" data-v-fb2fd3ce>青海猪八戒网</a><a href="https://sc.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-28" class="label-content-text kclick" data-v-fb2fd3ce>四川猪八戒网</a><a href="https://yn.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-29" class="label-content-text kclick" data-v-fb2fd3ce>云南猪八戒网</a><a href="https://gz.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-30" class="label-content-text kclick" data-v-fb2fd3ce>广州猪八戒网</a><a href="https://gd.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-31" class="label-content-text kclick" data-v-fb2fd3ce>广东猪八戒网</a><a href="https://hn.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-32" class="label-content-text kclick" data-v-fb2fd3ce>河南猪八戒网</a><a href="https://sd.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-33" class="label-content-text kclick" data-v-fb2fd3ce>山东猪八戒网</a><a href="https://jx.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-34" class="label-content-text kclick" data-v-fb2fd3ce>江西猪八戒网</a><a href="https://fj.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-35" class="label-content-text kclick" data-v-fb2fd3ce>福建猪八戒网</a><a href="https://ah.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-36" class="label-content-text kclick" data-v-fb2fd3ce>安徽猪八戒网</a><a href="https://zj.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-37" class="label-content-text kclick" data-v-fb2fd3ce>浙江猪八戒网</a><a href="https://js.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-38" class="label-content-text kclick" data-v-fb2fd3ce>江苏猪八戒网</a><a href="https://hlj.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-39" class="label-content-text kclick" data-v-fb2fd3ce>黑龙江猪八戒网</a><a href="https://jl.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-40" class="label-content-text kclick" data-v-fb2fd3ce>吉林猪八戒网</a><a href="https://ln.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-41" class="label-content-text kclick" data-v-fb2fd3ce>辽宁猪八戒网</a><a href="https://sx.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-42" class="label-content-text kclick" data-v-fb2fd3ce>山西猪八戒网</a><a href="https://hb.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-43" class="label-content-text kclick" data-v-fb2fd3ce>河北猪八戒网</a><a href="https://cq.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-44" class="label-content-text kclick" data-v-fb2fd3ce>重庆猪八戒网</a><a href="https://tj.zx.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-hot-business-45" class="label-content-text kclick" data-v-fb2fd3ce>天津猪八戒网</a></div></div><div class="share-template-area city-inquire-section" data-v-fb2fd3ce><div class="headline-area fl" data-v-fb2fd3ce>城市查询</div><div class="label-list-area fl" data-v-fb2fd3ce><a href="https://chongqing.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-0" class="label-content-text kclick" data-v-fb2fd3ce>重庆</a><a href="https://beijing.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-1" class="label-content-text kclick" data-v-fb2fd3ce>北京</a><a href="https://shenzhen.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-2" class="label-content-text kclick" data-v-fb2fd3ce>深圳</a><a href="https://shanghai.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-3" class="label-content-text kclick" data-v-fb2fd3ce>上海</a><a href="https://guangzhou.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-4" class="label-content-text kclick" data-v-fb2fd3ce>广州</a><a href="https://chengdu.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-5" class="label-content-text kclick" data-v-fb2fd3ce>成都</a><a href="https://hangzhou.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-6" class="label-content-text kclick" data-v-fb2fd3ce>杭州</a><a href="https://wuhan.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-7" class="label-content-text kclick" data-v-fb2fd3ce>武汉</a><a href="https://nanjing.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-8" class="label-content-text kclick" data-v-fb2fd3ce>南京</a><a href="https://xian.zbj.com/" target="_blank" data-linkid="pc-home-common-bottomNavigation-city-inquire-9" class="label-content-text kclick" data-v-fb2fd3ce>西安</a></div></div></div><div class="three-area-plate" data-v-fb2fd3ce><div class="informatization-content" data-v-fb2fd3ce><div class="website-message" data-v-fb2fd3ce><a href="javascript:;">Copyright © 2005-现在 zbj.com版权所有</a> <a href="https://beian.miit.gov.cn" target="_blank">渝ICP备10202274号-4</a> <a href="https://dxzhgl.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp" target="_blank">渝B2-20080005</a> <a href="http://www.beian.gov.cn/portal/registerSystemInfo"> <img src="https://tianpeng.zbjimg.com/tianpeng/task/2023/08/22/119555fb-7e23-4690-b6a3-533b28f03dc1.png/origine/451b9ce2-9694-49c0-b206-59d46a052014" alt="图标" class="identification-img fl"> 渝公网安备50019002500154号 </a> <a href="javascript:;">猪八戒股份有限公司</a></div><div v-if="true" class="website-message-one" data-v-fb2fd3ce><a href="javascript:;" target="_blank" data-linkid="pc-home-common-bottomNavigation-website-message-0" v-if="true" class="left-message-nr fl nclick" data-v-fb2fd3ce><span class="fl" data-v-fb2fd3ce>互联网违法和不良信息举报电话：023-88390110 邮箱：jubao@zbj.com</span></a><a href="https://www.xycq.gov.cn/" target="_blank" data-linkid="pc-home-common-bottomNavigation-website-message-1" v-if="true" class="left-message-nr fl kclick" data-v-fb2fd3ce><span class="fl" data-v-fb2fd3ce> 信用重庆</span></a><a href="http://cq.gsxt.gov.cn/" target="_blank" data-linkid="pc-home-common-bottomNavigation-website-message-2" v-if="true" class="left-message-nr fl kclick" data-v-fb2fd3ce><span class="fl" data-v-fb2fd3ce> 国家企业信用信息公示系统(重庆)</span></a></div><div class="website-message-two" data-v-fb2fd3ce><a href="https://www.12377.cn/" title="举报中心" data-linkid="pc-home-common-bottomNavigation-certificate-0" target="_blank" class="single-prove-area fl kclick" data-v-fb2fd3ce><img src="https://tianpeng.zbjimg.com/tianpeng/task/2023/08/22/439ecb70-f6e4-4a44-99cc-41893ce432a8.png/origine/6972cd58-a619-4f6e-9964-4a624d04cddb" alt="图片" class="img-prove" data-v-fb2fd3ce></a></div></div></div></div></div></div></div><script src="https://utopiacs.zbj.com/__NUXT__/71842c0e.js"></script> <script>seajs.use(["//as.zbjimg.com/static/nodejs-zbj-utopiacs-web/widget/vue/footer-v1.client_2173c61.js"]);</script> <script>/*<![CDATA[*/ seajs.use('zbj-fe/fe-zbj-fastimkey-res', function (Fastimkey) { var imKey = new Fastimkey({ trigger: 'click', needIm: true, stopPropagation: true }) }) $(window).off('beforeunload'); seajs.use("ads-tomoko/utopia-zzgg-bees-res", function (Bees) { var bees = new Bees(); bees.dataHandler(); }); seajs.use('widget/components/log/log', function (log) { $('body').on('click', '[data-linkid]', function () { var linkid = $(this).data('linkid'); if (!linkid) return; log.sendLog({ linkid: linkid }); }); }); function getTaskComponent () { var dtd = $.Deferred() $.ajax({ url: '//oc.' + window.ZBJInfo.baseURI + '/component', type: 'get', dataType: 'jsonp', jsonp: 'jsonpcallback', success: dtd.resolve, error: function () { window.console && console.log('网络错误，请稍后重试') } }) return dtd } function useComponent (name, callback) { getTaskComponent().always(function (json) { if (json.success) { var components = json.data.components if (components[name]) { seajs.use('fe-task/' + name + '@' + components[name], function (componentObj) { callback && callback(componentObj) }) } } }) } useComponent('utopia-order-consultant-res', function (ComponentObj) { var consultant = new ComponentObj({ meetId: 1, sourceId: 164, quickPubBoxClass: '.quick-pub-box-horizontal' }) consultant.init() }) seajs.use('fast-zbj/fe-zbj-component-res/ylc',function(vueCiient){ $('body').append('<div id="bottom-ylc"></div>') vueCiient.render('#bottom-ylc',{ sign:'PC_DEMAND_SERVICE_MALL_BOTTOM_INDEX', btnLinkid:'ylc-index-pub-btn', chanceParams: { sign: 'PC_DEMAND_SERVICE_MALL_BOTTOM_INDEX', source: 4531, sceneId: 350, preferentialTypeList: [1454], chanceDescription: 'PC直营商城分类场首页-提交框', shopId: -1, mediaType: 2, objectType: 5, qwbhPageFrom: 'pc-category-sbmarket-zxzx', dialogIndex: 0, } }) }) //]]></script> </body> </html>

问答

如何利用html制作网页水平导航菜单？