Etape 1: Le CSS
* {margin: 0; padding: 0}
IMG, fieldset {border : none}
: focus {outline : none}
corps {font-family : Arial ; font-size : 12px ; background: #d1dde1}
.Wrapper {width : 994px ; auto margin: 0}
/**************************************Header****************************************/
en-tête {float : left ; width : 100 %; background : url (.. / images/header_bg.jpg) repeat-x 0 0 ; min-width : 994px}
en-tête #logo {float : left ; marge : 2px 0 0 0}
en-tête .num {float : right ; police-taille : 42px ; ligne-hauteur : 35px ; color: #6aae0f ; background : url (.. / images/phone_img.png) non-repeat 0 8px ; padding: 0 0 55px 0 ; height : 60px ; font-family : Georgia ; font-style : italic}
en-tête .num span {float : left ; margin-top : 22px}
/***********************************Navigation Bar*************************************/
NAV {float : left ; width : 100 %; background: #136589 ; marge : 25px 0; text-align : center}
NAV ul {width : auto ; liste-style : none;}
NAV ul li {display : inline-block ; margin-droit : 30px ; position : relative ; padding : 15px 0}
NAV ul li a {display : block ; text-decoration : none ; font-size : 14px ; line-height : 12px ; couleur: #fff ; font-family: « AvantGarde-Demi » ; text-transform : uppercase ; padding-left : 10px}
li.active ul nav a {color: #f8db54 ; background : url (.. /images/nav_hover.jpg) non-repeat 3px 0}
NAV ul li a: hover {color: #f8db54 ; background : url (.. / images/nav_hover.jpg) non-repeat 3px 0 ; }
/ *** Laissé bannière conteneur *** /
#banner_container {float : left ; width : 100 %;}
#banner_container .left_banner {float : left ; width : 443px ; height : 266px ; background : url (.. / images/left_bg.jpg) non-repeat 0 0 ; Rembourrage : 37px 26px 26px 0px;}
#banner_container .left_banner h2 {polices-Dimensions : 38px ; ligne-hauteur : 40px ; color: #c5df57 ; police-family : Georgia ; text-align : center ; text-transform : majuscules ; rembourrage-bas : 35px ; police-poids : normal;}
#banner_container .left_banner p {police-taille : 21px ; ligne-height : 30px ; color: #2d2d2d ; font-family: "MyriadPro-Regular"; font-style : italic;}
/***********************************HTML5 Slider**************************************/
#banner_container .slider_container {float : left ; width : 495px ; position : relative}
#banner_container .slider_container .slider {float : left ; width : 495px;}
#banner_container .slider_container .left_arrow {position : absolute ; top : 134px ; left : 10px ; background : url (.. / images/left_arrow.png) non-repeat 0 0 ; Largeur : 37px ; hauteur : 36px ; z-index: 5}
#banner_container .slider_container .right_arrow {position : absolute ; top : 134px ; right : 10px ; background : url (.. / images/right_arrow.png) non-repeat 0 0 ; Largeur : 37px ; hauteur : 36px ; z-index: 5}
#banner_container .slider_container .slider .slide_content {float : left ; width : auto ; position : relative;}
#banner_container .slider_container .slider .slide_content img {float : left}
#banner_container .slider_container .slider .slide_content .text_line {position : absolute ; left: 0; bas: 0; background : url (.. / images/text_bg.png) répéter 0 0; font-size : 13px ; line-height : 13px ; famille de police: « MyriadPro-temps normal » ; Rembourrage : 7px 10px}
/ *** Conteneur de texte corps principal *** /
#body_container {float : left ; width : 994px ; background: #fff; margin-top : 5px}
#top_section {float : left ; width : 960px ; padding : 30px 17px 15px 17px}
#top_section h2 {polices-taille : 30px ; line-height : 20px ; color: #484747 ; font-family: « MyriadPro-Regular »; padding: 0 17px 0 0 ; police-poids : normal ; text-transform : majuscules}
#top_section durée de h2 {color: #80b439}
#top_section p {font-size : 16px ; ligne-height : 20px ; color: #484747 ; famille de polices: « MyriadPro-Regular »; padding-bas : 15px}
#top_section .van_img {float : right ; margin: 0 0 0 11px}
#top_section .house_img {float : left ; margin: 0 15px 0 0}
/ *** Témoignage & Contact conteneur *** /
#bottom_container {float : left ; width : 994px ; background: #d1dde1 ; padding : 25px 0 0 0}
#bottom_container .common_box {float : left ; width : 237px ; margin-droit : 52px}
#bottom_container. common_box.second {width : 260px;}
#bottom_container .common_box h3 {police-size : 18px ; ligne-hauteur : 14px ; color: #27a9e1 ; font-family: « Avante »; padding-bas : 12px}
#bottom_container .common_box p {font-taille : 12px ; ligne-height : 18px ; color: #136589 ; font-family: "MyriadPro-Regular";}
#bottom_container .common_box p.last {color: #27a9e1}
#bottom_container .common_box .name {float : right ; text-decoration : none ; font-size : 12px ; line-height : 18px ; color: #27a9e1 ; margin-haut : 27px}
#bottom_container .common_box .contact {float : left ; width : 100 %; liste-style : none ; padding : 10px 0 0 0}
#bottom_container .common_box .contact li {float : left ; width : 100 %; font-size : 12px ; line-height : 18px ; color: #27a9e1}
#bottom_container .common_box .contact li un {float : left ; text-decoration : none ; color: #27a9e1}
#bottom_container .common_box .contact li a: hover {text-decoration : underline}
#bottom_container .common_box .contact li span {float : left ; color: #2d2d2d ; largeur : 72px}
/**************************************Footer*****************************************/
pied de page {float : left ; width : 100 %; background : url (.. / images/footer_bg.jpg) repeat-x 0 #d1dde1 0 ; marge-haut : 30px ; min-width : 994px}
#menu {float : left ; width : 100 %; font-size : 10px ; line-height : 10px ; famille de police: « MyriadPro-temps normal » ; text-transform : majuscules}
#menu .footer_nav {float : left ; width : auto ; liste-style : none ; padding : 13px 0 14px 16px}
#menu .footer_nav li {float : left ; margin-droit : 20px}
#menu li de .footer_nav un {float : left ; text-decoration : none ; color: #FFF ; }
#menu li de .footer_nav a: hover {color: #f3d508}
#menu .footer_nav li.active a {color: #f3d508}
/*********************************Footer Social Icons***********************************/
#menu .social_icon {float : right ; width : auto ; liste-style : none}
#menu .social_icon li {float : left ; margin-droit : 20px}
#menu .social_icon li.last {marge-droit: 0}
#menu .social_icon li Facebook {float : left ; width : 36px ; hauteur : 36px ; background : url (.. /images/Facebook.png) non-repeat 0 0}
#menu .social_icon li .facebook:hover {background : url (.. /images/Facebook.png) non-repeat 0 - 36px}
#menu .social_icon li .google {float : left ; width : 36px ; hauteur : 36px ; background : url (.. /images/google_plus.png) non-repeat 0 0}
#menu .social_icon li .google:hover {background : url (.. /images/google_plus.png) non-repeat 0 - 36px}
#menu .social_icon li .twitter {float : left ; width : 36px ; hauteur : 36px ; background : url (.. /images/Twitter.png) non-repeat 0 0}
#menu .social_icon li .twitter:hover {background : url (.. /images/Twitter.png) non-repeat 0 - 36px}
/**********************************End Footer Text*************************************/
pied de page .bottom_nav {float : left ; liste-style : none;}
pied .bottom_nav li {float : left ; font-size : 10px ; line-height : 30px ; font-family: « MyriadPro-Regular »; color: #27a9e1 ; padding: 0 8px ; Background : url (.. /images/li_bg.jpg) non-répétition 9px droite}
pied de page .bottom_nav li.first {padding-left : 16px}
pied de page .bottom_nav li.last {background : none}
pied de page .bottom_nav li un {float : left ; text-decoration : none ; color: #27a9e1;}
pied .bottom_nav li a: hover {text-decoration : underline}
/**************************************The End***************************************/
Le Code Standard
* {margin: 0; padding: 0}
IMG, fieldset {border : none}
: focus {outline : none}
corps {font-family : Arial ; font-size : 12px ; background: #d1dde1}
.Wrapper {width : 994px ; auto margin: 0}
En CSS, il y a certains codes qui sont très courants et utilisés chaque fois que nous écrivons un fichier CSS, que nous l’appelons aussi comme un code standard. Et qui précèdent n’est rien d’autre que le code standard, où dans la première ligne nous avons mis la marge par défaut et le rembourrage de notre disposition à zéro ou 0 en utilisant le sélecteur universel. Dans les deuxième et troisième lignes, nous ont valeur none la frontière pour les images et les fieldset (formulaire de saisie) et se concentrer contour voix contre zéro. Cela garantira que toutes nos images restent frontière gratuitement, n’importe quel navigateur, l’utilisateur utilise pour surfer sur le site Web. Bien que nous n’avons pas fait n’importe quelle forme, mais pour être sur le côté plus sûr nous écrire que dans le code standard par mesure de précaution, car vous pourriez faire un dans la page de contact. Puis dans la quatrième et la cinquième ligne, nous avons mis la famille de police par défaut, -la taille de police et couleur d’arrière-plan pour le corps de la page Web et également de définir la largeur par défaut de 994 pixels et marge 0 auto à la div avec une classe de wrapper.
