Stap 2: De kop
koptekst #logo {float: left; marge: 2px 0 0 0}
kop .num {float: recht; lettertype-grootte: 42px; lijn-hoogte: 35px; kleur: #6aae0f; url: achtergrond (.. / images/phone_img.png) neen-repeat 0 8px; opvulling: 0 0 0 55px; hoogte: 60px; lettertype-familie: Georgië; lettertype-stijl: cursief}
kop .num span {float: left; margin-top: 22px}
Zoals we al hebben ingesteld de breedte van onze belangrijkste div boven, nu voor de koptekstsectie gewoon positie te zweven verliet, en de breedte op 100% instelt, worden hiermee niet overschreven onze div's breedte maar in feite zal het blijven binnen de vooraf gedefinieerde grenzen. Voor achtergrond, gebruik van de header afbeelding opgeslagen in de afbeeldingenmap met behulp van de eigenschap background en herhalen-x op 0 0 voor zodat het niet zich steeds weer herhaalt, en de minimale breedte op 994 pixels instellen, die is ook onze div's breedte.
In de tweede regel ingesteld de logo's positie doordat het zweven naar links, en de marge op 2 pixels 0 0 0. Vervolgens met behulp van de klasse van num, het nummer van de contactpersoon te zweven naar rechts, en stelt u de tekengrootte en regelafstand op 42 en 35 pixels respectievelijk, en de kleur met de code "6aae0f". Voor de contact nr. symbool, de eigenschap background gebruikt en plaatst u de afbeelding van de telefoon opgeslagen binnen de afbeeldingenmap en stel deze in op neen-repeat op 0 van links en 8px vanaf de bovenkant. De opvulling ingesteld op 0 0 0 55 pixels, hoogte 60 pixels en voor lettertype-familie gebruiken het lettertype Georgia en geef het een cursieve tekenstijl.
Eindelijk het definiëren van de span-tag die we gebruikten in het contactpersoonnummer sectie code in de HTML-code, en maken het drijven naar links en de marge ingesteld vanaf de top op 22 pixels.
De navigatiebalk
NAV {breedte: 100%, float: left; achtergrond: #136589; marge: 25px 0; text-align: center}
NAV ul {breedte: auto; lijst-style: none;}
NAV ul li {display: inline-block; marge-rechts: 30px positie: relatief; padding: 15px 0}
NAV ul li een {display: block; text-decoration: none; lettertype-grootte: 14px; lijn-hoogte: 12px; kleur: #fff; lettertype-familie: 'AvantGarde-Demi'; text-transform: hoofdletters; padding-links: 10px}
NAV ul li.active een {kleur: #f8db54; url: achtergrond (.. /images/nav_hover.jpg) neen-repeat 0 3px}
NAV ul li een: hover {kleur: #f8db54; url: achtergrond (.. / images/nav_hover.jpg) neen-repeat 0 3px; }
Nu bepalen de nav-tag die we gebruikt in de HTML-code, en stel het te zweven naar links, de breedte tot 100% voor achtergrond gebruiken de kleurcode 136589, ingesteld, de marge van de top naar bodem op 25 pixels, en van rechts naar links 0 pixels, en gebruiken om de tekst van de menu bar in het midden, de eigenschap text-align. Vervolgens definiëren de ongeordende lijst-tag, en de breedte op automatisch instellen en voor lijst-stijl ingesteld op geen. In de derde regel, verklaren de tag list, en het weergeven naar inline blok, en houden de marge van het recht op 30 pixels, zijn standpunt aan relatieve houden, en de opvulling ingesteld op 15 px uit de boven- en onderkant, en 0 px van rechts naar links.
Nu moet u de lijst ankertags definiëren en instellen dat deze weergeven in blok, wijzigt de standaardstijl, gebruikt u de eigenschap tekst-decoratie en stel deze in op none, de grootte van het lettertype dat 14px, regelafstand te 12px, de tekstkleur in zwart, de opvulling ingesteld op 10 pixels vanaf de linkerkant, en de tekst in hoofdletters met behulp van de eigenschap text-transform instellen , en vergeet niet om in te stellen van zijn lettertype-familie naar het desbetreffende lettertype.
Wij moeten nu de kleurcode en navigatie beeld voor de actieve en zweven link op de navigatiebalk, dus dat doen nu, en vergeet niet om te houden van de kleur & beeld hetzelfde, en ze neen-repeat op 0 van de linker- en 3 pixels vanaf de bovenkant.
De linker Banner-Container
#banner_container {float: left; breedte: 100%;}
#banner_container .left_banner {float: left breedte: 443px hoogte: 266px; url: achtergrond (.. / images/left_bg.jpg) neen-repeat 0 0; opvulling: 37px 26px 0px 26px;}
#banner_container .left_banner h2 {lettertype-grootte: 38px; lijn-hoogte: 40px; kleur: #c5df57; lettertype-familie: Georgië; text-align: centreren; text-transform: hoofdletters; padding-bodem: 35px; lettertype-weight: normal;}
#banner_container .left_banner p {lettertype-grootte: 21px; lijn-hoogte: 30px; kleur: #2d2d2d; lettertype-familie: 'MyriadPro-regelmatige'; lettertype-stijl: cursief;}
Nu zullen we onze linker banner container, die in principe de tekst alleen heeft definiëren. Zo definiëren met haar id, bijvoorbeeld banner_container, en de breedte ervan ingesteld op 100% en er zweven naar links. Vervolgens definieert de label van de sectie met een klasse van left_banner, en de breedte ervan ingesteld op 443 pixels, hoogte tot 266 pixels, maak het ook vlotter naar links, en voor de achtergrond gebruikt het juiste beeld maken het neen-repeat uit de linker- en bovenkant en haar opvulling instellen tot en met 37 26 0 26 pixels.
Na dit, definieer de lettertype-grootte, regelafstand, kleurcode-lettertypefamilie, opvulling van de bodem, Tekengewicht, voor de kop van de linker banner, maken het uitgelijnd in het midden met tekst-align eigenschap en het met behulp van de eigenschap text-transform maken in hoofdletters. Vervolgens verder, verklaren de lettertype-grootte, regelafstand, kleurcode, lettertype-familie en tekenstijl voor de alineacode.
De HTML5-schuifregelaar
#banner_container .slider_container {breedte: 495px, float: left; positie: relatieve}
#banner_container .slider_container .slider {float: left; breedte: 495px;}
#banner_container .slider_container .left_arrow {url: achtergrond, positie: absoluut; boven: 134px; links: 10px (.. / images/left_arrow.png) neen-repeat 0 0; breedte: 37px; hoogte: 36px; z-index: 5}
#banner_container .slider_container .right_arrow {positie: absoluut, boven: 134px, rechts: 10px; url: achtergrond (.. / images/right_arrow.png) neen-repeat 0 0; breedte: 37px; hoogte: 36px; z-index: 5}
#banner_container .slider_container .slider .slide_content {breedte: auto, float: left; positie: relatief;}
#banner_container .slider_container .slider .slide_content img {float: left}
#banner_container .slider_container .slider .slide_content .text_line {positie: absoluut; links: 0, onder: 0; url: achtergrond (.. / images/text_bg.png) herhaal 0 0; lettertype-grootte: 13px; lijn-hoogte: 13px; lettertype-familie: 'MyriadPro-regelmatige'; opvulling: 7px 10px}
Het is tijd om alle de schuifregelaar codes die we in de HTML-code gemaakt definiëren. Door de invoering van zijn klasse met een id van de banner_container, zodat het zweven naar de linkerkant, de breedte ingesteld op 495 pixels, en zijn standpunt naar relatieve. Vervolgens verklaren de label van de sectie met een klasse van schuifregelaar en er zweven naar de linkerkant, en de breedte ervan ingesteld op 495 pixels. Eens u klaar bent met het, verder, en de positie van de pijl-links naar absolute, van boven en links naar 134 & 10 pixels respectievelijk, en met de eigenschap background plaats haar imago ingesteld, haar breedte, hoogte en z-index en maken het neen-repeat. Herhaal deze stap voor de pijl naar rechts, en de afbeelding vervangen door de afbeelding van de pijl naar rechts. Voor de inhoud van de schuifregelaar, stel het zweven naar de linkerkant, houd de breedte voor een automatische, en zijn standpunt op relatieve instellen.
Nu alle beelden te zweven naar links door het definiëren van de afbeeldingscode te maken. En verplaatsen verder verklaren de klasse van text_line en plaats de shape tot absoluut, het van links en van beneden naar 0, plaatst u het juiste beeld met behulp van de eigenschap background en maken het herhalen op 0 0, de tekengrootte, regelafstand, lettertype-familie en opvulling instellen.
