HTML 버튼을 만드는 데 사용할 수 있는 태그(그림과 텍스트가 포함된 자세한 설명)
- yulia원래의
- 2018-10-26 15:14:5910496검색
페이지를 자주 작성하거나 웹 사이트를 자주 탐색하는 사람들은 버튼에 익숙할 것입니다. HTML과 CSS를 배우는 친구들, HTML 버튼 코드를 작성할 수 있나요? 버튼을 만드는 데 어떤 태그를 사용할 수 있나요? 이 기사에서는 예제를 기반으로 HTML 버튼 스타일을 만드는 세 가지 태그(방법)를 소개합니다. 이는 특정 참조 가치가 있으며 관심 있는 친구들이 살펴볼 수 있습니다.
버튼을 만들려면 HTML과 CSS의 특정 기반이 필요합니다. 확실하지 않은 경우 PHP 중국어 웹사이트의 관련 기사를 참조하거나 HTML 비디오 튜토리얼, CSS 비디오 튜토리얼을 방문하세요. 도움이 되기를 바랍니다. 너.
방법 1: 버튼 태그
예시 설명:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.button{border: none;background: green;padding: 15px 30px;font-size: 20px;color: white;cursor: pointer;}
</style>
</head>
<body>
<button class="button">button</button>
</body>
</html>효과는 다음과 같습니다. 그림과 같이:
방법 2: 태그
태그는 버튼 자체를 하이퍼링크로 만들 수도 있습니다. 버튼을 마우스로 클릭하면 페이지 점프 효과가 나타납니다.
설명 예: a 태그를 사용하여 버튼을 만들고, 버튼 배경색을 빨간색으로 설정하고, 글꼴 크기를 25px로 설정하고, text-장식: 없음을 사용하여 a 태그 밑줄을 제거하고, border-radius를 사용합니다. 버튼이 둥근 모서리 효과로 나타나도록 하려면 특정 코드는 다음과 같습니다.
Type 속성을 통해 입력 데이터를 설정할 수 있으며, type을 submit으로 설정하면 submit 버튼을 나타낸다.
인스턴스 설명: CSS를 사용하여 제출 버튼을 아름답게 만들고, 배경색을 분홍색, 글꼴 색상을 검정색, 글꼴 크기를 30px로 설정하고, border-radius: 20px를 사용하여 둥근 모서리를 설정합니다. 재설정 재설정 버튼에 대한 설정은 없습니다:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{margin: 50px 100px;}
.a{text-decoration: none;padding: 20px 35px;background: red;font-size: 25px;border-radius: 10px;color: white;}
</style>
</head>
<body>
<a href="#" class="a">按钮a</a>
</body>
</html>렌더링:
html 버튼을 만드는 방법에는 세 가지가 있습니다. 하나는 버튼 태그이고, 하나는 a입니다. 태그이고 다른 하나는 입력 태그입니다. (입력 태그는 제출 버튼과 재설정 버튼의 두 가지 유형으로 나뉩니다.) 선택할 특정 태그는 개인 습관과 업무 요구 사항에 따라 다릅니다. 위에서는 어떤 태그를 사용하여 버튼을 만들 수 있는지 소개했는데, 초보자분들도 직접 해보셔야 더 예쁜 버튼을 만들 수 있을 것 같아요! 더 많은 관련 튜토리얼을 보려면
HTML5 정식 버전 매뉴얼위 내용은 HTML 버튼을 만드는 데 사용할 수 있는 태그(그림과 텍스트가 포함된 자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!