HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴에 대한 코드 예제 소개
- 寻∝梦원래의
- 2018-09-01 15:10:42111900검색
이 글에서는 주로 HTML 선택 태그 드롭다운 메뉴를 사용하는 방법에 대한 예제를 소개합니다. 또한 일부 HTML 웹사이트의 드롭다운 메뉴 사용법에 대한 글도 함께 살펴보겠습니다.
먼저 html 드롭다운 메뉴의 코드가 무엇인지 알아야 합니다.
분명히 select 요소는 단일 선택 또는 다중 선택 메뉴를 생성할 수 있습니다.
팁: 선택 요소는 양식에서 사용자 입력을 받아들이는 데 사용할 수 있는 양식 컨트롤입니다.
드롭다운 메뉴 코드의 예를 살펴보겠습니다.
4가지 옵션이 있는 선택 목록 만들기:
<select> <option value ="volvo">PHP中文网</option> <option value ="saab">百度</option> <option value="opel">腾讯</option> <option value="audi">新浪</option> </select>
이렇게 하면 간단한 드롭다운 메뉴가 완성됩니다. 효과:
이것은 가장 기본적인 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에서 문서 객체란 무엇인가요? 문서 객체의 이해를 돕기 위한 글
HTML에 이미지를 추가하는 코드는 무엇인가요? HTML에 이미지 경로를 올바르게 추가하는 방법은 무엇입니까?
위 내용은 HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? HTML 드롭다운 메뉴에 대한 코드 예제 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!