PSD till HTML5 konvertering: lägga till en HTML5 reglaget på en webbsida - del 2 (2 / 4 steg)

Steg 2: I huvudet

header {float: left; bredd: 100%; bakgrund: url (.. / images/header_bg.jpg) upprepa-x 0 0; min-bredd: 994px}
huvud #logo {float: left; marginal: 2px 0 0 0}
huvud .num {float: höger; font-storlek: 42px, linjen-höjd: 35px; färg: #6aae0f; bakgrund: url (.. / images/phone_img.png) no-repeat 0 8px; padding: 0 0 0 55px; höjd: 60px; font-family: Georgien. font-style: kursiv}
huvud .num span {float: left; marginal-toppen: 22px}

Som vi redan har satt bredden på våra viktigaste div ovan, nu för rubrikavsnittet placera bara den att flyta till vänster och ange dess bredd till 100%, detta åsidosätter inte våra div bredd men i själva verket kommer det att förbli inom de fördefinierade gränserna. För bakgrund, Använd header bilden sparas i mappen bild med egenskapen bakgrund och upprepa-x till 0 0 för så att den inte upprepas igen och igen, och ange minsta bredd ska 994 pixlar, som är också våra div bredd.

I den andra raden, ange logotypen position genom att hålla det flyter till vänster och anger dess marginal till 2 pixlar 0 0 0. Sedan använda klassen av num, kontaktnumret att flyta till höger, och Ställ in dess teckenstorlek och radavstånd till 42 och 35 pixlar respektive och för färg använder koden "6aae0f". För kontakt nr. symbol, Använd egenskapen bakgrund och placera telefonen bilden sparas i bildmappen och sätta den till no-repeat till 0 från vänster och 8px från toppen. Ställa in dess utfyllnad till 0 0 0 55 pixlar, höjd till 60 pixlar, och för font-family använder typsnittet Georgia, och ge den en kursiv-stil.

Till sist definiera den span-tagg som vi använde i den kontaktnummer avsnitt tagg i HTML, och göra det flyta till vänster och ange dess marginal från toppen till 22 bildpunkter.

Navigeringsfältet

nav {float: left; bredd: 100%; bakgrund: #136589; marginal: 25px 0; text-align: center}
nav ul {bredd: auto; list-style: none;}
nav ul li {display: inline-block; marginal-rätt: 30px; position: relative; padding: 15px 0}
nav ul li en {display: block; text-decoration: none; font-storlek: 14px; linje-höjd: 12px; färg: #fff; font-family: "AvantGarde-Demi", text-transform: versaler, stoppning-vänster: 10px}
nav ul li.active en {color: #f8db54; bakgrund: url (.. /images/nav_hover.jpg) no-repeat 0 3px}
nav ul li en: hover {color: #f8db54; bakgrund: url (.. / images/nav_hover.jpg) no-repeat 0 3px; }

Nu definiera taggen nav som vi använde i HTML, och ställa in det att flyta till vänster, ange dess bredd till 100%, för bakgrunden färg koden 136589, från toppen till botten till 25 pixlar, och från höger till vänster 0 pixlar skulle fastställas och för att få texten i text-menyn i mitten, Använd de text-align egendom. Sedan definiera oordnad lista taggen, och ange dess bredd till auto och för listformat ange det till ingen. I den tredje raden, förklarar taggen listan och gör det för att Visa till inline-block, och hålla sin marginal från rätten till 30 pixlar, behålla sin position till relativa och ange utfyllnaden till 15 px från toppen och botten, och 0 px från höger till vänster.

Nu måste du definiera listan ankare Taggar och Ställ dem att visa i block, ändra standardformatet, Använd egenskapen text-decoration och ange det till ingen, hålla font-size till 14px, line-höjd till 12px, textfärg till svart, som dess utfyllnad till 10 pixlar från vänster, och med hjälp av egenskapen text-transform som texten ska vara i versaler , och glöm inte att ange dess teckensnittsfamilj till lämpliga teckensnitt.

Vi bör nu ange färgkod och navigeringsbilden för active hover länkar i navigeringsfältet, så gör det nu och glöm inte att hålla färgen & bild samma, och få dem att upprepa inte till 0 från vänster och 3 pixlar från toppen.

Behållaren vänster Banner

#banner_container {float: left; bredd: 100%;}
#banner_container .left_banner {float: left; bredd: 443px höjd: 266px; bakgrund: url (.. / images/left_bg.jpg) no-repeat 0 0; stoppning: 37px 26px 0px 26px;}
#banner_container .left_banner h2 {font-storlek: 38px, linjen-höjd: 40px; färg: #c5df57; font-familj: Georgien; text-align: center; text-transform: versaler, stoppning-botten: 35px; teckensnitt-vikt: normala;}
#banner_container .left_banner p {font-storlek: 21px; linje-höjd: 30px; färg: #2d2d2d; font-family: 'MyriadPro-vanliga'; font-stil: kursiv;}

Vi kommer nu definierar vår vänster banner behållaren, som i princip har fått texten endast. Så definierar det med dess id dvs, banner_container, och dess bredd inställd på 100% och göra det flyta till vänster. Sedan definiera avsnitt taggen med en klass av left_banner, och ange dess bredd till 443 pixlar, höjd till 266 pixlar, och gör det också flyta till vänster, och för dess bakgrund använder lämpliga bilden och det upprepa inte från vänster och topp, och Ställ in dess stoppning till 37 26 0 26 pixlar.

Efter detta, definiera font-storlek, line-height, färgkod, font-family, stoppning från botten, font-weight, för rubriken till vänster banner, gör det arrangera i rak linje i mitten med text-align egendom och med egenskapen text-transform gör det i versaler. Sedan flytta vidare, förklarar den font-storlek, line-height, färgkod, font-family och stil för stycketaggen.

Skjutreglaget för HTML5

#banner_container .slider_container {float: left; bredd: 495px; position: relative}
#banner_container .slider_container .slider {float: left; bredd: 495px;}
#banner_container .slider_container .left_arrow {position: absolute; topp: 134px vänster: 10px; bakgrund: url (.. / images/left_arrow.png) no-repeat 0 0; bredd: 37px; höjd: 36px; z-index: 5}
#banner_container .slider_container .right_arrow {position: absolute; topp: 134px höger: 10px; bakgrund: url (.. / images/right_arrow.png) no-repeat 0 0; bredd: 37px; höjd: 36px; z-index: 5}
#banner_container .slider_container .slider .slide_content {float: left; bredd: auto; position: relative;}
#banner_container .slider_container .slider .slide_content img {float: left}
#banner_container .slider_container .slider .slide_content .text_line {position: absolute; vänster: 0 botten: 0; bakgrund: url (.. / images/text_bg.png) upprepa 0 0; font-storlek: 13px; linje-höjd: 13px; font-family: "MyriadPro-vanliga"; stoppning: 7px 10px}

Det är dags att definiera alla reglaget Taggar som vi gjort i HTML. Så genom att införa sin klass med ett id för banner_container, gör det flyta till vänster, ange dess bredd till 495 pixlar och ange sin ståndpunkt till relativa. Sedan förklarar avsnitt taggen med en klass av reglaget, och göra det flyta till vänster och ange dess bredd till 495 pixlar. En gång du är klar med den, flytta längre, och ange positionen för vänster pil till absolut, uppifrån och lämnat till 134 & 10 pixlar respektive, och med egenskapen bakgrunden placerar sin bild, ange dess bredd, höjd och z-index och göra det upprepa inte. Upprepa detta steg för högerpilen och ersätta bilden med högerpilen bilden. Sedan för reglaget innehållet, ställa in den att flyta till vänster, hålla sin bredd till auto och ange sin ståndpunkt till relativa.

Nu göra alla bilder att flyta till vänster genom att definiera bildtaggen. Och flyttar vidare, förklarar klassen av text_line och placera den till absolut, den från vänster och längst ner till 0, placera rätt bild med egenskapen bakgrunden och göra det upprepar 0 0, ange dess font-storlek, line-height, font-family och stoppning.