How to do html horizontal navigation-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to do html horizontal navigation

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Nov 10, 2021 am 10:34 AM

csshtml

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 inside 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:
  
  ##2. Add a navigation tag, create a new
  tag in the tag, and then add a
  - tags to the tags. As shown in the picture:
    
    3. Add text in the
  - tag. Add the content to be displayed in the new
  - . As shown in the figure:
    
    4. Create a style tag, and create a new after the tag. Label. <p></p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/918/441/651/1636507772238439.png?x-oss-process=image/resize,p_40" 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><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/514/178/871/1636507796753077.png?x-oss-process=image/resize,p_40" class="lazy" title="1636507796753077.png" alt="How to do html horizontal navigation"/>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><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/157/949/421/1636507843494356.png?x-oss-process=image/resize,p_40" class="lazy" title="1636507843494356.png" alt="How to do html horizontal navigation"/>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><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/741/472/608/1636507853324262.png?x-oss-process=image/resize,p_40" class="lazy" title="1636507853324262.png" alt="How to do html horizontal navigation"/>All codes: <p><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>横向导航菜单</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>公司产品</li> <li>关于我们</li> <li>公司介绍</li> </ul> </body> </html></pre>For more programming-related knowledge, please visit: <p>Programming Video<a href="https://www.php.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

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