PSD till HTML5 konvertering: lägga till en HTML5 reglaget på en webbsida - del 2 (3 / 4 steg)
Steg 3: Huvuddel textbehållare
#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}
För huvuddelen behållare, definiera det via dess id dvs body_container och göra det flyta till vänster, ange dess bredd för 994 pixlar, marginal från upp till 5 pixlar, och definiera dess färgkod till svart. Om du minns det korrekt, har vi delat in denna behållare i två avsnitt dvs övre avsnitt och nedre delen, som vi kommer att täcka nästa. Så för nu, förklarar den övre delen, och göra det flyta till vänster, dess bredd till 960 pixlar och utfyllnad till 30 17 15 17 pixlar från toppen till vänster. Nu ställa in teckenstorlek, linje-höjd, färgkod, font-family, stoppning, font-weight, och text-transform för top avsnittsrubriken. Definiera sedan span etiketten att vi infört i h2-taggen och ange dess färgkod. Framåt, definiera stycketaggen, som dess font-storlek, line-height, färg, font-family och utfyllnad från botten. Sedan definiera båda bilderna inuti css och göra dem flyta till höger och ange deras marginal därmed.
Den nedre behållaren
#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}
Nu använder id för avsnitt etiketten för den nedre behållaren, göra det flyta till vänster, ange dess bredd för 994px, definiera dess bakgrundsfärg och ange utfyllnaden. Sedan förklara klassen av gemensam låda, gör det flyta till vänster och ange dess bredd och marginal från höger efter mätning från PSD-filen. Efter detta, definiera den andra gemensamma rutan och ange dess bredd. Som vi har nu satt båda rutorna krävs, nu definiera font-storlek, line-height, färgkod, font-family och utfyllnad från botten för rubriken. Upprepa detta för stycketaggen också, och i nästa rad ange färgkod för stycketaggen med en klass av sist.
Går framåt, förklarar taggen med en klass av namn, och ställa in den att flyta till höger, för text-decoration hålla det till ingen, och därmed anger dess font-storlek, line-height, färgkod och marginal från toppen. I nästa steg definiera taggen med en klass av kontakt, taggen listan inuti den, ankare tagg och sväva effekten och vid sista span etiketten enligt kraven.