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

Stap 1: De CSS


/*********************************Standard CSS Code***********************************/

* {marge: 0; padding: 0}
img, fieldset {border: geen}
: focus {overzicht: geen}
lichaam {lettertype-familie: Arial; lettertype-grootte: 12px; background: #-d1dde1}

.wrapper {breedte: 994px; marge: 0 auto}

/**************************************Header****************************************/

koptekst {breedte: 100%, float: left; url: achtergrond (.. / images/header_bg.jpg) herhalen-x 0 0; min-width: 994px}
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}

/***********************************Navigation Bar*************************************/

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; }

/ *** Links 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;}

/***********************************HTML5 Slider**************************************/

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

/ *** Hoofdmacht 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}

/ *** Getuigenis & Contact Container *** /

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

/**************************************Footer*****************************************/

voettekst {breedte: 100%, float: left; url: achtergrond (.. / images/footer_bg.jpg) herhalen-x 0 0 #d1dde1; margin-top: 30px; min-width: 994px}
#menu {breedte: 100%, float: left; lettertype-grootte: 10px; lijn-hoogte: 10px;  lettertype-familie: 'MyriadPro-regelmatige'; text-transform: hoofdletters}
#menu .footer_nav {breedte: auto, float: left; lijst-stijl: none; padding: 13px 0 14px 16px}
#menu .footer_nav li {float: left; marge-rechts: 20px}
#menu .footer_nav li een {float: left; text-decoration: none; kleur: #FFF;  }
#menu .footer_nav li een: hover {kleur: #-f3d508}
#menu .footer_nav li.active een {kleur: #-f3d508}

/*********************************Footer Social Icons***********************************/

#menu .social_icon {breedte: auto, float: recht; lijst-stijl: geen}
#menu .social_icon li {float: left; marge-rechts: 20px}
#menu .social_icon li.last {marge-rechts: 0}
#menu .social_icon li .facebook {float: left breedte: 36px hoogte: 36px; url: achtergrond (.. /images/Facebook.png) neen-repeat 0 0}
#menu .social_icon li .facebook:hover {url: achtergrond (.. /images/Facebook.png) neen-repeat 0 - 36px}
#menu .social_icon li .google {float: left breedte: 36px hoogte: 36px; url: achtergrond (.. /images/google_plus.png) neen-repeat 0 0}
#menu .social_icon li .google:hover {url: achtergrond (.. /images/google_plus.png) neen-repeat 0 - 36px}
#menu .social_icon li .twitter {float: left breedte: 36px hoogte: 36px; url: achtergrond (.. /images/Twitter.png) neen-repeat 0 0}
#menu .social_icon li .twitter:hover {url: achtergrond (.. /images/Twitter.png) neen-repeat 0 - 36px}

/**********************************End Footer Text*************************************/

voettekst .bottom_nav {float: left; lijst-style: none;}
voettekst .bottom_nav li {float: left; lettertype-grootte: 10px; lijn-hoogte: 30px;  lettertype-familie: 'MyriadPro-regelmatige'; kleur: #27a9e1; opvulling: 0 8px; achtergrond: url (.. /images/li_bg.jpg) neen-repeat juiste 9px}
voettekst .bottom_nav li.first {padding-links: 16px}
voettekst .bottom_nav li.last {achtergrond: geen}
voettekst .bottom_nav li een {float: left; text-decoration: none; kleur: #27a9e1;}
voettekst .bottom_nav li een: hover {tekst-decoratie: onderstreping}

/**************************************The End***************************************/

De standaardcode

* {marge: 0; padding: 0}
img, fieldset {border: geen}
: focus {overzicht: geen}
lichaam {lettertype-familie: Arial; lettertype-grootte: 12px; background: #-d1dde1}

.wrapper {breedte: 994px; marge: 0 auto}

Er zijn bepaalde codes die zijn zeer gemeenschappelijk, en gebruikte telkens die we schrijven een CSS-bestand, noemen we het ook als een standaardcode in CSS. En bovenstaande is niets meer dan de standaardcode, waar in de eerste regel we hebben gesteld de standaard marge en opvulling van onze lay-out naar nul of een 0 met behulp van de universele selector.  In de tweede en derde lijn, wij hebben de grens voor afbeeldingen en FIELDSET-(Formulierinvoer) ingesteld op geen, en focus op geen omtrek. Dit zal ervoor zorgen dat alle onze beelden blijven grens gratis, ongeacht welke browser van de gebruiker gebruikt om te surfen op de website. Hoewel wij elke vorm nog niet gemaakt, maar om aan de veiligere kant we dat in de standaardcode als voorzorgsmaatregel, schrijven zoals u kunnen in de contact pagina maken zou. Vervolgens in de vierde en vijfde regel, hebben wij de standaardlettertypefamilie-, tekengrootte en kleur van de achtergrond voor de hoofdtekst van de webpagina instellen, en ook de standaardbreedte van 994 pixels en marge van 0 auto voor het div-element met een soort wrapper instellen.

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