HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴에 대한 코드 예제 소개-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴에 대한 코드 예제 소개

寻∝梦

Sep 01, 2018 pm 03:10 PM

html select

이 글에서는 주로 HTML 선택 태그 드롭다운 메뉴를 사용하는 방법에 대한 예제를 소개합니다. 또한 일부 HTML 웹사이트의 드롭다운 메뉴 사용법에 대한 글도 함께 살펴보겠습니다.

HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴에 대한 코드 예제 소개

먼저 html 드롭다운 메뉴의 코드가 무엇인지 알아야 합니다.

분명히 select 요소는 단일 선택 또는 다중 선택 메뉴를 생성할 수 있습니다.

팁: 선택 요소는 양식에서 사용자 입력을 받아들이는 데 사용할 수 있는 양식 컨트롤입니다.

드롭다운 메뉴 코드의 예를 살펴보겠습니다.

4가지 옵션이 있는 선택 목록 만들기:

<select>
  <option value ="volvo">PHP中文网</option>
  <option value ="saab">百度</option>
  <option value="opel">腾讯</option>
  <option value="audi">新浪</option>
</select>

로그인 후 복사

이렇게 하면 간단한 드롭다운 메뉴가 완성됩니다. 효과:

HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴에 대한 코드 예제 소개

이것은 가장 기본적인 CSS 스타일을 추가하면 이 양식을 매우 아름답게 만들 수 있습니다. 기본적으로 이 작업을 수행하는 웹사이트는 없습니다. 그들은 직접 시도해보고 싶을 때만 수행합니다.

이제 실제 웹사이트에서는 이런 종류의 드롭다운 상자가 어떻게 보이는지 살펴보겠습니다.

전체 코드 예는 다음과 같습니다.

<!DOCTYPE html>
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> .a{ width: 205px; } .b{ width: 200px; height: 50px; background-color: limegreen; text-align: center; 
line-height: 50px; color: #ffffff; } .c{ width: 200px; height: 300px; background-color: gainsboro; display: none; 
/*visibility: hidden;*/ } ul{ list-style: none; margin-left: -40px; } ul li{ line-height: 50px; display: block; 
width: 200px; text-align: center; } .a:hover{ cursor: pointer; } .a:hover .c{ display: block; } .a:hover 
.b{ background-color: green; } li:hover{ background-color: gray; color: #FFFFFF; } 
</style> 
</head> 
<body> 
<div class="a"> 
<div class="b">PHP中文网</div> 
<div class="c"> 
<ul> <li>HTML在线学习</li>
<li>PHP在线学习</li>
<li>python在线学习</li> 
<li>html5在线学习</li> 
</ul> 
</div> </div> 
</body>
</html>

로그인 후 복사

좀 더 많지만 효과는 매우 좋을 수 있습니다. 브라우저에 어떻게 표시되는지 살펴보겠습니다.

HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴에 대한 코드 예제 소개