Langgsung saja, Ini Code HTMLnya
<html>
<head>
<title>layout & menu dengan CSS</title>
<link rel="stylesheet" type="text/css" href="P06-style-2.CSS">
</head>
<body>
<div id="header"><marquee><Blink>Menu Atas</Blink></marquee></div>
<div id="Top"> <div id="Menu_atas">
<a href="#">Sitemap</a>
<a href="#">Profil</a>
<a href="#">Recent post</a>
</div> </div>
<div id="Menu_kiri"> <ul>
<li><a href="#">Home</a></ul></li>
<ul><li><a href="#">Isi bukutamu</a></ul></li>
<ul><li><a href="#">Daftar bukutamu</a></ul></li>
<ul><li><a href="#">Tutorial php mysql</a></ul></li>
<ul><li><a href="#">Berita terbaru</a></ul></li>
<ul><li><a href="#">Login</a></ul></li>
</div> <div id="content">Bagian isi</div> </div>
<div id="footer">
<blink>copyright:Apradiz Newcyber</blink></div>
</body>
</html>/*file: P06-style-2.CSS */
body{
font-family:chiler;
font-size:20px;
text-align:center;
color:white;
}
#header{
width:100%;
height:10%;
background:black;
}
#top{
width:90%px;
height:24%px;
background:white;
border-top:orange solid 1px;
border-bottom:orange solid 1px;
border-right:orange solid 1px;
}
#menu_atas{
float:right;
width:auto;
background:transparent;
}
#menu_atas a{
text-decoration: none;
color:Black;
padding-left:10px;
padding-right:10px
}
#menu_atas a:hover{
text-decoration: none;
color:white;
}
#center{
width:400px;
height:90px;
}
#menu_kiri{
width:20%;
height:510px;
background:Red;
float:left;
}
#menu_kiri a{
padding-left:15px;
display:block;
background:transparent;
text-decoration: none;
color:Black;
border-bottom:black solid 1px;
}
#menu_kiri a:hover{
padding-left:15px;
display:block;
background:blue;
text-decoration: none;
color:orange;
border-bottom:orange solid 1px;
}
#content{
height:510px;
background:#aff331;
color:red;
}
#footer{
width:100%;
height:40px;
background:blue;
}Keteranga: Dari 2 file di Atas disimpan dalam 1 Folder
Share This :
comment 9 Comment
more_vertmantap gan
14 July 2014 at 02:40Terima kasih, ini cukup memudahkan saya :)
2 December 2014 at 04:43ya, sama -sama
3 December 2014 at 16:51Bang kok hasilnya beda sama di gambar sih ??
4 December 2014 at 06:19Bedanya dimananya mas? perasaan g ada yang beda..
5 December 2014 at 01:22Bagus tuh gan tutorialnya :
2 February 2015 at 14:28ini versi ane hasil ngotak-ngatik kodena agan
http://longscripts.blogspot.com/2015/01/cara-membuat-layout-sederhana-dengan-css.html
hehhehhe.. mantap gan..
2 February 2015 at 15:27@maulana panji
28 March 2015 at 21:28yang file css pas di save nya kasih nama( P06-style-2.CSS )
biar nge link ke sini href="P06-style-2.CSS"