HTML 가로 탐색을 수행하는 방법
- WBOY원래의
- 2021-11-10 10:34:0038837검색
HTML 가로 탐색을 만드는 방법: 1. ul 태그의 li 태그를 통해 탐색 메뉴(세로)를 만듭니다. 2. li 태그에 "list-style:none" 스타일을 추가하여 작은 검은 점을 제거합니다. 3. 네비게이션 바를 수평으로 정렬하려면 li 태그에 "float: left;" 스타일을 추가하기만 하면 됩니다.
이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.
아이디어:
- 태그를 만든 다음
- 태그를 만듭니다.
html 가로 탐색 방법:
1. 새 html 페이지를 만들고 html 편집 소프트웨어를 열고 새 html 페이지를 만듭니다. 그림에 표시된 대로
2. 탐색 태그를 추가하고
태그에 새- 태그를 만든 다음
- 태그에 텍스트를 추가합니다. 새
- 에 표시할 콘텐츠를 추가합니다. 그림과 같이
4. 스타일 태그를 생성하고
태그 뒤에 새로운 <style type="text/css"></style> 태그를 생성합니다. <p></p> <p><img src="https://img.php.cn/upload/image/918/441/651/1636507772238439.png" title="1636507772238439.png" alt="HTML 가로 탐색을 수행하는 방법"></p>5. 수평 탐색 스타일을 생성하고 <style> 태그에 스타일 클래스(.nav li{})를 추가한 다음 .nav li 클래스의 스타일 배경색을 빨간색으로 설정하고 부동 왼쪽 float 의 경우 내부 테두리는 위에서 아래로 8px, 왼쪽에서 오른쪽으로 15px이고 목록 속성은 없음이며 글꼴 색상은 흰색입니다. <p>스타일 코드는 <p><pre class="brush:css;toolbar:false;">.nav li{ background-color: red; padding: 8px 15px; float: left; list-style: none; color:#fff; }</pre><p><img src="https://img.php.cn/upload/image/514/178/871/1636507796753077.png" title="1636507796753077.png" alt="HTML 가로 탐색을 수행하는 방법"/>6입니다. nav 아래의 <li> 태그가 설정된 스타일 클래스를 참조할 수 있도록 <ul> 태그에 class="nav"를 추가합니다. 사진과 같이: <p><p><img src="https://img.php.cn/upload/image/157/949/421/1636507843494356.png" title="1636507843494356.png" alt="HTML 가로 탐색을 수행하는 방법"/> 7. 효과를 확인하세요. html 파일을 저장한 후 브라우저로 열어 가로 탐색 메뉴 효과를 확인하세요. 그림에 표시된 대로: <p><p><img src="https://img.php.cn/upload/image/741/472/608/1636507853324262.png" title="1636507853324262.png" alt="HTML 가로 탐색을 수행하는 방법"/>모든 코드: <p><pre class="brush:html;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>더 많은 프로그래밍 관련 지식을 보려면 <p>프로그래밍 비디오<a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">를 방문하세요! ! </style>
- 태그 ;/li>태그. 그림과 같이
3.
- 태그 안에
위 내용은 HTML 가로 탐색을 수행하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML에서 테이블 글꼴을 설정하는 방법다음 기사：HTML에서 테이블 글꼴을 설정하는 방법