Dalam sebuah website, tampilan merupakan hal utama yang pertama kali dilihat. Sebagian besar website pada umumnya terdiri dari header, menu, content serta menu kanan, menu kiri atau keduanya, namun untuk kali ini kita akan membuat tampilan seperti gambar diatas yang yang terdiri dari header, menu, content menu kanan dan footer.
1. Pertama ketikkan script css dibawah ini dan simpan file tersebut dengan nama style.css.
.container{margin:0 auto; width:980px;font-family:arial;margin-top:20px}
#main, #header, #menu
{
overflow:auto;
}
#menu{background-color:#FF0000;
width:980px;
}
#footer
{
height:40px;
border-top:3px solid #333333;
}
#content
{
float:right;
width:640px;
}
#content article
{
margin-bottom:20px;
}
#menukanan{
float:right;
width:320px;
background-color:#dedede;
min-height:400px;
text-align:center;
}
#menu
{
overflow:auto;
}
#menu ul
{
list-style:none;
height:30px;
padding:0px;
margin:0px;
}
#menu ul li
{
float:left;
font-size:12px;
font-weight:bold;
}
#menu ul li a
{
color:#ffffff;text-decoration:none;display:block;padding:12px;text-align:center;min-width:100px;
}
#menu ul li a:hover
{
background-color:#000000;
color:#FFF;
}
|
2. Setelah selesai membuat file css, kita akan membuat file index.php dan memanggil css tersebut dengan fungsi div yang diletakkan di bawah <body>. Ketikkan script dibawah ini dan simpan dengan index.php.
<html>
<head>
<title>www.layout.com</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="container">
<img src="header.jpg" width="980" height="124"></header>
<div class="container" id="menu">
<ul>
<li><a href="#">Home1</a></li>
<li><a href="#">Home2</a></li>
<li><a href="#">Home3</a></li>
</ul>
</div>
<div class="container">
<div id="content">
</div>
<div id="menukanan">
Menu Kanan
</div>
</div>
<footer class="container" id="footer">
<img src="footer.jpg" width="980" height="57"></footer>
</body>
</html>
|
Perhatian !!
“Simpanlah file index.php dan style.css dalam 1 folder, untuk memasukkan gambar header dan footer bisa disesuaikan dengan gambar yang kalian inginkan dan sesuaikan dengan link gambar tersebut. Selamat mencoba ^_^.”
No comments:
Post a Comment