Untitled Document

--------------------------
linkki
--------------------------
linkki
--------------------------
linkki
--------------------------
linkki
--------------------------
linkki
--------------------------

Tämä ulkoasu on todella yksinkertainen mutta omalla tavallaan aika nätti. Tässä on myös rajattomasti eri muokkausmahdollisuuksia - eri värejä kokeilemalla, vaihtamalla kuvan ja lisäämällä piristykseksi vaikkapa jonkinlaista taustakuvaa, tästä saa ihan erinäköisen!

En ole tosiaan tehnyt näin yksinkertaista jo pitkään aikaan, ja pakko sanoa että tässä on sellainen ulkoasu jota käyttäisin itsekin ;) Oma kehu haisee ja näin, mutta on tosiaan harvinaista että teen ulkoasun josta pidän edes pikkuriikkisen!

Ohjeet ulkoasun kopiointiin

Kopioi ulkoasun grafiikat
Ulkoasu ei toimi oikein, jos yksi pikkukuvakin on jäänyt tallentamatta. Jotta saisit tämän ulkoasun sivuillesi, sinun on tallennettava nämä kuvat:

Kopioi ulkoasun koodit
index.html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link href="simple.css" rel="stylesheet" type="text/css"> </head> <body> <div id="otsikko">YKSINKERTAINEN ON KAUNISTA</div> <div id="sisalto"> <div id="navitable"> <p><img src="simple.jpg"> </p> <p align="center">--------------------------<br> <a href="linkki">linkki </a><br> --------------------------<br> <a href="linkki">linkki </a><br> --------------------------<br> <a href="linkki">linkki </a><br> --------------------------<br> <a href="linkki">linkki </a><br> --------------------------<br> <a href="linkki">linkki </a><br> --------------------------<br> </p> </div> <div id="tekstit"> <h1>väliotsikko h1</h1> <p>Tämä ulkoasu on todella yksinkertainen mutta omalla tavallaan aika nätti. Tässä on myös rajattomasti eri muokkausmahdollisuuksia - eri värejä kokeilemalla, vaihtamalla kuvan ja lisäämällä piristykseksi vaikkapa jonkinlaista taustakuvaa, tästä saa ihan erinäköisen!</p> <p>En ole tosiaan tehnyt näin yksinkertaista jo pitkään aikaan, ja pakko sanoa että tässä on sellainen ulkoasu jota käyttäisin itsekin ;) Oma kehu haisee ja näin, mutta on tosiaan harvinaista että teen ulkoasun josta pidän edes pikkuriikkisen!</p> <h2>väliotsikko h2</h2> <p align="center">ulkoasu © <a href="http://raitatossu.net/pilvimarja">Pilvimarja 2008</a> / <a href="mailto:muikkunen@raitapuomi.net">muikkunen</a> <br>Photo © <a href="http://www.lasikuu.net/vapaasti/">http://www.lasikuu.net/vapaasti/</a> </p> </div> </div> </body> </html>
simple.css
body { background: #fff; color: #505050; font-size: 12px; font-family: verdana; line-height: 18px; margin: 0 auto; padding: 0; } * {box-sizing: border-box;} a { font-family: verdana; font-size: 11px; color: #8A914B; text-decoration: none; } a:hover { font-family: verdana; font-size: 11px; color: #AAB079; text-decoration: none; } #paatab { width: 100%; } #paatab td { vertical-align: top; } #otsikko { width: 100%; background: #B2B880; padding: 15px; font-weight: bold; min-height: 48px; text-align: center; font-family: georgia; font-size: 2.0em; color: #fff; } #sisalto { width: 800px; margin: 0 auto; } .navi { width: 229px; } #navitable { width: 170px; text-align: center; background: #F2F2F2; border-style:solid; border-color:#B2B880; border-width:1px; border-top: 0; float: left; padding: 14px;} #navitable img { width: 135px; height: 201px; border-style:solid; border-color:#B2B880; border-width:3px; } #tekstit { padding: 14px; width: 571px; background: #F2F2F2; border-style:solid; border-color:#B2B880; border-width:1px; border-top: 0; float: right; font-size: 11px; } h1, h2, h3 { font-style: italic; font-weight: normal; margin-top:3 0px; font-family: palatino linotype; color: #8A914B; }

Voilá!
Liitä koodit tyhjään tiedostoon ja muokkaa ulkoasun tekstit ja muut - nyt sinulla on sivuillasi uusi ulkoasu! Jos jokin jäi vielä epäselväksi, lähetä sähköpostia.