Bonjour monsieur.
Aujourd'hui on va etudier comment donner du style a l'element div sur une page web.
l'element div est utiliser pour fragemnter une page web en peti morceaux.d'ou le nom div "DIVISION"
html5 a un equivalent qui est le section tag.
creez un nouveau document html .
copiez y ceci:
<html>
<head>
<title>styling div tags with css3</title>
<style type="text/css">
/*body:ici je donne du style a toute la page en generale*/
body{
background-color:#eee;
font-family:verdana;
font-size:13px;
}
/*main class:ici je cible seulemet le div tag portant la class main*/
/*je lui donne largeur et une hauteur 98% du body qui est directement son parentn de contenir toute l'espace du navigateur: 100%*/
/*enfin je lui donne une bordure fine grise*/
/*margin: 0 auto dit a l'element de'auto placer de sorte a etre au milieu (gauche et droite)*/
.main{
width:80%;
height:100%;
margin:0 auto;
border:1px solid #bbb;
margin-bottom:20px;
}
/*:ici je donne du style a la division d'en haut*/
/*width 100% signifie qu'il va etre large a egalite de son parent directe(main class) ainsi que le height*/
.head{
width:100%;
height:100px;
background-color:skyblue;
margin:0 auto;
border:1px solid #bbb;
margin-bottom:20px;;
}
/*:ici je cible seulement le paragraph qui se trouve dans l'element contenant head comme class*/
/*le margin-top etablit une espace en haut du paragraph par rapport a l'element directement au dessu*/
.head p{
margin-top:50px;
}
/*ici je cible le a tag(link) qui se trouve dans l'element de class*/
/*je lui donne le padding ,ces chiffres se lisent comme l'horloge du haut a droite ,bas , et gauche */
.head a:link{
margin:30px;
padding:2px 15px 2px 15px;
font-weight:bold;
font-size:16px;
color:maroon;
text-decoration:none;
background-color:transparent;
}
.head a:hover{
margin:30px;
padding:2px 15px 2px 15px;
font-weight:bold;
font-size:16px;
color:maroon;
text-decoration:none;
background-color:white;
}
.intro{
width:98%;
height:200px;
background-color:#fff;
margin:0 auto;
border:1px solid #bbb;
margin-bottom:20px;
}
.middle{
width:30%;
height:200px;
background-color:#fff;
margin:15px;
border:1px solid #bbb;
margin-bottom:20px;
float:left;
}
.middle h1{
font-size:13px;
margin:2px;
}
.clear{
clear:both;
}
.footer{
width:100%;
height:81px;
background-color:skyblue;
margin:0 auto;
border:1px solid #bbb;
}
</style>
</head>
<body>
<body>
<div class="main">
<div class="head">
<p style="text-align:center">
<a href="#home">Home</a><a href="#home">About</a><a href="#home">Contacts</a>
<input type="text" name="search" placeholder="enter search item"> <input type="button" value="search">
</p>
</div>
<div class="intro">
<p style="margin:10px">
Bienvenu chers client!<br>
company est a votre disponibilite.<br>
nous offront des services de qualites, par commande du client.<br>
et nous serons ravi de subvenir a vos desir chers client.
</p>
</div>
<div class="middle">
<h1>Nos services</h1>
</div>
<div class="middle">
<h1>Membres</h1>
</div>
<div class="middle">
<h1>partenaires</h1>
</div>
<div class="clear"></div>
<div class="footer">
<p style="text-align:center">copyright © philemon web-development-group</p>
</div>
</div>
</body>
</html>
No comments:
Post a Comment