L'HyperText Markup Language, généralement abrégé HTML ou dans sa dernière version HTML5, est un langage de balisage conçu pour représenter les pages web. Il permet aussi d'écrire de l'hypertexte d'où son nom.
Les feuilles de styles en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Dans ce tutoriel je vais vous montrer comment créer un bouton de recherche en utilisant HTML et CSS.
Aperçu:
1) Le code HTML
<!--DOCTYPE html-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Vous pouvez ajouter ici le code CSS -->
</head>
<body>
<h2 align="center">Blog CTK --- Bouton de recherche</h2>
<form class="example" action="/action_page.php" style="margin:auto;max-width:500px">
<input type="text" placeholder="Recherche.." name="search2">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</body>
</html>
1) Le code CSS
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
form.example input[type=text] {
padding: 10px;
font-size: 17px;
border: 1px solid grey;
float: left;
width: 80%;
background: #f1f1f1;
}
form.example button {
float: left;
width: 20%;
padding: 10px;
background: #2196F3;
color: white;
font-size: 17px;
border: 1px solid grey;
border-left: none;
cursor: pointer;
}
form.example button:hover {
background: #0b7dda;
}
form.example::after {
content: "";
clear: both;
display: table;
}
</style>
J'espère que cela peut vous aider.... Merci de vous abonner et de laisser un commentaire.
Les feuilles de styles en cascade, généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C).
Dans ce tutoriel je vais vous montrer comment créer un bouton de recherche en utilisant HTML et CSS.
Aperçu:
1) Le code HTML
Encore un tutoriel très intéressant qui pourra beaucoup m'aider.
RépondreSupprimerMerci vraiment pour le travail que vous faites.
RépondreSupprimerEncore un grand merci.
RépondreSupprimerLe travail est remarquable.
RépondreSupprimerMerci pour ce tuto. J'aime bien
RépondreSupprimerTrop cool la création de cet bouton de recherche.
RépondreSupprimerIntéressante. Merci
RépondreSupprimerBelle démo, mais pour un bleu comme moi c'est comme regarder un film dans une langue étrangère. J'espère pouvoir comprendre un jour, merci.
RépondreSupprimer