Maison > Article > interface Web > Comment définir la barre de recherche en HTML
Comment définir la barre de recherche en HTML
- coldplay.xixioriginal
- 2021-03-03 14:41:443989parcourir
Comment définir la barre de recherche en HTML : créez d'abord un nouveau div avec la zone de nom d'identification ; puis ajoutez une balise d'entrée et une balise div à l'intérieur et enfin utilisez du CSS pour les styliser.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5, ordinateur DELL G3.
Comment définir la barre de recherche en HTML :
1. Créez d'abord un nouveau div avec la zone de nom d'identification pour envelopper la zone de recherche
2 , puis ajoutez une balise d'entrée et une balise div à l'intérieur, une pour la saisie de texte et une comme bouton 3. Enfin, utilisez CSS pour les styliser.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</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="search" name="search" placeholder="请输入关键字">
<div id="search">搜索</div>
</div>
</body>
</html>
Recommandations d'apprentissage associées :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn