怎样制作网页下拉导航菜单?

1、首先打开sublime编译器,然后创建后缀名为.html的文件,并写入基本网页结构。

怎样制作网页下拉导航菜单?

2、在div容器中写入最基本的菜单结构,使用列表进行构建。

怎样制作网页下拉导航菜单?

3、将列表添加class属性,并使用CSS属性去掉列表和a标签的样式。

怎样制作网页下拉导航菜单?怎样制作网页下拉导航菜单?

4、设置第一级菜单的大小和宽度高度,以及文字居中。

怎样制作网页下拉导航菜单?

5、二级菜单栏设置边框和背景颜色。

怎样制作网页下拉导航菜单?

6、当鼠标滑过的时候,二级菜单改变颜色,使用hover属性设置CSS样式。

怎样制作网页下拉导航菜单?

7、最后是将二级菜单栏的display设置为none进行隐藏,当鼠标悬停在一级菜单栏,display变为block。

怎样制作网页下拉导航菜单?

"

HTML,如何制作导航栏?

导航栏基本都是横排、竖排列的,看到的大部分都是横排排列的,每个人都有自己的方法做出好看的导航排列,方法有很多种,选择自己快速的方法即可。

1.横排无非是本身标签是行内标签或者将块状标签添加浮动效果,然后变成横排排列的导航。a标签既可以当做链接符号来用,本身也是行内标签的一种,直接用a标签输入文字,可以直接在横排显示。

怎样制作网页下拉导航菜单?

2.如图所示效果,横排显示的导航。

怎样制作网页下拉导航菜单?

3.如果想要对整体的导航进行移动位置,可以对整个的a标签添加上一个大的盒子div,这样对整体div的移动就可以了。

怎样制作网页下拉导航菜单?

4.如图,对div添加居中,添加个描边就直接影响到整个a标签内容了。

怎样制作网页下拉导航菜单?

5.我们还可以使用块状标签div来作为导航的一份子,如果中间有链接的时候需要a标签。

怎样制作网页下拉导航菜单?

6.默认的块状标签div是竖排排列的,就是会换行。

怎样制作网页下拉导航菜单?

7.然后我们将div添加float:left;浮动效果就好了。

怎样制作网页下拉导航菜单?

8.这样刚才的竖排导航就变成了横排排列的导航页了。

怎样制作网页下拉导航菜单?

9.很多时候我们做导航会用到无序列表ul或者有序列表ol来制作导航,做法和div也是一样的,如图建立ul li标签;将li添加浮动效果。

怎样制作网页下拉导航菜单?

10.再添加些边框值,这样一个导航页也好了,和之前的也没大区别,所以制作导航的方法千千种,按公司习惯来做就好了。

怎样制作网页下拉导航菜单?

"

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

1、新建html页面

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

怎样制作网页下拉导航菜单?

2、添加导航标签

