Correction exercices les sélecteurs simples en CSS : Série 02
Correction exercices les sélecteurs simples en CSS : Série 02
-
Exercice 01
-
Énoncé
- Vous pouvez visualiser l’énoncé de l’exercice
-
Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mes premier pas en css</title>
<a href="http://www.w3.org/html/logo/">
<style>
div{background: linear-gradient(#e5e5e5, white);;
width: 540px;
padding-top: 20px;
border-radius: 6px;}
legend{
background-color:#aaaaaa;
color:white;
border-radius: 6px;
width:26%;
margin-left: 20px;
padding-left: 20px;
}
fieldset{
border-radius: 10px;
border:none;
width: 480px;
margin-left: 20px;
background-color:white;
}
input{
padding: 10px;
width: 200px;
border-radius: 6px;
border: solid 1px silver;
margin-top: 6px;
}
.submit{
background-color:#ee6600;
border-radius: 6px;
color:white;
}
html{
font-family: verdana ;
}
</style>
</head>
<body>
<div>
<form>
<fieldset>
<legend><h3>Inscription:</h3></legend>
<table>
<tr>
<td><label for="prenom">Prénom:</label></td>
<td><input type="text" id="prenom" placeholder="Saisire votre prénom" required><br></td>
</tr>
<tr>
<td><label for="nom">Nom:</label></td>
<td><input type="text" id="nom" placeholder="Saisire votre nom" required><br></td>
</tr>
<tr>
<td><label>Date de naissance:</label></td>
<td><input type="date" placeholder="Saisire votre date de naissance"></td>
</tr>
<tr>
<td><label>Adresse E-mail:</label></td>
<td><input type="email" placeholder="Saisire votre E-mail" required></td>
</tr>
<tr>
<td><label>Mot de passe:</label></td>
<td><input type="password" placeholder="Saisire votre mot de passe" required></td>
</tr>
<tr>
<td><label>Confirme:</label></td>
<td><input type="password" placeholder="confirme votre mot de passe" required></td>
</tr>
<tr>
<td></td> <td><input type="submit" name="btnEnvoyer" value="S'inscrire" class="submit"></td>
</tr>
</fieldset>
</table>
</form>
</div>
</body>
</html>