HTML 검색창을 설정하는 방법은 무엇입니까? HTML 검색창에서 입력 태그를 사용하는 방법의 예
- 寻∝梦원래의
- 2018-09-04 16:44:5662207검색
이 문서에서는 주로 HTML 검색창의 설정과 html 검색창의 입력 태그를 사용하는 방법에 대한 몇 가지 예를 설명합니다. 다음으로 html 검색창에 대한 이 문서를 함께 읽어보겠습니다.
먼저 간단한 검색창을 설정해 봅시다:
<input type="text" class="aa"><input type="button" value="搜索" class="bb">
이것은 매우 복잡한 스타일이 없는 가장 간단한 스타일의 검색창입니다. 스타일을 디자인해야 하는 경우에는 class="aa"에 따라 스타일을 작성하면 됩니다. .aa{}에 대한 괄호 안에 코드를 추가하면 됩니다. 물론 이는 버튼 스타일의 경우입니다. bb{}, 괄호 안에 코드를 입력하세요. 브라우저에 표시되는 효과는 다음과 같습니다.
간단 검색창에 대한 코드입니다.
이제 입력 태그를 사용하는 방법에 대해 이야기하겠습니다. 먼저 예제를 살펴보겠습니다.
고급 검색창의 전체 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PHP中文网</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
#box{
width: 380px;
margin: 30px auto;
font-family: 'Microsoft YaHei';
font-size: 14px;
}
input{
width: 260px;
border: 1px solid #e2e2e2;
height: 30px;
float: left;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-size: 25px;
background-position:5px center;
padding:0 0 0 40px;
}
#search{
width: 78px;
height: 32px;
float: right;
background: black;
color: white;
text-align: center;
line-height: 32px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<input type="text" name="search" placeholder="请输入关键字">
<div id="search">搜索</div>
</div>
</body>
</html>이 코드의 렌더링을 살펴보세요.
이 효과는 첫 번째 것보다 훨씬 예쁘지만, 코드가 조금 더 많고, 기본적인 CSS 스타일 지식에 관한 내용입니다. 이해가 안 되는 부분이 있으면 아래에 메시지를 남겨주세요.
참고: 요소는 비어 있으며 라벨 속성만 포함합니다.
팁:
알겠습니다. 위 내용은 html 입력 태그 사용에 관한 기사입니다. 질문이 있으시면 아래에 메시지를 남겨주세요.
【에디터 추천】
html 스페이스 코드는 어떻게 작성하나요? HTML 공간 코드 표현 방법 요약
html 드롭다운 메뉴는 어떻게 만드나요? HTML 드롭다운 메뉴에 대한 코드 예제 소개
위 내용은 HTML 검색창을 설정하는 방법은 무엇입니까? HTML 검색창에서 입력 태그를 사용하는 방법의 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!