html 버튼 태그 스타일을 설정하는 방법은 무엇입니까? HTML 버튼 태그 스타일 소개
- 寻∝梦원래의
- 2018-09-03 17:12:3922257검색
이 글에서는 주로 HTML 버튼 태그의 스타일 설정과 HTML 버튼 태그의 미화 스타일을 소개합니다. 다음으로 이 글을 함께 읽어보겠습니다.
우선 , HTML에서 버튼 태그의 스타일 설정을 소개하겠습니다:
일반 버튼 설정:
입력의 유형 속성 일반 버튼을 생성하려면 요소가 "버튼"으로 설정됩니다. 버튼에 표시되는 텍스트는 value 속성의 값입니다. value 속성이 제공되지 않으면 빈 버튼이 생성됩니다. 예:
<input type="button" value="立即购买">
효과는 분명합니다. 이는 기본 일반 버튼 설정입니다.
기본적으로 일반 버튼을 클릭해도 반응이 없습니다. 따라서 일반 버튼에 대한 이벤트를 등록하고 해당 핸들러 함수를 수동으로 작성해야 합니다. 위 버튼을 클릭했을 때 폼이 제출되도록 하려면 해당 버튼에 대한 onClick 이벤트를 등록해야 합니다. 예:
<form name="buy" action="form.html" method="post">
<button onClick="submitForm(buy)">立即购买</button>
</form>이제 버튼을 클릭하면 onClick 이벤트가 트리거되고 이벤트 처리 함수 submitForm(buy)이 호출됩니다. 매개변수 buy는 양식의 name 속성 값입니다. 처리됩니다. 버튼을 클릭한 후 양식을 제출하려면 이벤트 핸들러 함수에서 양식 개체의 submit() 메서드를 호출하면 됩니다.
function submitForm(f) {
f.submit();
}#🎜🎜 #이것은 기본 설정입니다. 이제 html 버튼 태그의 스타일 설정을 살펴보겠습니다.
보여드리겠습니다. 전체 코드 예: #🎜 🎜#<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.div {
display: inline-block;
padding: .3em .5em;
background-image: linear-gradient(#ddd, #bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px black;
color:white;
font-weight: bold;
}
.div:active{
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}
</style>
</head>
<body>
<div class="div">Button</div>
</body>
</html>이 효과는 그림에 표시됩니다.
Isn 이것의 효과는 매우 명백하고 기본 버튼보다 더 좋아 보입니다. 또한 js를 배울 때 js 기술을 사용하여 기본 버튼을 더 아름답게 만들 수도 있습니다.
좋아요, 위는 html 버튼 태그의 스타일 설정과 미화 스타일에 대한 요약입니다. (자세한 내용을 알고 싶으면 PHP 중국어 사이트를 방문하세요.) 질문이 있으시면 아래에서 질문하실 수 있습니다.
【에디터 추천】
html드롭다운 메뉴는 어떻게 만드나요? HTML 드롭다운 메뉴에 대한 코드 예제 소개 html라디오 버튼을 기본으로 선택하는 방법은 무엇인가요? 입력 태그의 라디오 버튼 사용 예위 내용은 html 버튼 태그 스타일을 설정하는 방법은 무엇입니까? HTML 버튼 태그 스타일 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!