HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? 전문가가 HTML 및 CSS로 드롭다운 메뉴를 만드는 방법을 알려드립니다.
- 云罗郡主원래의
- 2018-11-01 16:09:1526212검색
html드롭다운 메뉴를 만드는 방법은 무엇인가요? HTML 드롭다운 메뉴 코드는 무엇입니까? 이제 막 시작하는 초보자에게는 이러한 내용이 명확하지 않습니다. 다음 전문가가 HTML 및 CSS로 드롭다운 메뉴를 만드는 방법을 알려줄 것입니다.
많은 사람들이 탐색 위에 마우스를 올리면 드롭다운 메뉴가 나타나는 문제를 겪게 되며, 일반적으로 드롭다운 메뉴가 나타나며 사용자는 옵션 중 하나를 클릭할 수 있습니다. 다른 URL에 액세스하려면
1: 먼저 Notepad++를 엽니다. Notepad++를 사용하는 경우 HTML 창 상단의 "언어" 메뉴를 "H"로 설정하세요. [추천 학습: Html5 tutorial]
Two: 드롭다운 메뉴 코드를 생성하고, 다음 코드를 입력하여 드롭다운 메뉴의 크기와 색상을 결정하고, "#"을 사용할 숫자로 바꾸십시오. 숫자가 높을수록 드롭다운 메뉴가 커집니다. "배경 색상" 및 "색상" 값을 원하는 색상(또는 HTML 색상 코드)으로 바꿀 수도 있습니다.
Three: 드롭다운 메뉴에 링크를 넣으려는 것을 나타냅니다. 드롭다운 메뉴에 링크를 추가할 수도 있으며, 암호.
Four: 드롭다운 메뉴의 모양을 만듭니다. 드롭다운 메뉴의 크기는 물론 다른 웹페이지 요소의 위치와 색상도 결정할 수 있습니다. "최소 너비" 부분의 "#"을 숫자(예: 250)로 바꾸고 "배경색" 헤더를 원하는 색상으로 변경하세요.
다섯 번째: 드롭다운 메뉴의 내용에 세부정보를 추가하세요. 드롭다운 메뉴의 텍스트 색상과 드롭다운 메뉴 버튼의 크기를 다룰 때 "#"을 픽셀 수로 지정하여 버튼 크기를 지정합니다.
여섯: 드롭다운 메뉴의 마우스 오버 작업을 편집합니다. 드롭다운 메뉴 버튼 위에 마우스를 올리면 여러 색상을 변경해야 합니다. 첫 번째 "배경색" 줄은 다음을 나타냅니다. 드롭다운 메뉴 나타나는 색상 변경을 선택합니다.
Seven: 다음으로 드롭다운 버튼의 이름을 만듭니다. 다음 코드를 입력하고 "name"을 원하는 드롭다운 버튼의 이름(예: menu)으로 바꾸세요. ):
< div class = “dropdown” > < button class = “dropbtn” >名称< / button > < div class = “dropdown-content” ># 🎜🎜#8: 드롭다운 메뉴에 링크를 추가하세요. 드롭다운 메뉴의 각 하위 옵션은 웹사이트의 페이지나 외부 웹사이트를 드롭다운 메뉴에 추가할 수 있습니다. http://www.php.cn/이 링크 이름을 링크 주소(따옴표 유지)로 바꾸고 "이름"이 제대로 작동하는지 확인하세요. 코드 예:
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: black;
color: white;
padding: #px;
font-size: #px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: lightgrey;
min-width: #px;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: #px #px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: white;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: grey;}
</style>
</head>
<body>
<div class="dropdown">
<button class="dropbtn">Name</button>
<div class="dropdown-content">
<a href="http://www.php.cn/">Name</a>
<a href="http://www.php.cn/">Name</a>
<a href="http://www.php.cn/">Name</a>
</div>
</div>
</body>
</html>효과는 다음과 같습니다.
HTML5 온라인 매뉴얼에 대해 더 알고 싶으시면 PHP 중국어 웹사이트를 주목해주세요.
위 내용은 HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? 전문가가 HTML 및 CSS로 드롭다운 메뉴를 만드는 방법을 알려드립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!