HTML-Navigationsproduktion der ersten Ebene

Heute werde ich Ihnen zeigen, wie Sie eine einfache Navigationsleiste erstellen:

Schritt 1: Führen Sie das CSS-Stylesheet ein, erstellen Sie eine neue Ebene mit der ID nav und verwenden Sie

,
• , -Tag, um den fertigen Effekt zu erstellen.

  nbsp;html>
      
          <meta>
          <title></title>
          <link>
      
      
          <p>
              </p>

                  
  • 首页
                                   
  • 首页
                                   
  • 首页
                                   
  • 首页
                                   
  • 首页
              
               

  Der zweite Schritt besteht darin, den CSS-Stil festzulegen:

  1. Legen Sie die Attribute von nav fest

  #nav{
      width: 500px;
      height: 50px;
      border: 1px solid red;
  }

  Der Anzeigeeffekt ist wie folgt:

  　

  2. Löschen Sie den Punkt

  -Tag >

  #nav ul{
  	list-style: none;
  }

  3. Legen Sie die Attribute des -Tags fest 🎜>

  　4. Stellen Sie den Mouseover-Effekt ein

  #nav ul li a{
  	width: 98px;
  	height: 50px;
  	float: left;
  	border: 1px solid red;
  	text-align: center;
  	line-height: 50px;
  	text-decoration: none;
  }

  Endgültiger Effekt:

  #nav ul li a:hover{
  	background-color: #ABCDEF;
  }

  Vollständiger HTML-Codeteil:

  

  Vollständiger CSS-Codeteil:

  nbsp;html>
  
  	
  		<meta>
  		<title></title>
  		<link>
  	
  	
  		<p>
  			</p>

  • 首页
  • 首页
  • 首页
  • 首页
  • 首页

  Weitere Artikel zur HTML-Navigationsproduktion der ersten Ebene finden Sie auf der chinesischen PHP-Website!