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"> </td>
<td width="6"> </td>
<td width="71"> </td>
</tr>
<tr>
<td class="box1">Article</td>
<td > </td>
<td>
<table>
<tr>
<td class="box2"><input type="submit" value="Login"/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="box4" colspan="3" align="center">Fotter</td>
</tr>
</table>
</body>
</html>
Selasa, 24 April 2012
Langganan:
Komentar (Atom)


