Comment créer une barre de recherche en HTML5 : créez d'abord un nouveau div avec la zone de nom d'identification pour envelopper la zone de recherche ; puis ajoutez une balise d'entrée et une balise div à l'intérieur ; .
L'environnement d'exploitation de ce tutoriel : système windows7, version html5, ordinateur DELL G3 Cette méthode convient à toutes les marques d'ordinateurs.
Comment créer une barre de recherche en HTML5 :
1. Créez d'abord un nouveau div avec la zone de nom d'identification pour envelopper la zone de recherche
2. Ajoutez ensuite une balise input 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 : tutoriel HTML
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!
Quelles sont les méthodes de production de production d'animation html5 ?
La différence entre HTML et HTML5
qu'est-ce que le serveur
Solution aux caractères tronqués lors de l'ouverture d'Excel
Comment vérifier si le port 445 est fermé
Comment fonctionne un interrupteur ?
Que signifie CX dans le cercle des devises ?
utilisation de hdtunepro
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
