3 Rock Solid Website Layout Exempel Kodad

Nyligen på Design Shack presenterade vi en artikel med titeln? 10 Rock Solid Website Layout Exempel ?, som bröt ner några vanliga layouter i enkla siluettrådramar så att du enkelt skulle kunna tillämpa dem i ditt arbete.

Idag har jag valt tre av dessa layouter och konverterat dem till levande, lyhörda webbsidor med lite HTML och CSS. De är alla super enkla och lätta för många nybörjare att ta på, plus vi kommer att använda en fantastisk ram för att göra den tunga lyftningen.

Skelett: En panna för Responsive Web Design

I ännu en ny artikel, gick jag över hur man använder Skelettramverket för att bygga webbsidor som är "responsiva", vilket betyder att de svarar bra på nästan alla storlekar i webbläsarfönstret. Responsiva webbsidor ser bra ut på stora plattskärmar, små skärmsläckare och allt däremellan.

Sedan jag trivdes med att använda det, använder vi Skelett än en gång idag för att göra dessa enkla layouter till fullständigt mottagliga webbsidor. Det blir så enkelt att vi kan täcka tre i ett enda inlägg, låt oss börja!

Om du följer med, var noga med att ladda ner Skeleton Boilerplate först!

Tre lådor

Den första är ett otroligt enkelt men ändå effektivt sätt att göra bilder till den verkliga hjälten på din hemsida. Huvuddelen av sidan tas upp av tre stora bilder som kan vara statiska bilder eller dynamiska bildspel.

HTML

Bilden ovan har fem uppenbara element som vi behöver skapa: logotypen (övre vänster), navigering (högra höger), stor bild och två mindre bilder. Det första vi behöver göra är att skapa en div för varje och bestämma vissa bredder.

Skeleton Boilerplate använder ett sexton kolonnsystem så att dela upp området i två sektioner som vi använder klasserna? Åtta? och? kolumner ?. På samma sätt, om vi vill att innehållet ska sträckas hela vägen vi bara använder? Sexton? istället.

Nu måste vi fylla våra divs med innehåll. Vi använder bara text för logotypområdet och kastar i en orörd lista för navigeringen som vi kan flyta till vänster för att tvinga elementen till en horisontell layout. Slutligen, för de andra behöver vi bara några platshållare bilder.

<h2>Design Shack</h2> <ul> <li>Hem</li> <li>Handla om</li> <li>Kontakta</li> </ul> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_3.jpg"> <h2>3D-skärmdumpar</h2> <p>Den här använder en mycket vanlig effekt där du skapar en låsning av några skärmdumpar från din webbplats och ordnar dem att ge utseendet på ett 3D-utrymme. Mockupen för skärmdumparna görs i Photoshop, så du behöver verkligen bara en stor bild och lite text. Det kunde inte bli enklare!</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_4.jpg"> <h3>html</h3> <p>Den här är ganska lik den sista, så jag kommer att ändra saker lite från den ursprungliga konturen bara lite. Till sist får vi en ganska annorlunda sida än den sista. </p> <textarea wrap="soft" readonly="">

Som du kan se finns det en kurvboll här i form av ett extra omslag, vilket gör det möjligt för oss att sätta in den mörka fältet bakom innehållet högst upp på sidan. Därefter är allt fint och enkelt och vi behöver bara två fullbredds div.

<h3>DS</h3> <ul> <li>Hem</li> <li>Handla om</li> <li>Kontakta</li> </ul> <h1>Lorem Ipsum Dollerset</h1> <p>Vad är det med dig? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_5.jpg"> <h2>Utvalda grafiska</h2> <p>Den här är utmärkt för att visa ikoner, skärmdumpar, logotyper eller något annat som ser bra ut i en stor cirkel. Återigen finner vi att layoutarbetet är nästan enkelt och resultatet känns unikt och intressant.</p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_6.jpg"> <h3>html</h3> <p>Detta går runt vi lägger logotypen och navigeringen på olika linjer och delar sedan bredden på nästa rad mellan storcirkelbilden och texten.</p> <p>Lägg märke till att istället för att dela innehållet med två åtta kolumner? klasser, jag använde och åtta och en sju. Sedan lade jag in en tom plats med en "offset-by-one"? klass.</p> <textarea wrap="soft" readonly="">

Innehållet här är alla saker vi har sett tidigare, en header-tagg för logotypen, ul för navigering, ett par styckelaggar och en bild. Det är allt som krävs, lite styling och vi lägger upp det här inlägget!

<h3>Design Shack</h3> <ul> <li>Hem</li> <li>Handla om</li> <li>Portfölj</li> <li>Kontakta</li> </ul> <h1>Lorem Ipsum</h1> <p>Vad är det med dig? </p> <p>Vad är det med dig? </p> <img src="//lesptitesaffairesdemayl.be/img/images_1/3-rock-solid-website-layout-examples-coded_7.jpg"> <h2>Slutsats</h2> <p>Som du kan se kan våra exempel på stenformat layout konverteras till HTML och CSS med mycket liten ansträngning. Genom att använda Skeleton kunde vi även göra layouterna lyhörda för olika webbläsarstorlekar med bara några extra rader av kod.</p> <p>Jag hoppas att du haft denna handledning och tycker att den är användbar för framtida projekt. Känn dig fri att stjäla min kod och använd den som du passar!</p>