在标签里新建一个

    标签,然后在

      标签里添加几个

    • 标签。如图:

      怎样制作网页下拉导航菜单?

      3、在

    • 标签内添加文字。

      在新建的

    • 添加要显示的内容。如图:

      怎样制作网页下拉导航菜单?

      4、创建样式标签

      标签后新建一个标签。</p> <p><noscript><img alt="怎样制作网页下拉导航菜单?" src="https://www.7ttt.cn/wp-content/uploads/2022/03/image-1826.jpg" /></noscript><img class="j-lazy" alt="怎样制作网页下拉导航菜单?" src="https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/image-1826.jpg" /></p> <p></p> <p>5、创建横向导航的样式</p> <p>在标签里添加一个样式类为:.nav li{},然后再.nav li类中设置样式背景颜色为红色,浮动为左浮动,内边框上下为8px左右为15px,列表属性为none,字体颜色为白色。</p> <p>样式代码为:</p> <p>nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; }</p> <p><noscript><img alt="怎样制作网页下拉导航菜单?" src="https://www.7ttt.cn/wp-content/uploads/2022/03/image-1827.jpg" /></noscript><img class="j-lazy" alt="怎样制作网页下拉导航菜单?" src="https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/image-1827.jpg" /></p> <p></p> <p>6、引用样式类。</p> <p>在</p> <ul>标签内添加 ,就可以让nav下的</p> <li>标签引用到设置好的样式类。如图:</p> <p><noscript><img alt="怎样制作网页下拉导航菜单?" src="https://www.7ttt.cn/wp-content/uploads/2022/03/image-1828.jpg" /></noscript><img class="j-lazy" alt="怎样制作网页下拉导航菜单?" src="https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/image-1828.jpg" /></p> <p></p> <p>7、查看效果。</p> <p>把html文件保存后,使用浏览器打开即可看到横向导航菜单效果。如图:</p> <p><noscript><img alt="怎样制作网页下拉导航菜单?" src="https://www.7ttt.cn/wp-content/uploads/2022/03/image-1829.jpg" /></noscript><img class="j-lazy" alt="怎样制作网页下拉导航菜单?" src="https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/image-1829.jpg" /></p> <p>"</p> <div class='yarpp yarpp-related yarpp-related-website yarpp-template-list'> <!-- YARPP List --> <blockquote><p><strong>您可能感兴趣:</strong></p> <p><a href="https://www.7ttt.cn/112535.html" rel="bookmark" title="html水平导航栏制作,如何利用html制作网页水平导航菜单?">html水平导航栏制作,如何利用html制作网页水平导航菜单? </a></p> <p><a href="https://www.7ttt.cn/45037.html" rel="bookmark" title="Egg.js nunjucks模板引擎开发网站实战(利于seo网站优化排名)">Egg.js nunjucks模板引擎开发网站实战(利于seo网站优化排名) </a></p> <p><a href="https://www.7ttt.cn/140478.html" rel="bookmark" title="怎样制作网页下拉导航菜单,网页设计导航栏下拉菜单怎么做">怎样制作网页下拉导航菜单,网页设计导航栏下拉菜单怎么做 </a></p> <p><a href="https://www.7ttt.cn/126613.html" rel="bookmark" title="html怎么设置网页背景颜色,如何在HTML中设置网页背景颜色?">html怎么设置网页背景颜色,如何在HTML中设置网页背景颜色? </a></p> <p><a href="https://www.7ttt.cn/433.html" rel="bookmark" title="php语法基础实验总结(php语法基础知识)">php语法基础实验总结(php语法基础知识) </a></p> <p><a href="https://www.7ttt.cn/129411.html" rel="bookmark" title="css伪元素是什么,CSS伪元素有哪些不得了的用法?">css伪元素是什么,CSS伪元素有哪些不得了的用法? </a></p> </blockquote> </div> </div> <div class="entry-footer"> <div class="entry-action"> <div class="btn-zan" data-id="123102"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up-fill"></use></svg></i> 赞 <span class="entry-action-num">(0)</span></div> </div> <div class="entry-bar"> <div class="entry-bar-inner clearfix"> <div class="author pull-left"> <a data-user="414" target="_blank" href="https://www.7ttt.cn/user/414" class="avatar j-user-card"> <img alt='春天禁止入内' src='/wp-content/uploads/2021/09/1630836554-favicon.png' class='avatar avatar-60 photo' height='60' width='60' /><span class="author-name">春天禁止入内</span><span class="user-group">投稿者</span> </a> </div> <div class="info pull-right"> <div class="info-item meta"> <a class="meta-item j-heart" href="javascript:;" data-id="123102"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg></i> <span class="data">0</span></a> <a class="meta-item" href="#comments"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg></i> <span class="data">0</span></a> </div> <div class="info-item share"> <a class="meta-item mobile j-mobile-share" href="javascript:;" data-id="123102" data-qrcode="https://www.7ttt.cn/123102.html"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg></i> 生成海报</a> <a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg></i> </a> <a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg></i> </a> <a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg></i> </a> <a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg></i> </a> <a class="meta-item douban" data-share="douban" target="_blank" rel="nofollow" href="#"> <i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-douban"></use></svg></i> </a> </div> <div class="info-item act"> <a href="javascript:;" id="j-reading"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg></i></a> </div> </div> </div> </div> <!--大家都在买--> <div id="related-goods" class="related-goods"></div> <!--大家都在买.--> <h3 class="entry-related-title">相关推荐</h3><ul class="entry-related cols-3 post-loop post-loop-default"> <li class="item item3"> <div class="item-content"> <h4 class="item-title"> <a href="https://www.7ttt.cn/81649.html" target="_blank" rel="bookmark"> 移动定制全网通和全网通的区别,移动4g定制和全网通4g定制还有正常全网通有什么区别? </a> </h4> <a class="item-images" href="https://www.7ttt.cn/81649.html" target="_blank"> <span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/02/113e90008765a806cc8f7.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/02/113e30008774bc42b1cf8.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/02/113e50008785124a2fa54.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/02/113e400087d43bc99e43f.jpg"></div></span> </a> <div class="item-excerpt"> <p>今天去买手机,感觉那家特别便宜问了才知道,那是全网通4g定制版,mix3才三千一百多,求大神告知全网通4g定制和普通全网通什么区别应邀回答本行业问题。全网通手机是中国电信提出来的手机,现在市面上的大部分手机都...</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="412" target="_blank" href="https://www.7ttt.cn/user/412" class="avatar j-user-card"> <img alt='筹码玩家' src='/wp-content/uploads/2021/09/1630836554-favicon.png' class='avatar avatar-60 photo' height='60' width='60' /> <span>筹码玩家</span> </a> </div> <span class="item-meta-li date">2022-02-23</span> <span class="item-meta-li dot">•</span> <a class="item-meta-li" href="https://www.7ttt.cn/tougao" target="_blank">投稿</a> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item item3"> <div class="item-content"> <h4 class="item-title"> <a href="https://www.7ttt.cn/114862.html" target="_blank" rel="bookmark"> 服务器数据怎么备份(服务器的数据备份怎么操作) </a> </h4> <a class="item-images" href="https://www.7ttt.cn/114862.html" target="_blank"> <span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/image-10789.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/image-10790.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/image-10802.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/image-10792.jpg"></div></span> </a> <div class="item-excerpt"> <p>对于服务器而言,它承担的使命是7x24小时不间断的对外提供服务,但它面临的风险也是很大的,无论是人为误操作、硬件损坏还是黑客攻击,难免有数据损坏丢失的时候。一旦发生数据损坏、丢失现象后,如果没有备份数据,...</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="406" target="_blank" href="https://www.7ttt.cn/user/406" class="avatar j-user-card"> <img alt='0号房间的礼物' src='/wp-content/uploads/2021/09/1630836554-favicon.png' class='avatar avatar-60 photo' height='60' width='60' /> <span>0号房间的礼物</span> </a> </div> <span class="item-meta-li date">2022-03-11</span> <span class="item-meta-li dot">•</span> <a class="item-meta-li" href="https://www.7ttt.cn/tougao" target="_blank">投稿</a> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item item3"> <div class="item-content"> <h4 class="item-title"> <a href="https://www.7ttt.cn/112242.html" target="_blank" rel="bookmark"> 怎么正确分析竞争对手?营销策划案中的竞品分析怎么写才合理? </a> </h4> <a class="item-images" href="https://www.7ttt.cn/112242.html" target="_blank"> <span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2021/07/78.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/0dd12cb3435c4be38d839f54d5009815.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="//p1.toutiaoimg.com/list/190x124/tos-cn-i-0022/1158b7e4da8f41c49bb94e287b07eed3"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://p1.toutiaoimg.com/large/pgc-image/64d96afc2c384c959b0de7fe8717ccee"></div></span> </a> <div class="item-excerpt"> <p>首先是找准对方的弱点,明确对方的优点。其次明确自己的竞品优点是什么,要用定性分析和定量分析,找准两则的差异,用已之长击对方之短,用自己的弱点去淡化对方的优点。这样写出的营销策划才有战斗力。商业计划书的...</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="396" target="_blank" href="https://www.7ttt.cn/user/396" class="avatar j-user-card"> <img alt='還原設置' src='/wp-content/uploads/2021/09/1630836554-favicon.png' class='avatar avatar-60 photo' height='60' width='60' /> <span>還原設置</span> </a> </div> <span class="item-meta-li date">2022-03-07</span> <span class="item-meta-li dot">•</span> <a class="item-meta-li" href="https://www.7ttt.cn/tougao" target="_blank">投稿</a> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/29328.html" title="网曝腾讯一员工年薪251万,月均 20 多万(腾讯一员工收入证明工资曝光)" target="_blank" rel="bookmark"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image j-lazy" alt="网曝腾讯一员工年薪251万,月均 20 多万(腾讯一员工收入证明工资曝光)" data-original="https://www.7ttt.cn/wp-content/uploads/2021/11/06e71d994158473bb013e42fa8c6bdcc-480x300.jpg" /> </a> <a class="item-category" href="https://www.7ttt.cn/tougao" target="_blank">投稿</a> </div> <div class="item-content"> <h4 class="item-title"> <a href="https://www.7ttt.cn/29328.html" target="_blank" rel="bookmark"> 网曝腾讯一员工年薪251万,月均 20 多万(腾讯一员工收入证明工资曝光) </a> </h4> <div class="item-excerpt"> <p>近日,网上一个腾讯员工爆出了自己开出的一个收入证明,这个员工从2012年就开始在腾讯天美工作室工作了,主要担任的是游戏客户端开发职务。看了这个收入证明,小易真的是觉得夸张呀!税后收入251 万多,月均 20 多万...</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="53" target="_blank" href="https://www.7ttt.cn/user/53" class="avatar j-user-card"> <img alt='往日随风' src='//www.7ttt.cn/wp-content/uploads/member/avatars/d1619ad8176d6654.1677826143.jpg' class='avatar avatar-60 photo' height='60' width='60' /> <span>往日随风</span> </a> </div> <span class="item-meta-li date">2021-11-28</span> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item item3"> <div class="item-content"> <h4 class="item-title"> <a href="https://www.7ttt.cn/88755.html" target="_blank" rel="bookmark"> 有什么兼职的,你所知道的兼职有哪些? </a> </h4> <a class="item-images" href="https://www.7ttt.cn/88755.html" target="_blank"> <span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2021/07/76.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/a265075f4f4d4859ac093931fe30ea2e.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/058ffd4442714586b0c8cbf5ce54543f.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/03/5c1c2a8c46b74218935db3c67f0fd2ae.jpg"></div></span> </a> <div class="item-excerpt"> <p>1.SD是已经好些年的了,真实的收入少,大概2-50左右一单,购物的低些,注册的高一些,几年前做过。 2.录入,主要是数据,保险,医疗,快递,验证码……多劳多得,挣辛苦钱,陆陆续续还是在做,至少每月三个卡的电话费...</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="451" target="_blank" href="https://www.7ttt.cn/user/451" class="avatar j-user-card"> <img alt='北极甜虾' src='/wp-content/uploads/2021/09/1630836554-favicon.png' class='avatar avatar-60 photo' height='60' width='60' /> <span>北极甜虾</span> </a> </div> <span class="item-meta-li date">2022-03-03</span> <span class="item-meta-li dot">•</span> <a class="item-meta-li" href="https://www.7ttt.cn/tougao" target="_blank">投稿</a> <div class="item-meta-right"> </div> </div> </div> </li> <li class="item item3"> <div class="item-content"> <h4 class="item-title"> <a href="https://www.7ttt.cn/72607.html" target="_blank" rel="bookmark"> 用照片做视频软件哪个好用,把照片做成视频,哪个软件最好用? </a> </h4> <a class="item-images" href="https://www.7ttt.cn/72607.html" target="_blank"> <span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/02/113ef0000371f6072126e.gif"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/02/113e900003746a8c01483.gif"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/02/1a09400031e85e0aa857e.jpg"></div></span><span><div class="item-images-el j-lazy" style="background-image: url(https://www.7ttt.cn/wp-content/themes/justnews/themer/assets/images/lazy.png);" data-original="https://www.7ttt.cn/wp-content/uploads/2022/02/688ab65553b34345921b9f352c234b69.jpg"></div></span> </a> <div class="item-excerpt"> <p>我用的是国产软件(浪漫MTV7)。上手快,操作简单,功能强大!分分钟能做出带字幕的短视频!下面是我随便弄的!喜欢的点个赞!谢谢! 动态图片的制作软件有哪些?谢谢邀请!动态图片的英文简称GIF,现在软件开发商研...</p> </div> <div class="item-meta"> <div class="item-meta-li author"> <a data-user="411" target="_blank" href="https://www.7ttt.cn/user/411" class="avatar j-user-card"> <img alt='橘子海' src='/wp-content/uploads/2021/09/1630836554-favicon.png' class='avatar avatar-60 photo' height='60' width='60' /> <span>橘子海</span> </a> </div> <span class="item-meta-li date">2022-02-09</span> <span class="item-meta-li dot">•</span> <a class="item-meta-li" href="https://www.7ttt.cn/tougao" target="_blank">投稿</a> <div class="item-meta-right"> </div> </div> </div> </li> </ul> </div> <div class="entry-copyright"><!-- <p>原创文章,作者:春天禁止入内,如若转载,请注明出处:https://www.7ttt.cn/123102.html</p> --> 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 xxx@163.com 举报,一经查实,本站将立刻删除。</div> <div id="comments" class="entry-comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/123102.html#respond" style="display:none;"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-close"></use></svg></i></a></small></h3><div class="comment-form"><div class="comment-must-login">请登录后评论...</div><div class="form-submit"><div class="form-submit-text pull-left"><a href="https://www.7ttt.cn/login">登录</a>后才能评论</div> <button name="submit" type="submit" id="must-submit" class="btn btn-primary btn-xs submit">发表</button></div></div> </div><!-- #respond --> </div><!-- .comments-area --> </div> </article> </div> <aside class="sidebar"> <div id="wpcom-post-thumb-4" class="widget widget_post_thumb"><h3 class="widget-title"><span>最新文章</span></h3> <ul> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391278.html" title="串珠式结构作文练习"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128151-480x300.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="串珠式结构作文练习" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391278.html" title="串珠式结构作文练习">串珠式结构作文练习</a></p> <p class="item-date">2023-06-09</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391277.html" title="三年级环保作文300字左右"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128598-1-480x300.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="三年级环保作文300字左右" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391277.html" title="三年级环保作文300字左右">三年级环保作文300字左右</a></p> <p class="item-date">2023-06-09</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391276.html" title="《融化的冰糕》作文"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128596-480x300.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="《融化的冰糕》作文" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391276.html" title="《融化的冰糕》作文">《融化的冰糕》作文</a></p> <p class="item-date">2023-06-09</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391273.html" title="突破______作文"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128159-480x300.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="突破______作文" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391273.html" title="突破______作文">突破______作文</a></p> <p class="item-date">2023-06-09</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391272.html" title="小学生作文《我的妈妈》搞笑篇"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128593-480x300.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="小学生作文《我的妈妈》搞笑篇" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391272.html" title="小学生作文《我的妈妈》搞笑篇">小学生作文《我的妈妈》搞笑篇</a></p> <p class="item-date">2023-06-09</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391271.html" title="《写给蚊子的一封信》作文"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128163-480x300.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="《写给蚊子的一封信》作文" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391271.html" title="《写给蚊子的一封信》作文">《写给蚊子的一封信》作文</a></p> <p class="item-date">2023-06-09</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391267.html" title="痛哭流泪的说说"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128591-1-480x300.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="痛哭流泪的说说" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391267.html" title="痛哭流泪的说说">痛哭流泪的说说</a></p> <p class="item-date">2023-06-09</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391264.html" title="《当世界年纪还小的时候》作文"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128588-480x300.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="《当世界年纪还小的时候》作文" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391264.html" title="《当世界年纪还小的时候》作文">《当世界年纪还小的时候》作文</a></p> <p class="item-date">2023-06-09</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391262.html" title="无悔的选择作文800字记叙文"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128586-2-480x300.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="无悔的选择作文800字记叙文" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391262.html" title="无悔的选择作文800字记叙文">无悔的选择作文800字记叙文</a></p> <p class="item-date">2023-06-09</p> </div> </li> <li class="item"> <div class="item-img"> <a class="item-img-inner" href="https://www.7ttt.cn/391258.html" title="失之毫厘差之千里的故事"> <img width="480" height="300" src="https://www.7ttt.cn/wp-content/uploads/2023/06/1686128167-480x300.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="失之毫厘差之千里的故事" /> </a> </div> <div class="item-content"> <p class="item-title"><a href="https://www.7ttt.cn/391258.html" title="失之毫厘差之千里的故事">失之毫厘差之千里的故事</a></p> <p class="item-date">2023-06-09</p> </div> </li> </ul> </div><div id="wpcom-lastest-news-5" class="widget widget_lastest_news"><h3 class="widget-title"><span>猜你喜欢</span></h3> <ul> <li><a href="https://www.7ttt.cn/146563.html" title="mybatis是干嘛用的,mybatis有什么用">mybatis是干嘛用的,mybatis有什么用</a></li> <li><a href="https://www.7ttt.cn/345684.html" title="新鲜百合怎么去除苦味(新鲜百合怎么保存时间长一点)">新鲜百合怎么去除苦味(新鲜百合怎么保存时间长一点)</a></li> <li><a href="https://www.7ttt.cn/387836.html" title="当我面对骄傲的时候作文">当我面对骄傲的时候作文</a></li> <li><a href="https://www.7ttt.cn/217443.html" title="诗经注音及翻译(诗经带注释和译文)">诗经注音及翻译(诗经带注释和译文)</a></li> <li><a href="https://www.7ttt.cn/140130.html" title="鲜榨果汁怎么做才好喝窍门,鲜榨果汁怎么做更好喝?">鲜榨果汁怎么做才好喝窍门,鲜榨果汁怎么做更好喝?</a></li> <li><a href="https://www.7ttt.cn/85148.html" title="seo 优化,什么是SEO优化?">seo 优化,什么是SEO优化?</a></li> <li><a href="https://www.7ttt.cn/58591.html" title="这三个浪漫鬼,一场说走就走的寻仙之旅,像不像年轻时候的你?">这三个浪漫鬼,一场说走就走的寻仙之旅,像不像年轻时候的你?</a></li> <li><a href="https://www.7ttt.cn/127541.html" title="jsp文件怎么打开方式,jsp文件怎么打开?">jsp文件怎么打开方式,jsp文件怎么打开?</a></li> <li><a href="https://www.7ttt.cn/116412.html" title="少女前线皮肤图鉴萌百科(少女前线皮肤)">少女前线皮肤图鉴萌百科(少女前线皮肤)</a></li> <li><a href="https://www.7ttt.cn/173006.html" title="有好的产品怎么去推广(一款好的产品如何推广出去)">有好的产品怎么去推广(一款好的产品如何推广出去)</a></li> <li><a href="https://www.7ttt.cn/376134.html" title="最近抖音火的生僻字读音">最近抖音火的生僻字读音</a></li> <li><a href="https://www.7ttt.cn/141497.html" title="linux用什么远程软件,怎么远程linux系统">linux用什么远程软件,怎么远程linux系统</a></li> <li><a href="https://www.7ttt.cn/113632.html" title="ubuntu 中文输入法,Ubuntu上最好用的中文输入法是什么?">ubuntu 中文输入法,Ubuntu上最好用的中文输入法是什么?</a></li> <li><a href="https://www.7ttt.cn/49656.html" title="小学生作文:爷爷的菜地">小学生作文:爷爷的菜地</a></li> <li><a href="https://www.7ttt.cn/50730.html" title="小学生优秀作文:有趣的鹦鹉">小学生优秀作文:有趣的鹦鹉</a></li> <li><a href="https://www.7ttt.cn/387779.html" title="我最喜欢的一堂语文课优秀作文">我最喜欢的一堂语文课优秀作文</a></li> <li><a href="https://www.7ttt.cn/370471.html" title="2023高考英语作文满分范文">2023高考英语作文满分范文</a></li> <li><a href="https://www.7ttt.cn/43272.html" title="为什么RPG角色扮演游戏现在没人玩了(rpg角色扮演游戏不火了吗)">为什么RPG角色扮演游戏现在没人玩了(rpg角色扮演游戏不火了吗)</a></li> <li><a href="https://www.7ttt.cn/49787.html" title="优秀作文蜘蛛杀手(小学四年级作文蜘蛛杀手)">优秀作文蜘蛛杀手(小学四年级作文蜘蛛杀手)</a></li> <li><a href="https://www.7ttt.cn/620.html" title="优秀班主任事迹报告材料(优秀班主任事迹材料范文2023)">优秀班主任事迹报告材料(优秀班主任事迹材料范文2023)</a></li> </ul> </div> </aside> </div> </div> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> <img src="/wp-content/uploads/2021/09/1630836554-favicon.png" alt="跳跳糖网"> </div> <div class="footer-col footer-col-copy"> <ul class="footer-nav hidden-xs"><li id="menu-item-172" class="menu-item menu-item-172"><a href="https://www.7ttt.cn/jbts">举报投诉</a></li> <li id="menu-item-170" class="menu-item menu-item-170"><a href="https://www.7ttt.cn/bqsm">版权声明</a></li> <li id="menu-item-171" class="menu-item menu-item-171"><a href="https://www.7ttt.cn/mzsm">免责声明</a></li> <li id="menu-item-168" class="menu-item menu-item-168"><a href="https://www.7ttt.cn/tgxz">投稿须知</a></li> <li id="menu-item-169" class="menu-item menu-item-169"><a href="https://www.7ttt.cn/gghz">广告合作</a></li> </ul> <div class="copyright"> <p>Copyright © 2020 跳跳糖网 版权所有 <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">ICP备xxx号</a></p> </div> </div> <div class="footer-col footer-col-sns"> <div class="footer-sns"> </div> </div> </div> </div> </footer> <script>var post_id = 123102;</script> <script> var post_shop_keywords = ""; </script> <script src="https://www.7ttt.cn/wp-content/themes/justnews/js/dd-post.js?v=11"></script> <div class="action action-style-0 action-color-0 action-pos-0"> <div class="action-item gotop j-top"> <i class="wpcom-icon wi action-item-icon"><svg aria-hidden="true"><use xlink:href="#wi-arrow-up-2"></use></svg></i> </div> </div> <link rel='stylesheet' id='yarppRelatedCss-css' href='https://www.7ttt.cn/wp-content/plugins/yet-another-related-posts-plugin/style/related.css?ver=5.30.2' type='text/css' media='all' /> <script type='text/javascript' id='main-js-extra'> /* <![CDATA[ */ var _wpcom_js = {"webp":"","ajaxurl":"https:\/\/www.7ttt.cn\/wp-admin\/admin-ajax.php","theme_url":"https:\/\/www.7ttt.cn\/wp-content\/themes\/justnews","slide_speed":"5000","lightbox":"1","user_card_height":"346","video_height":"482","login_url":"https:\/\/www.7ttt.cn\/login","register_url":"https:\/\/www.7ttt.cn\/register","errors":{"require":"\u4e0d\u80fd\u4e3a\u7a7a","email":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u7535\u5b50\u90ae\u7bb1","pls_enter":"\u8bf7\u8f93\u5165","password":"\u5bc6\u7801\u5fc5\u987b\u4e3a6~32\u4e2a\u5b57\u7b26","passcheck":"\u4e24\u6b21\u5bc6\u7801\u8f93\u5165\u4e0d\u4e00\u81f4","phone":"\u8bf7\u8f93\u5165\u6b63\u786e\u7684\u624b\u673a\u53f7\u7801","terms":"Please read and agree with the terms","sms_code":"\u9a8c\u8bc1\u7801\u9519\u8bef","captcha_verify":"\u8bf7\u70b9\u51fb\u6309\u94ae\u8fdb\u884c\u9a8c\u8bc1","captcha_fail":"\u70b9\u51fb\u9a8c\u8bc1\u5931\u8d25\uff0c\u8bf7\u91cd\u8bd5","nonce":"\u968f\u673a\u6570\u6821\u9a8c\u5931\u8d25","req_error":"\u8bf7\u6c42\u5931\u8d25"},"follow_btn":"<i class=\"wpcom-icon wi\"><svg aria-hidden=\"true\"><use xlink:href=\"#wi-add\"><\/use><\/svg><\/i>\u5173\u6ce8","followed_btn":"\u5df2\u5173\u6ce8","user_card":"1"}; /* ]]> */ </script> <script type='text/javascript' src='https://www.7ttt.cn/wp-content/themes/justnews/js/main.js?ver=6.0.1' id='main-js'></script> <script type='text/javascript' src='https://www.7ttt.cn/wp-includes/js/comment-reply.min.js?ver=5.8.2' id='comment-reply-js'></script> <script type='text/javascript' src='https://www.7ttt.cn/wp-content/plugins/prismatic/lib/highlight/js/highlight-core.js?ver=3.3' id='prismatic-highlight-js'></script> <script type='text/javascript' id='prismatic-highlight-js-after'> hljs.initHighlightingOnLoad(); </script> <script type='text/javascript' src='https://zz.bdstatic.com/linksubmit/push.js?ver=5.8.2' id='baidu_zz_push-js'></script> <script type='text/javascript' id='QAPress-js-js-extra'> /* <![CDATA[ */ var QAPress_js = {"ajaxurl":"https:\/\/www.7ttt.cn\/wp-admin\/admin-ajax.php","ajaxloading":"https:\/\/www.7ttt.cn\/wp-content\/plugins\/qapress\/images\/loading.gif"}; /* ]]> */ </script> <script type='text/javascript' src='https://www.7ttt.cn/wp-content/plugins/qapress/js/scripts.min.js?ver=2.3.1' id='QAPress-js-js'></script> <script type="application/ld+json"> { "@context": { "@context": { "images": { "@id": "http://schema.org/image", "@type": "@id", "@container": "@list" }, "title": "http://schema.org/headline", "description": "http://schema.org/description", "pubDate": "http://schema.org/DateTime" } }, "@id": "https://www.7ttt.cn/123102.html", "title": "怎样制作网页下拉导航菜单?", "images": ["https://www.7ttt.cn/wp-content/uploads/2022/03/image-1805.jpg","https://www.7ttt.cn/wp-content/uploads/2022/03/image-1806.jpg","https://www.7ttt.cn/wp-content/uploads/2022/03/image-1807.jpg"], "description": "1、首先打开sublime编译器,然后创建后缀名为.html的文件,并写入基本网页结构。2、在div容器中写入最基本的菜单结构,使用列表进行构建。3、将列表添加class属性,并使用CSS属性去掉列表和a标签的样式。4、设置第一级...", "pubDate": "2022-03-07T12:51:54", "upDate": "2022-03-07T12:51:54" } </script> <!--对联ad--> <script src='//pc.stgowan.com/pc/beitou-tf.js' id="beitouid" data='s=6880'></script> <style> #HMcoupletDivright .jjjjasdasd { left: 600px!important; } #HMcoupletDivleft .jjjjasdasd { right: 600px!important; } </style> <!--right bottom ad <script src='//pc.stgowan.com/pc/rich-tf.js' id="richid" data='s=6881'></script>--> <!--<style> .wptmall-entry-content-more { height: 989px!important; overflow: hidden!important; } </style> <script> //jQuery(document).ready(function() { setInterval(function() { jQuery('.single.single-post .entry-content').height('auto'); },1000); jQuery('.single.single-post .entry-content').addClass("wptmall-entry-content-more").append('<div class="entry-readmore" style="display: block;"><div class="entry-readmore-btn">点击展开全文</div></div>'); jQuery('.single.single-post .entry-readmore-btn').click(function() { jQuery('.single.single-post .entry-content').removeClass("wptmall-entry-content-more"); jQuery('.single.single-post .entry-readmore').hide(); }) //}) </script>--> </body> </html> <!-- Dynamic page generated in 3.625 seconds. --> <!-- Cached page generated by WP-Super-Cache on 2025-04-26 14:51:33 --> <!-- super cache -->