Kamis, 30 April 2015

Tampilan Layout Website CSS

Pada postingan kali ini, saya akan membuat sebuah tampilan layout website sederhana. Misalnya tampilan layout blog seperti di bawah ini


Berikut adalah script dari tampilan layout yang saya buat


 <!DOCTYPE html > 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html" />
 <meta name="author" content="puspita" />
        <title>Layout Blogspot</title> 
        <style type="text/css">     
            body{ 
                width:980px; 
                margin:0 auto; 
                }     
            #header { 
                height:100px; 
                padding:10px;
                background-color:#3FB3E0; 
                text-align: center;
                border: 1px solid;
                }   
            #rightside1{
                text-align: center;
                height:75px; 
                padding:10px;
                background-color:#6EE461;
                float:right;
                width:250px; 
                margin:10px 0px 0 200px; 
                border: 1px solid;
                }
            #rightside2{
                text-align: center;
                height:190px; 
                padding:10px;
                background-color:#6EE461;
                float:right;
                width:250px; 
                margin: 10px 0px 0 800px; 
                border: 1px solid;
                }     
            #content {
                text-align: center;
                height:300px; 
                padding:10px;
                background-color:#6EE461;
                margin:10px 290px 0 0; 
                border: 1px solid;
                }     
            #footer { 
                clear:both; 
                height:50px;
                padding:10px; 
                background-color:#DFB47B; 
                margin-top:10px;
                border: 1px solid;
                text-align: center;
                } 
            #nav{
                height:50px; 
                padding:10px;
                background-color:#8FF8E5; 
                text-align: right;
                border: 1px solid;
                margin: 10px 0 10px 0; 
                }
        </style> 
</head> 
<body>  
        <div id="nav"> NAVBAR</div> 
        <div id="header"> dewipuspitasari(HEADER)</div> 
        <div id="rightside1">RIGHTSIDE1<br/> Mengenai Saya</div> 
        <div id="rightside2">RIGHTSIDE2 <br/> Arsip Blog</div> 
        <div id="content">CONTENT<br />Posting Blog</div> 
        <div id="footer">FOOTER<br/> Atribusi</div>
</body> 
</html> 

Dan ini hasil dari tampilan script di atas



Tidak ada komentar:

Posting Komentar