HTML 1단계 탐색 제작

오늘은 간단한 네비게이션 바를 만드는 방법을 공유하겠습니다.

1단계: CSS 스타일 시트를 소개하고 nav라는 ​​ID로 새 레이어를 만든 다음

,
• , 태그를 사용하여 완성된 효과를 만듭니다.

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

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

  두 번째 단계는 CSS 스타일을 설정하는 것입니다.

  1. nav 속성을 설정합니다

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

  표시 효과는 다음과 같습니다.

  　

  2. 앞의 점

  을 지웁니다.

  #nav ul{
  	list-style: none;
  }

  3.

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

  에 포함된 태그의 속성을 설정합니다.

  4. 마우스 슬라이드 오버 효과 설정

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

  최종 효과:

  

  전체 HTML 코드 부분:

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

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

  CSS 스타일 코드 부분 완성:

  *{
  	margin: 0;
  	padding: 0;
  }
  #nav{
  	width: 500px;
  	height: 50px;
  	border: 1px solid red;
  	margin: 30px;
  }
  
  #nav ul{
  	list-style: none;
  }
  #nav ul li a{
  	width: 98px;
  	height: 50px;
  	float: left;
  	border: 1px solid red;
  	text-align: center;
  	line-height: 50px;
  	text-decoration: none;
  }
  
  #nav ul li a:hover{
  	background-color: #ABCDEF;
  }

  결제해 주세요 HTML 1단계 탐색 제작 PHP 중국어 웹사이트와 관련된 더 많은 기사에 주목하세요!