1.  \n  \n
    2. 首頁<\/li>  \n
    3. 新聞<\/li>  \n
    4. 公司產(chǎn)品<\/li>  \n
    5. 關(guān)于我們<\/li>  \n
    6. 公司介紹<\/li> \n<\/ul>\n<\/body>\n<\/html><\/pre>For more programming-related knowledge, please visit:

      Programming Video! ! <\/style>\n<\/title>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>"}

      亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

      Home Web Front-end HTML Tutorial How to do html horizontal navigation

      How to do html horizontal navigation

      Nov 10, 2021 am 10:34 AM
      css html

      How to do HTML horizontal navigation: 1. Build a navigation menu (vertical) through the li tag in the ul tag; 2. Add the "list-style:none" style to the li tag to remove the little black in front of the navigation menu Click; 3. Add the "float: left;" style to the li tag to arrange the navigation bar horizontally.

      How to do html horizontal navigation

      The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

      Idea: Create the

        tag, then create the
      • tag inside the
          tag, and finally set the
        • tag to float.

          How to do html horizontal navigation:

          1. Create a new html page, open the html editing software, and create a new html page. As shown in the picture:

          How to do html horizontal navigation

          ##2. Add a navigation tag, create a new
            tag in the tag, and then add a
              Add several
            • tags to the tags. As shown in the picture:

              How to do html horizontal navigation

              3. Add text in the
            • tag. Add the content to be displayed in the new
            • . As shown in the figure:

              How to do html horizontal navigation

              4. Create a style tag, and create a new after the tag. Label. <p></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/918/441/651/1636507772238439.png" class="lazy" title="1636507772238439.png" alt="How to do html horizontal navigation"></p>5. Create a horizontal navigation style, add a style class in the <style> tag: .nav li{}, and then set it in the .nav li class The style background color is red, the float is left float, the inner border is 8px from top to bottom and 15px from left to right, the list attribute is none, and the font color is white. <p>The style code is: <p><pre class='brush:php;toolbar:false;'>.nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; }</pre></p> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/514/178/871/1636507796753077.png" class="lazy" title="1636507796753077.png" alt="How to do html horizontal navigation"/></p>6. Reference style class. Add class="nav" in the <ul> tag, so that the <li> tag under nav can refer to the set style class. As shown in the picture: <p></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/157/949/421/1636507843494356.png" class="lazy" title="1636507843494356.png" alt="How to do html horizontal navigation"/></p>7. Check the effect. After saving the html file, open it with a browser to see the horizontal navigation menu effect. As shown in the picture: <p></p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/741/472/608/1636507853324262.png" class="lazy" title="1636507853324262.png" alt="How to do html horizontal navigation"/></p>All codes: <p><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>橫向?qū)Ш讲藛?lt;/title> <style type="text/css"> .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>公司產(chǎn)品</li> <li>關(guān)于我們</li> <li>公司介紹</li> </ul> </body> </html></pre>For more programming-related knowledge, please visit: <p>Programming Video<a href="http://ipnx.cn/course.html" target="_blank" textvalue="編程視頻">! ! </style>

        The above is the detailed content of How to do html horizontal navigation. For more information, please follow other related articles on the PHP Chinese website!

        Statement of this Website
        The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

        Hot AI Tools

        Undress AI Tool

        Undress AI Tool

        Undress images for free

        Undresser.AI Undress

        Undresser.AI Undress

        AI-powered app for creating realistic nude photos

        AI Clothes Remover

        AI Clothes Remover

        Online AI tool for removing clothes from photos.

        Clothoff.io

        Clothoff.io

        AI clothes remover

        Video Face Swap

        Video Face Swap

        Swap faces in any video effortlessly with our completely free AI face swap tool!

        Hot Tools

        Notepad++7.3.1

        Notepad++7.3.1

        Easy-to-use and free code editor

        SublimeText3 Chinese version

        SublimeText3 Chinese version

        Chinese version, very easy to use

        Zend Studio 13.0.1

        Zend Studio 13.0.1

        Powerful PHP integrated development environment

        Dreamweaver CS6

        Dreamweaver CS6

        Visual web development tools

        SublimeText3 Mac version

        SublimeText3 Mac version

        God-level code editing software (SublimeText3)

        CSS transitions tutorial CSS transitions tutorial Jul 26, 2025 am 09:30 AM

        CSStransitionsenablesmoothpropertychangeswithminimalcode,idealforhovereffectsandinteractivefeedback.1.Usethesyntaxtransition:propertydurationtiming-functiondelay;todefinetransitions,liketransition:background-color0.3sease0.1s;.2.Specifytransition-pro

        How to change text color in CSS? How to change text color in CSS? Jul 27, 2025 am 04:25 AM

        To change the text color in CSS, you need to use the color attribute; 1. Use the color attribute to set the text foreground color, supporting color names (such as red), hexadecimal codes (such as #ff0000), RGB values (such as rgb(255,0,0)), HSL values (such as hsl(0,100%,50%)), and RGBA or HSLA with transparency (such as rgba(255,0,0,0.5)); 2. You can apply colors to any element containing text, such as h1 to h6 titles, paragraph p, link a (note the color settings of different states of a:link, a:visited, a:hover, a:active), buttons, div, span, etc.; 3. Most

        How to compile SCSS to CSS? How to compile SCSS to CSS? Jul 27, 2025 am 01:58 AM

        InstallDartSassvianpmafterinstallingNode.jsusingnpminstall-gsass.2.CompileSCSStoCSSusingthecommandsassinput.scssoutput.css.3.Usesass--watchinput.scssoutput.csstoauto-compileonsave.4.Watchentirefolderswithsass--watchscss:css.5.Usepartialswith_prefixfo

        Essential HTML Tags for Beginners Essential HTML Tags for Beginners Jul 27, 2025 am 03:45 AM

        To get started with HTML quickly, you only need to master a few basic tags to build a web skeleton. 1. The page structure is essential, and, which is the root element, contains meta information, and is the content display area. 2. Use the title. The higher the level, the smaller the number. Use tags to segment the text to avoid skipping the level. 3. The link uses tags and matches the href attributes, and the image uses tags and contains src and alt attributes. 4. The list is divided into unordered lists and ordered lists. Each entry is represented and must be nested in the list. 5. Beginners don’t have to force memorize all tags. It is more efficient to write and check them while you are writing. Master the structure, text, links, pictures and lists to create basic web pages.

        Describe different CSS units and when to use them Describe different CSS units and when to use them Jul 27, 2025 am 04:24 AM

        In web development, the choice of CSS units depends on design requirements and responsive performance. 1. Pixels (px) are used to fix sizes such as borders and icons, but are not conducive to responsive design; 2. Percentage (%) is adjusted according to the parent container, suitable for streaming layout but attention to context dependence; 3.em is based on the current font size, rem is based on the root element font, suitable for elastic fonts and unified theme control; 4. Viewport units (vw/vh/vmin/vmax) are adjusted according to the screen size, suitable for full-screen elements and dynamic UI; 5. Auto, inherit, initial and other values are used to automatically calculate, inherit or reset styles, which helps to flexibly layout and style management. The rational use of these units can improve page flexibility and responsiveness.

        How to create a link in HTML? How to create a link in HTML? Jul 27, 2025 am 02:30 AM

        Use tags to create links using HTML. 1. The href attribute specifies the target URL, such as an external website or local file; 2. The target attribute defines the opening location, and _blank is opened in a new tab page. It is recommended to cooperate with rel="noopener" to improve security; 3. You can link to the anchor point, email (mailto:), and phone (tel:) in the page. The basic syntax is link text, and you can adjust the attributes according to your needs.

        How to purge unused CSS? How to purge unused CSS? Jul 27, 2025 am 02:47 AM

        UseautomatedtoolslikePurgeCSSorUnCSStoscanandremoveunusedCSS;2.IntegratepurgingintoyourbuildprocessviaWebpack,Vite,orTailwind’scontentconfiguration;3.AuditCSSusagewithChromeDevToolsCoveragetabbeforepurgingtoavoidremovingneededstyles;4.Safelistdynamic

        What is the name attribute in an input tag for? What is the name attribute in an input tag for? Jul 27, 2025 am 04:14 AM

        Thenameattributeinaninputtagisusedtoidentifytheinputwhentheformissubmitted;itservesasthekeyinthekey-valuepairsenttotheserver,wheretheuser'sinputisthevalue.1.Whenaformissubmitted,thenameattributebecomesthekeyandtheinputvaluebecomesthevalueinthedatasen

        See all articles
        1. <var id="us19j"><thead id="us19j"></thead></var>