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

Steg 1: CSS

* {marginal: 0; padding: 0}
IMG, fieldset {border: ingen}
: fokus {disposition: ingen}
kroppen {font-family: Arial, font-storlek: 12px; bakgrund: #d1dde1}

.wrapper {bredd: 994px; marginal: 0 auto}

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

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}

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

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

/ *** Lämnade Banner Container *** /

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

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

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

/ *** Huvuddel Text Container *** /

#body_container {float: left; bredd: 994px; bakgrund: #fff; marginal-top: 5px}

#top_section {float: left; bredd: 960px; padding: 30px 17px 15px 17px}
#top_section h2 {font-storlek: 30px; linje-höjd: 20px; färg: #484747; font-family: 'MyriadPro-vanliga'; padding: 0 0 17px 0; teckensnitt-vikt: normala; text-transform: versaler}
#top_section h2 span {color: #80b439}
#top_section p {font-storlek: 16px; linje-höjd: 20px; färg: #484747; font-family: 'MyriadPro-vanliga'; padding-botten: 15px}
#top_section .van_img {float: höger; marginal: 0 0 0 11px}
#top_section .house_img {float: left; marginal: 0 15px 0 0}

/ *** Omdöme & kontakt Container *** /

#bottom_container {float: left; bredd: 994px; bakgrund: #d1dde1; padding: 25px 0 0 0}
#bottom_container .common_box {float: left; bredd: 237px; marginal-rätt: 52px}
#bottom_container. common_box.second {bredd: 260px;}
#bottom_container .common_box h3 {font-storlek: 18px, linjen-höjd: 14px; färg: #27a9e1; font-family: 'Avante'; padding-botten: 12px}
#bottom_container .common_box p {font-storlek: 12px; linje-höjd: 18px; färg: #136589; font-family: "MyriadPro-vanliga";}
#bottom_container .common_box p.last {color: #27a9e1}
#bottom_container .common_box .name {float: höger; text-decoration: none; font-storlek: 12px; linje-höjd: 18px; färg: #27a9e1; marginal-toppen: 27px}
#bottom_container .common_box .contact {float: left; bredd: 100%; list-style: none; padding: 10px 0 0 0}
#bottom_container .common_box .contact li {float: left; bredd: 100%; font-storlek: 12px; linje-höjd: 18px; färg: #27a9e1}
#bottom_container .common_box .contact li en {float: left; text-decoration: none; color: #27a9e1}
#bottom_container .common_box .contact li en: hover {text-dekoration: understrykning}
#bottom_container .common_box .contact li span {float: left; färg: #2d2d2d; bredd: 72px}

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

sidfot {float: left; bredd: 100%; bakgrund: url (.. / images/footer_bg.jpg) upprepa-x 0 0 #d1dde1; marginal-top: 30px; min-bredd: 994px}
#menu {float: left; bredd: 100%; font-storlek: 10px; linje-höjd: 10px; font-family: 'MyriadPro-vanliga'; text-transform: versaler}
#menu .footer_nav {float: left; bredd: auto; list-style: none; padding: 13px 0 14px 16px}
#menu .footer_nav li {float: left; marginal-rätt: 20px}
#menu .footer_nav li en {float: left; text-decoration: none; color: #FFF;}
#menu .footer_nav li en: hover {color: #f3d508}
#menu .footer_nav li.active en {color: #f3d508}

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

#menu .social_icon {float: höger; bredd: auto; list-style: none}
#menu .social_icon li {float: left; marginal-rätt: 20px}
#menu .social_icon li.last {marginal-rätt: 0}
#menu .social_icon li .facebook {float: left; bredd: 36px höjd: 36px; bakgrund: url (.. /images/Facebook.png) no-repeat 0 0}
#menu .social_icon li .facebook:hover {bakgrunden: url (.. /images/Facebook.png) no-repeat 0 - 36px}
#menu .social_icon li .google {float: left; bredd: 36px höjd: 36px; bakgrund: url (.. /images/google_plus.png) no-repeat 0 0}
#menu .social_icon li .google:hover {bakgrunden: url (.. /images/google_plus.png) no-repeat 0 - 36px}
#menu .social_icon li .twitter {float: left; bredd: 36px höjd: 36px; bakgrund: url (.. /images/Twitter.png) no-repeat 0 0}
#menu .social_icon li .twitter:hover {bakgrunden: url (.. /images/Twitter.png) no-repeat 0 - 36px}

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

sidfot .bottom_nav {float: left; list-style: none;}
sidfot .bottom_nav li {float: left; font-storlek: 10px; linje-höjd: 30px; font-family: 'MyriadPro-vanliga'; färg: #27a9e1; padding: 0 8px; bakgrund: url (.. /images/li_bg.jpg) upprepa inte rätt 9px}
sidfot .bottom_nav li.first {padding-vänster: 16px}
sidfot .bottom_nav li.last {bakgrunden: ingen}
sidfot .bottom_nav li en {float: left; text-decoration: none; color: #27a9e1;}
sidfot .bottom_nav li en: hover {text-dekoration: understrykning}

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

Standardkoden

* {marginal: 0; padding: 0}
IMG, fieldset {border: ingen}
: fokus {disposition: ingen}
kroppen {font-family: Arial, font-storlek: 12px; bakgrund: #d1dde1}

.wrapper {bredd: 994px; marginal: 0 auto}

Det finns vissa koder som är mycket vanligt, och används varje gång vi skriver en CSS-fil, vi kallar det också som en standard kod i CSS. Ovan är inget annat än standardkoden, där på första raden vi har satt standardmarginalen och stoppning av vår layout till noll eller 0 med hjälp av den universella selector. I den andra och tredje raden, vi har satt gränsen för bilder och fältuppsättningen (formulärindata) till ingen och fokus kontur till ingen. Detta kommer att säkerställa att alla våra bilder bo gränsen gratis, oavsett vilken webbläsare användaren använder för att surfa på webbplatsen. Men vi har inte gjort någon form, men för att vara på den säkrare sidan vi skriva som i standard koden som en försiktighetsåtgärd, som du kan göra ett på sidan kontakt. Sedan i den fjärde och femte raden, har vi ange standard font-family, font-storlek och bakgrundsfärg för kroppen av webbsidan, och även ange standardbredd 994 pixlar och marginal på 0 auto för div med en klass av wrapper.