Tulis aja dulu, siapa tahu orang lain butuh :-)

MEMBUAT HALAMAN WEB MENGGUNAKAN DIV DAN CSS DI HTML

style.css
#main{
background:black;
width:810px;
height:685px;
margin:auto;
font-family:arial;
}

#header{
background: red;
width:800px;
height:110px;
margin-left:5px;
margin-bottom:3px;
padding-top:35px;

}

#topmenu{
background: orange;
width:800px;
height:25px;
margin-left:5px;
margin-top:3px;
padding-top:5px;
}

#menukiri{
background: green;
width:160px;
height:390px;
float:left;
margin-left:5px;
margin-top:3px;
padding-top:10px;
text-align:center;
}

#isi{
background: yellow;
width:617px;
height:380px;
float:left;
margin-left:3px;
margin-bottom:3px;
margin-top:3px;
padding: 10px 10px 10px 10px;
text-align:justify;
text-indent:25px;
}

#footer{
background: blue;
width:300px;
height:60px;
clear:left;
color:white;
margin-left:5px;
padding-left:500px;
padding-top:40px;
}
a{
text-decoration:none;
color:white;
padding-top:5px;
padding-bottom:5px;
padding-left:47.9px;
padding-right:47.9px;
}

a:hover{
color:#FFFFFF;
background: red;
padding-left:47.9px;
padding-right:47.9px;

}



halaman.html
<html>
<head>
<title>PENGGUNAAN DIV</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="main">
<div id="header"><h1 align="center">JUDUL WEB</h1></div>
<div id="topmenu">
<a href="#">MENU 1</a>
<a href="#">MENU 2</a>
<a href="#">MENU 3</a>
<a href="#">MENU 4</a>
<a href="#">MENU 5</a>
</div>
<div id="menukiri">
IKLAN
</div>
<div id="isi">
ISI
</div>
<div id="footer" align="center">
Designed by M. Anang Setiawan
</div>
</div>
</body>
</html>

Share:

0 komentar:

Post a Comment

VISITORS

free counters

FRIENDS