PSD naar HTML5 conversie: een HTML5 Slider toe te voegen aan een webpagina - deel 2 (3 / 4 stap)

Stap 3: Hoofdtekst tekst Container


#body_container {breedte: 994px, float: left; achtergrond: #fff; margin-top: 5px}

#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.

Gerelateerde Artikelen

PSD naar HTML5 conversie: een HTML5 Slider toe te voegen aan een webpagina - deel 1

PSD naar HTML5 conversie: een HTML5 Slider toe te voegen aan een webpagina - deel 1

het is al meer dan een jaar geleden HTML5 zijn zin in de web-industrie gemaakte. Maar nog steeds veel mensen, in het algemeen waaronder de beginners en de intermediaire, vind het moeilijk om een HTML5-schuifregelaar voor een webpagina. Dus met deze P
Begin van de Photoshop - natuurlijke Contrast en de kleur toe te voegen aan ogen

Begin van de Photoshop - natuurlijke Contrast en de kleur toe te voegen aan ogen

We willen allemaal onze ogen te kijken zo levendig als ze in foto's kunnen, maar soms de camera net niet van alle details in het menselijk oog vastleggen.  Nou is hier hoe kun je de details via photoshop en vervolgens sommige.  :)Er zijn vele methode
Hoe te converteren PSD naar HTML5 in slechts 5 stappen: A Definitive Guide

Hoe te converteren PSD naar HTML5 in slechts 5 stappen: A Definitive Guide

de web development industrie gaat door middel van een dynamische fase, waar responsive design is geworden de laatste trend-setter zoals W3C heeft officieel HTML5 aanbevolen als de meest recente HTML-standaard, die kwam na een decennium of meer. En sa
PSD naar WordPress conversie - weten in 5 stappen

PSD naar WordPress conversie - weten in 5 stappen

PSD naar WordPress Conversion Service: ontwikkelen van een creatieve en aantrekkelijke website is in feite aangevuld met twee belangrijke elementen. Eerste is volledig-functionele en bedreven websitecode en andere aantrekkelijke, boeiende en gebruiks
Maken van een magische sfeer door een vuurplaats toe te voegen aan uw dek

Maken van een magische sfeer door een vuurplaats toe te voegen aan uw dek

Een dek is vaak een sociale bijeenkomst plaats waar mensen samenkomen om te praten, delen verhalen en genieten van elkaars gezelschap. Een vuurplaats toe te voegen als een brandpunt kan echt dat ervaring en een gewone dek omzetten in een echt magisch
Een echte klok-kalender toe te voegen aan uw Raspberry PI

Een echte klok-kalender toe te voegen aan uw Raspberry PI

De Raspberry Pi hoeft niet een beetje munt-accu-aangedreven 'Real Time Clock' (RTC) module, die houdt van tijd zelfs wanneer de stroom is uitgeschakeld of de batterij verwijderd.Om kosten laag en de grootte klein, wordt een RTC niet meegeleverd met d
Gratis OpenStreetMaps toe te voegen aan uw Garmin Oregon 450 GPS

Gratis OpenStreetMaps toe te voegen aan uw Garmin Oregon 450 GPS

de Garmin Oregon serie van handheld GPS-eenheden zijn erg populair onderGeocachers. Ik werd onlangs gevraagd hoe installeer ik een microSD-kaart in een, en ook het laden van GPX bestanden en extra kaarten.Deze korte Instructable begeleidt gebruikers
Photoshop - "Life" toe te voegen aan ogen beginnen

Photoshop - "Life" toe te voegen aan ogen beginnen

"life" toe te voegen aan de ogen van een model is een zeer populaire techniek die portret-, mode-, lifestyle- en bruiloft fotografen gebruiken.  De meeste van de tijd de catchlights het werk voor u doen, maar iedere keer in een tijdje zou u een
Sleutels toe te voegen aan een Arduino Synth de harde manier-het Blacklord: het Organ Donor Project deel 2

Sleutels toe te voegen aan een Arduino Synth de harde manier-het Blacklord: het Organ Donor Project deel 2

(Opmerking-Dit is mijn 20e instructable! Dank aan iedereen volgende en commenting.on mijn projecten en aan de medewerkers die dit mogelijk maken. Deze site heeft zeker maakte me brengen mijn A game aan de workbench.)De Auduino granulaire synth door P
Een externe voeding toe te voegen aan een goedkope USB-hub

Een externe voeding toe te voegen aan een goedkope USB-hub

Op een dag vond ik mezelf in de behoefte aan een USB-hub met een eeuwige voeding maar toen ik ging naar een winkel die ik gecontroleerd dat kunnen zij vrij duurder dan degenen die niet ha\ve externe voeding. Geen big deal, "Ik zal gewoon door een goe
Naad toelage toe te voegen aan een patroon in CorelDRAW

Naad toelage toe te voegen aan een patroon in CorelDRAW

ik ontwerp mijn patronen zonder naad toelage om te beginnen, dan toe te voegen nadat ik weet zeker dat ik heb het patroon gelijk.  Hier is een gemakkelijke manier om emissierechten naad toevoegen aan een bestaand patroon stuk in CorelDRAW.  Ik deed d
Controle van de beweging toe te voegen aan een projectie klok

Controle van de beweging toe te voegen aan een projectie klok

doel: toevoegen van een motiesensor die op de klok in de nacht licht, wanneer er beweging wordt gedetecteerd en de helderheid van de achtergrondverlichting handmatig instelbare maakt.Waarom: Ik heb alleen een paar eisen voor een goed bed-side-klok. H
Een audioboek toe te voegen aan een iPhone

Een audioboek toe te voegen aan een iPhone

De eenvoudige manier om het laden van een Audioboek op een iPhone is om gebruik van de drag-and-drop invaller voor iTunes, zoals Kopiëren Trans, en gebruik vervolgens een audiobook speler app. bij de Apple store de bestanden af te spelen. Spring voor
Stereo-uitgang toe te voegen aan een CRT TV

Stereo-uitgang toe te voegen aan een CRT TV

Naar voren: Ik moet herhalen dat dit een gevaarlijke onderneming. Ik ben niet een licentie televisie-technicus, dus er is een zeer goede kans ben ik mezelf niet de juiste voorzorgsmaatregelen nemen. ik ben blij met reacties dat, vooral op veiligheid