Stap 3: Hoofdtekst tekst Container
#top_section {breedte: 960px, float: left; padding: 30px 17px 15px 17px}
#top_section h2 {lettertype-grootte: 30px; lijn-hoogte: 20px; kleur: #484747; lettertype-familie: 'MyriadPro-regelmatige'; padding: 0 0 17px 0; font-weight: normal; text-transform: hoofdletters}
#top_section h2 span {kleur: #-80b439}
#top_section p {lettertype-grootte: 16px; lijn-hoogte: 20px; kleur: #484747; lettertype-familie: 'MyriadPro-regelmatige'; padding-bottom: 15px}
#top_section .van_img {float: recht; marge: 0 0 0 11px}
#top_section .house_img {float: left; marge: 0 15px 0 0}
Voor hoofdtekst container, definiëren via haar id, bijvoorbeeld body_container en maken het zweven naar de linkerkant, stelt u de breedte op 994 pixels, de marge van de top op 5 pixels, en definiëren van de kleurcode op zwart. Als u het correct herinnerd, verdeeld we deze container twee sectie d.w.z., sectie- en onderkant bovengedeelte, die wij vervolgens zullen behandelen. Dus voor nu, verklaren het bovengedeelte, en het drijven naar links, stelt u de breedte op 960 pixels en een opvulling tot en met 30 17 15 17 pixels van de bovenzijde naar links. Nu stel de tekengrootte, regelafstand, kleurcode, lettertype-familie, opvulling, tekengewicht en tekst-transformatie voor de kop van het bovengedeelte. Definieer vervolgens het span element dat we ingevoerd in de h2-tag, en de kleurcode instellen. Steeds vooruit, definiëren de alineacode, stelt u de tekengrootte, regelhoogte kleur, lettertype-familie en opvulling van de bodem. Vervolgens beide de afbeeldingen in de CSS-regels definiëren en laten zweven naar rechts, en hun marge ook op Westers ingesteld.
De Container Bottom
#bottom_container {breedte: 994px, float: left; achtergrond: #d1dde1; padding: 25px 0 0 0}
#bottom_container .common_box {breedte: 237px, float: left; marge-rechts: 52px}
#bottom_container. common_box.second {breedte: 260px;}
#bottom_container .common_box h3 {lettertype-grootte: 18px; lijn-hoogte: 14px; kleur: #27a9e1; lettertype-familie: 'Avante'; padding-bottom: 12px}
#bottom_container .common_box p {lettertype-grootte: 12px; lijn-hoogte: 18px; kleur: #136589; lettertype-familie: "MyriadPro-regelmatige";}
#bottom_container .common_box p.last {kleur: #-27a9e1}
#bottom_container .common_box .name {float: recht; text-decoration: none; font-grootte: 12px; lijn-hoogte: 18px; kleur: #27a9e1; margin-top: 27px}
#bottom_container .common_box .contact {float: links, breedte: 100%; lijst-stijl: none; padding: 10px 0 0 0}
#bottom_container .common_box .contact li {breedte: 100%, float: left; lettertype-grootte: 12px; lijn-hoogte: 18px; kleur: #27a9e1}
#bottom_container .common_box .contact li een {float: left; text-decoration: none; kleur: #-27a9e1}
#bottom_container .common_box .contact li een: hover {tekst-decoratie: onderstreping}
#bottom_container .common_box .contact li span {float: left; kleur: #2d2d2d; breedte: 72px}
Nu met behulp van de id van de tag van de sectie voor de container van de bodem, maken het drijven naar links, de breedte ingesteld op 994px, de achtergrondkleur te definiëren en de opvulling instellen. Vervolgens declareert de klasse van gemeenschappelijk vak, maken het zweven naar links en stel de breedte en marges van rechts na het meten van het PSD-bestand. Na dit, moet u het tweede gemeenschappelijk vak definiëren en de breedte. We hebben nu beide de vereiste vakken ingesteld, nu definiëren de tekengrootte, regelafstand, kleurcode, lettertype-familie en opvulling van de bodem voor de kop. Herhaal dit voor de alineacode ook, en op de volgende regel definieert kleurcode voor de alineacode met een klasse van laatste.
Het vervolg, verklaren de tag met een klasse van naam, en stel deze te zweven naar rechts, van tekst-decoratie houden het op geen en de tekengrootte, regelafstand, kleurcode en marge van de top dienovereenkomstig. In de volgende stap, definiëren de tag met een klasse van de contactpersoon, de tag list erin, het anker-tag en de hover-effect, en eindelijk de span-tag als per de eis.
