HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? 전문가가 HTML 및 CSS로 드롭다운 메뉴를 만드는 방법을 알려드립니다.-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? 전문가가 HTML 및 CSS로 드롭다운 메뉴를 만드는 방법을 알려드립니다.

云罗郡主

Nov 01, 2018 pm 04:09 PM

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>

로그인 후 복사

효과는 다음과 같습니다.

HTML 드롭다운 메뉴를 만드는 방법은 무엇입니까? 전문가가 HTML 및 CSS로 드롭다운 메뉴를 만드는 방법을 알려드립니다.