Étape 2: L’en-tête
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}
Comme nous avons déjà mis la largeur de notre div principal ci-dessus, maintenant pour la section d’en-tête Positionnez-le juste flotter à gauche et définissez sa largeur à 100 %, cela ne remplace pas la largeur de notre div mais en fait il va rester dans les limites prédéfinies. Pour le fond, utilisez l’image d’en-tête enregistré dans le dossier de l’image à l’aide de la propriété background et horizontale 0 0 pour afin qu’elle ne se répète encore et encore et de définir la largeur minimale à 994 pixels, qui est aussi largeur de notre div.
Dans la deuxième ligne, définissez la position du logo en le gardant flottant à gauche et sa marge de 2 pixels 0 0 0. Puis à l’aide de la classe de num, faire le numéro de téléphone à flotter à droite et définir la taille de la police et la hauteur de la ligne 42 et 35 pixels respectivement et pour la couleur, utilisez le code « 6aae0f ». Pour le non contact. symbole, utilisez la propriété background et placer l’image de téléphone enregistré dans le dossier image et affectez-lui la non répétition à 0 de la gauche et de 8px du haut. Son rembourrage la valeur 0 0 0 55 pixels, hauteur 60 pixels et pour la famille de police utilisent la police de Géorgie et lui donner un style de police italique.
Enfin définir la balise span que nous avons utilisé dans la balise de section de numéro dans le code HTML et de faire flotter à gauche et sa marge du haut de 22 pixels.
La barre de Navigation
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 ; }
Maintenant définir la balise nav que nous avons utilisé dans le code HTML et mis à flotter vers la gauche, définissez sa largeur à 100 %, pour le fond utiliser le code de couleur 136589, définit la marge du haut vers le bas à 25 pixels et de droite à gauche 0 pixels et afin de mettre le texte de barre de menu texte au centre, utilisez la propriété text-align. Puis définir l’étiquette de liste non triée, définir sa largeur à l’automobile et pour le style liste Affectez-lui la voix contre zéro. Dans la troisième ligne, déclarez la balise list et rendent à afficher au bloc inline et garder sa marge de droite à 30 pixels, conserver sa position par rapport et définir le remplissage à 15 px de haut et bas et 0 px de droite à gauche.
Maintenant, vous devez définir des balises d’ancrage de la liste et la valeur à afficher dans la cale, pour modifier le style par défaut, utilisez la propriété text-decoration et définissez-la sur none, garder la taille de police à 14px, la hauteur de la ligne à 12px, couleur du texte noir, définissez son rembourrage 10 pixels de la gauche, et à l’aide de la propriété text-transform définie le texte en majuscules et n’oubliez pas de mettre sa famille de police la police appropriée.
Nous devrions maintenant créer le code de couleur, et stationnaire et l’image de navigation pour l’active lien dans la barre de navigation, donc le faire maintenant et n’oublient pas de garder la couleur & l’image même et les rendre non-répéter à 0 des gauche et 3 pixels de haut.
La bannière gauche de 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;}
Maintenant, nous allons définir notre conteneur bannière gauche, qui essentiellement a obtenu le texte uniquement. Donc définir avec son id, c'est-à-dire, banner_container et définir sa largeur à 100 % et faire flotter à gauche. Puis définir la balise de la section avec une classe de left_banner et définissez sa largeur sur 443 pixels, hauteur de 266 pixles, rendent également flotter à gauche et pour son arrière-plan, utilisez l’image appropriée et rendent non-répétition de la gauche et de haut et son rembourrage la valeur 37 26 0 26 pixels.
Après cela, définir la taille de la police, hauteur de la ligne, codes couleur-famille de polices, remplissage par le bas, font-weight, pour le titre de la bannière de gauche, assurez-vous il aligné dans le centre en utilisant text-align propriété et l’utilisation de la propriété text-transform rendre en majuscules. Avant de passer outre, déclarer le font-size, line-height, code couleur, famille de police et font-style pour la balise de paragraphe.
Le curseur de HTML5
#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}
Il est temps de définir toutes les balises de curseur que nous avons faite dans le code HTML. Donc par l’introduction de sa catégorie avec un id de la banner_container, font flotter à gauche, définissez sa largeur à 495 pixels et la valeur sa position relative. Puis déclarez la balise de la section avec une classe de curseur et faire flotter à gauche et sa largeur de 495 pixels. Une fois vous avez terminé, aller plus loin et définissez la position de la flèche vers la gauche à l’absolu, de haut et 134 & 10 pixels à gauche respectivement et avec la propriété background Placez son image sa largeur, hauteur et z-index et rendent non répétition. Répétez cette étape pour la flèche droite et remplacez l’image par l’image de droite. Quant au contenu de curseur, placez-la à flotter vers la gauche, garder sa largeur pour auto et affectez sa position relative.
Maintenant faire toutes les images à flotter vers la gauche en définissant la balise d’image. Et se déplaçant en outre, déclarez la classe de text_line et positionnez-le Absolute, ensemble de gauche et inférieur à 0, placez l’image correcte à l’aide de la propriété background et faire répéter à 0 0, définir sa taille de la police, line-height, famille de police et remplissage.
