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
utilisation du gradient linéaire
La différence entre les pages Web statiques et les pages Web dynamiques
Comment ouvrir Python après son installation
Comment définir l'IP
point de symbole spécial
Explication détaillée de la commande dd
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
