Minggu, 20 Mei 2012

Membuat sketsa dengan CSS


 Codingnya sebagai berikut :




<html>

<head>

<title>Ricko Chantriano</title>

<style type="text/css">
#page{
    margin= 0 auto;
    background = #03F;       
}
.box{

width: 750px;

height:50px;

border-color: blue;

border-style: double;

padding: 1px;

border-width: 5px;

}

.box1{

width: 500px;

height:350px;

text-align:center;

border-color: red;

border-style: dashed;

padding: 1px;

border-width: 3px;

}

.box2{

width: 250px;

height:350px;

text-align:center;

border-color: blue;

border-style: dashed;

padding: 1px;

border-width: 3px;

}

.box3{

width: 750px;

height:30px;

border-color: red;

border-style: groove;

padding: 1px;

border-width: 3px;

}

 .box4{

width: 750px;

height:30px;

border-color: blue;

border-style: groove;

padding: 1px;

border-width: 3px;

}



</style>

</head>



<body>


<table border="3" bordercolor="#0000FF" align="center">

  <tr>

    <td colspan="3" class="box" align="center">Header</td>

  </tr>

  <tr>

      <td class="box3" colspan="3" align="left">

       <table>

    <tr>
        <td><button style="color: #0C6; border:3px double #000000; background-color:#0f0;">Home</button></td>
     <td><button style="color: #0C6; border:3px double #000000; background-color:#0f0;">Article</button></td>

     <td><button style="color: #0C6; border:3px double #000000; background-color:#0f0;">About</button></td>

     <td><button style="color: #0C6; border:3px double #000000; background-color:#0f0;">Help</button></td>

    </tr>

    </table>

      </td>

  </tr>

  <tr>

    <td width="663">&nbsp;</td>

    <td width="6">&nbsp;</td>

    <td width="71">&nbsp;</td>

  </tr>

  <tr>

    <td class="box1">Article</td>

    <td >&nbsp;</td>

    <td>

    <table>

    <tr>

     <td class="box2"><input type="submit" value="Login"/></td>
       
    </tr>

    </table>

    </td>

  </tr>

  <tr>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

    <td>&nbsp;</td>

  </tr>

  <tr>

   <td class="box4" colspan="3" align="center">Fotter</td>

  </tr>

</table>

</body>

</html>

Tidak ada komentar:

Posting Komentar