php|python|golang|C语言|XMl|前端|数据库|运维|工具类|微信|JAVA|

怎么做html横向导航

html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">

做html横向导航方法：1、通过ul标签里li标签搭建导航菜单（竖向）；2、给li标签添加“list-style:none”样式来去掉导航菜单前的小黑点；3、给li标签添加“float: left;”样式让导航栏横向排列即可。

怎么做html横向导航

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

思路：创建

    标签，然后在
      标签里面创建
    • 标签，最后设置
    • 标签为浮动。

      做html横向导航的方法：

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

      1110.02.png

      2、添加导航标签，在标签里新建一个

        标签，然后在
          标签里添加几个
        • 标签。如图：

          1110.03.png

          3、在

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

          1110.04.png

          4、创建样式标签，在标签后新建一个<style type="text/<a href="/tag-news-name-css-p-1.html">css</a>"></style>标签。</p><p><img src="/Uploads/news/56c370a46b72fc1de0aa9cd5a2022662/1636507772238439.png" title="1636507772238439.png" alt="1110.05.png"></p><p>5、创建横向导航的样式，在<style>标签里添加一个样式类为：.nav li{}，然后再.nav li类中设置样式背景颜色为红色，浮动为左浮动，内边框上下为8px左右为15px，列表属性为none，字体颜色为白色。</p><p>样式代码为：</p><pre>.nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; }</pre><p> <img src="/Uploads/news/56c370a46b72fc1de0aa9cd5a2022662/1636507796753077.png" title="1636507796753077.png" alt="1110.06.png"></p><p>6、引用样式类。在<ul>标签内添加 class="nav"，就可以让nav下的<li>标签引用到设置好的样式类。如图：</p><p><img src="/Uploads/news/56c370a46b72fc1de0aa9cd5a2022662/1636507843494356.png" title="1636507843494356.png" alt="1110.07.png"></p><p>7、查看效果。把html文件保存后，使用浏览器打开即可看到横向导航菜单效果。如图：</p><p><img src="/Uploads/news/56c370a46b72fc1de0aa9cd5a2022662/1636507853324262.png" title="1636507853324262.png" alt="1110.01.png"></p><p>所有代码：</p><pre><!DOCTYPE<a href="/tag-news-name-+html-p-1.html"> html</a>> <html> <head> <meta charset="UTF-8"> <title>横向导航菜单</title> <style type="text/<a href="/tag-news-name-css-p-1.html">css</a>"> .nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; } </style> </head> <body> <ul class="nav"> <li>首页</li> <li>新闻</li> <li>公司产品</li> <li>关于我们</li> <li>公司介绍</li> </ul> </body> </html></pre><p>更多编程相关知识，请访问：编程视频！！</p> <p>以上就是怎么做html横向导航的详细内容，更多请关注www.sxiaw.com其它相关文章！</p> <button type="button" class="ask_text test-iframe-handle"> </button> </div> </article> <aside class="swnetnews"> <div class="lis"> <span><i>前端 热点</i></span> <ul> <li><a href="/doc/6736.html" title="vscode提示无法在只读编辑器中编辑" target="_blank">vscode提示无法在只读编辑器中编辑</a></li><li><a href="/doc/9632.html" title="win10关机键失灵了怎么办" target="_blank">win10关机键失灵了怎么办</a></li><li><a href="/doc/144.html" title="phpstudy打不开localhost怎么办" target="_blank">phpstudy打不开localhost怎么办</a></li><li><a href="/doc/5825.html" title="在虚拟主机中如何用phpmyadmin" target="_blank">在虚拟主机中如何用phpmyadmin</a></li><li><a href="/doc/5724.html" title="首次使用phpmyadmin如何配置" target="_blank">首次使用phpmyadmin如何配置</a></li><li><a href="/doc/4565.html" title="实例讲解oracle c怎么使用（教程）" target="_blank">实例讲解oracle c怎么使用（教程）</a></li><li><a href="/doc/3764.html" title="oracle怎么查询行数据" target="_blank">oracle怎么查询行数据</a></li><li><a href="/doc/10623.html" title="在QQ字体管家app中字体进行替换的具体操作步骤" target="_blank">在QQ字体管家app中字体进行替换的具体操作步骤</a></li><li><a href="/doc/10426.html" title="在新浪微博中保存视频至手机的方法介绍" target="_blank">在新浪微博中保存视频至手机的方法介绍</a></li><li><a href="/doc/7830.html" title="教你轻松获得支付宝体育服务红包的图文教程" target="_blank">教你轻松获得支付宝体育服务红包的图文教程</a></li><li><a href="/doc/3207.html" title="如何在Golang环境下安装库" target="_blank">如何在Golang环境下安装库</a></li><li><a href="/doc/9474.html" title="不会做图表？十个Python数据可视化库来帮你！" target="_blank">不会做图表？十个Python数据可视化库来帮你！</a></li><li><a href="/doc/1074.html" title="如何精通golang？建议和技巧分享" target="_blank">如何精通golang？建议和技巧分享</a></li><li><a href="/doc/7456.html" title="PHP日期时间运用七：获取某个国家的日期和星期" target="_blank">PHP日期时间运用七：获取某个国家的日期和星期</a></li><li><a href="/doc/7413.html" title="简析怎么通过PHP类对整数数组进行排序" target="_blank">简析怎么通过PHP类对整数数组进行排序</a></li><li><a href="/doc/7155.html" title="新鲜的一轮PHP面试问题总结" target="_blank">新鲜的一轮PHP面试问题总结</a></li> </ul> </div> </aside> </main> <script> // first, find all the div.code blocks document.querySelectorAll('pre').forEach(el => { // then highlight each hljs.highlightElement(el); hljs.lineNumbersBlock(el); }); </script> <div id="footer"> <div class="w1200"> <p class="tips_text">本网站为非赢利性站点，本网站所有内容均来源于互联网相关站点自动搜索采集信息，相关链接已经注明来源。</p> <p class="tips_text">Copyright © 2004-2018 https://m.sxiaw.com/. All Rights Reserved.<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?716b3e81948f3acc7a5d3e276a92f5a9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023001793号-1</a></p> </div> </div> </body> </html>