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
réalisation de pages web html
Méthode d'implémentation de la fonction js barrage
Tutoriel sur l'ajustement de l'espacement des lignes dans les documents Word
éditeur HTML en ligne
Le rôle de index.html
Comment vérifier l'état du serveur
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
