Pembuatan desain seperti diatas lebih mudah dibuat dengan menggunakan CSS, dibawah ini merupakan code CSS dan Code HTMLnya untuk membuat desain web seperti diatas...
Code CSS yang disimpan dengan nama mod3tgs1.css:
#wrapper {
margin: auto;width: 756px;
border: 1px solid Blue;
}
#header {
height: 70px;
border: 1px solid green;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#inner2 {
float: left;
width: 550px;
height: 330px;
border: 1px solid green;
}
#top{
height: 70px;
border: 1px solid red;
}
#content {
float: left;
margin-right: 20px;
width: 320px;
height: 250px;
border: 1px solid red;
}
#right {
float: right;
width: 205px;
height: 200px;
border: 1px solid green;
}
#footer {
clear: both;
height: 50px;
border: 1px solid green;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Desain_Layout_Halaman_Web_By_DwiPriyatmoko</title>
<link rel="stylesheet" href="mod3tgs1.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="inner2">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
<div id="right">
Right
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Klik disini untuk mengunduh file html maupun file CSS-nya..
Terima kasih atas kunjungannya...semoga bermanfaat, jangan lupa comment'nya ya...mungkin kalau ada saran ataupun kritik...
No comments:
Post a Comment