대부분의 내비게이션 막대는 아래 그림과 같이 수평으로 정렬되므로 어떻게 달성됩니까? 실제로, 그것은 주로 <ul> 태그에 Li의 수평 배열을 사용합니다. 다음은 어떻게 구현되는지 자세히 설명 할 수있는 예입니다.
1. 수평 메뉴 HTML 코드 스키마를 작성하십시오<ul id = menu> <li> <a href = http : //www.baidu.com> baidu.com </a> </a> <li> <a href = // www.vevb.com> jb51.net </a> </li> <li> <a href = http : //www.yo.com> yaho.com> a href = http : //www.google.com class = last> google.com </a> </li> </ul>2 쓰기 CSS 코드
<1> 공통 스타일을 설정하십시오
<스타일 유형 = text/css> #menu {font : 12px verdana, arial, sans-serif; /* 텍스트 크기와 글꼴 스타일 설정*/ 너비 : 100%; } #menu, #menu li {List 스타일 : 없음; / * 기본 목록 기호를 제거하십시오. 기호 */ 패딩 : 0; / * 기본 내부 마진을 제거 */ 마진 : 0; / * 기본 외부 마진을 제거 */ float : 왼쪽; /* 왼쪽에 부유*/ 디스플레이 : 블록;}<2> 링크 스타일을 설정하십시오
<스타일 유형 = text/css> #menu li a {display : block; /* 링크를 블록 레벨 요소로 설정*/ 너비 : 150px; /* 너비 설정*/ 높이 : 30px; /* 높이 설정*/ line-height : 30px; /* 라인 높이를 설정하고 라인 높이와 높이에 대해 동일한 값을 설정하여 단일 라인의 텍스트 라인을 수직으로 중앙으로 중앙으로 설정할 수 있습니다.*/ Text-Align : Center; /* 센터 정렬 텍스트*/ 배경 :#3A4953; /* 배경색 설정*/ 색상 : #fff; /* 텍스트 색상 설정*/ 텍스트 설명 : 없음; /* 밑줄을 제거*/ 테두리 오른쪽 : 1px solid #000; / * 왼쪽에 분배기를 추가 */} </style><3> 연결 호버 효과
<스타일 유형 = text/css> #menu li a : 호버 {배경 : #146c9c; /* 배경 색상 변경*/ 색상 : #ffff; /* 텍스트 색상 변경*/} </style><4> 가장 왼쪽 네비게이션 막대의 오른쪽 상자를 제거하십시오.
<스타일 유형 = text/css> #menu li a.last {Border-Right : 0; /* 왼쪽 테두리를 제거*/} </style>3 완전한 코드
<! docType html> <html> <head> <메타 charset = utf-8> <title> 이미지 프롬프트 효과 </title> <script src = ../jquery-3.3.1.min.js> </script> <스타일 유형 = text/css> #menu {font : 12px verdana, arial, sans-serif; /* 텍스트 크기와 글꼴 스타일 설정*/ 너비 : 100%; } #menu, #menu li {List 스타일 : 없음; / * 기본 목록 기호를 제거하십시오. 기호 */ 패딩 : 0; / * 기본 내부 마진을 제거 */ 마진 : 0; / * 기본 외부 마진을 제거 */ float : 왼쪽; /* float 왼쪽*/ 디스플레이 : 블록; } #menu li a {디스플레이 : 인라인-블록; /* 링크를 블록 레벨 요소로 설정*/ 너비 : 150px; /* 너비 설정*/ 높이 : 30px; /* 높이 설정*/ line-height : 30px; /* 라인 높이를 설정하고 동일한 값을 라인 높이와 높이에 설정하여 한 줄의 텍스트 라인을 수직으로 중심으로 할 수 있도록*/ Text-Align : Center; /* 센터 정렬 텍스트*/ 배경 :#3A4953; /* 배경색 설정*/ 색상 : #fff; /* 텍스트 색상 설정*/ 텍스트 설명 : 없음; /* 밑줄 제거*/ 테두리 오른쪽 : 1px solid #000; / * 왼쪽에 분배기를 추가 */} #menu li a : 호버 {배경 : #146c9c; /* 배경 색상 변경*/ 색상 : #fff; /* 텍스트 변경*/} #menu li A.Last {Border-Right : 0; /* 왼쪽 테두리 제거*/} </style> </head> <body> <ul id = menu> <li> <a href = http : //www.baidu.com> baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> jb51.net </li> <li> href = http : //www.yahoo.com> yahoo.com </a> </li> <li> <a href = http : //www.google.com class = last> google.com </a> </ul> </body> </html>온라인으로 실행하십시오
팁 : 먼저 코드를 수정 한 다음 실행할 수 있습니다.
요컨대, 수평으로 배열하는 데 가장 필요한 것은 다음과 같습니다. <ui> 태그의 주요 스타일은 표시됩니다 : Balock;
<li>의 주요 스타일은 디스플레이입니다 : 인라인-밸런락, 플로트 : 왼쪽, 목록 스타일 : 없음;
이것은 HTML의 태그에서 Li 수평 배열의 구현 예에 관한 기사입니다. 관련 HTML Li 수평 배열 내용은 이전 기사의 이전 기사 또는 다음 관련 기사를 검색하십시오. 나는 모두가 앞으로 Wulin.com을 지원하기를 바랍니다!