Layout Berbagai Model Dengan CSS Keren | Part 1
Pada tutorial kali ini Dunia Programming akan membahas, bagaimana cara membuat macam-macam bentuk tampilan layout, sebelum itu saya ingin bertanya,
Apakah kalian tau apa itu layout...?.
Untuk desain layout di Dunia Programming, saya buat menjadi 3 model
Model pertama
Apakah kalian tau apa itu layout...?.
"Layout...? Apa itu...?"Layout adalah sebuah wadah web atau tempat content yang nantinya akan diposting. Layout memiliki banyak macam-macam, jadi anda bisa mendesain bentuk layout sesuai dengan kemauan kalian, oke kita simak Tutorial berikut.
Untuk desain layout di Dunia Programming, saya buat menjadi 3 model
Model pertama
 |
| Tampilan Layout Versi Dunia Programming |
Untuk Scriptnya Silahkan Kalian Copas Dibawah Ini.
Simpan file HTMl dibawah ini, berinama index.html
Script HTML
<!doctype html>
<html>
<head>
<title>Contoh Layout Bagian II</title>
</head>
<body>
<div class="wrapper">
<div class="header">HEADER</div>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
<li><a href="#">MENU 6</a></li>
<li><a href="#">MENU 7</a></li>
</ul>
</div>
<div class="wrapper1">
<div class="side">Login</div>
<div class="side">Jumlah Pengunjung</div>
</div>
<div class="content">Ini adalah Tempat Untuk isi</div>
<div class="sidebar">Ini adalah menu samping</div>
<div class="sidebar">Ini adalah menu samping</div>
<div class="sidebar">Ini adalah menu samping</div>
<div class="sidebar">Ini adalah menu samping</div>
<div class="footer">Copyright by : Tutorial Web Pemula | 2016 Design by : Muhammad Tajuddin</div>
</div>
</body>
</html>
<html>
<head>
<title>Contoh Layout Bagian II</title>
</head>
<body>
<div class="wrapper">
<div class="header">HEADER</div>
<div id="menu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
<li><a href="#">MENU 6</a></li>
<li><a href="#">MENU 7</a></li>
</ul>
</div>
<div class="wrapper1">
<div class="side">Login</div>
<div class="side">Jumlah Pengunjung</div>
</div>
<div class="content">Ini adalah Tempat Untuk isi</div>
<div class="sidebar">Ini adalah menu samping</div>
<div class="sidebar">Ini adalah menu samping</div>
<div class="sidebar">Ini adalah menu samping</div>
<div class="sidebar">Ini adalah menu samping</div>
<div class="footer">Copyright by : Tutorial Web Pemula | 2016 Design by : Muhammad Tajuddin</div>
</div>
</body>
</html>
Script CSS
body {
background: url("bg.jpg");
background-size: 100%;
background-attachment: fixed;
}
.wrapper {
height: 639px;
width: 1200px;
border: 0px solid black;
background: ;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
font-family: calibri;
font-size: 1.3em;
}
.header {
height: 100px;
width: 1180px;
border: 1px solid white;
margin: 7px 1px 1px 7px;
background: #8e44ad;
color: #ffffff;
text-align: center;
border-radius: 10px 10px 0px 0px;
}
#menu {
position: relative;
width: 1173px;
height: 45px;
background: #000000;
border: 5px solid #c9c9c9;
margin-left: 7px;
margin-top: 9px;
margin-bottom: 5px;
font-size: 14px;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
float: left;
color: #ffffff;
padding: 14px;
display: block;
text-decoration: none;
}
#menu ul li a:hover {
background: #ffffff;
height: 18px;
}
.content {
height: 425px;
width: 762px;
border: 1px solid #ffffff;
margin: 2px 9px 0px 7px;
background: #eb9532;
color: #ffffff;
float: left;
text-align: center;
}
.sidebar {
height: 425px;
width: 407px;
border: 1px solid #ffffff;
margin: 2px 1px 0px 0px;
background: #cf000f;
color: #ffffff;
float: left;
text-align: center;
}
.footer {
height: 35px;
width: 1180px;
border: 1px solid white;
margin: 7px 1px 0px 7px;
background: #000000;
color: #ffffff;
float: left;
text-align: center;
}
background: url("bg.jpg");
background-size: 100%;
background-attachment: fixed;
}
.wrapper {
height: 639px;
width: 1200px;
border: 0px solid black;
background: ;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
font-family: calibri;
font-size: 1.3em;
}
.header {
height: 100px;
width: 1180px;
border: 1px solid white;
margin: 7px 1px 1px 7px;
background: #8e44ad;
color: #ffffff;
text-align: center;
border-radius: 10px 10px 0px 0px;
}
#menu {
position: relative;
width: 1173px;
height: 45px;
background: #000000;
border: 5px solid #c9c9c9;
margin-left: 7px;
margin-top: 9px;
margin-bottom: 5px;
font-size: 14px;
}
#menu ul {
padding: 0px;
margin: 0px;
list-style: none;
}
#menu ul li {
float: left;
position: relative;
}
#menu ul li a {
float: left;
color: #ffffff;
padding: 14px;
display: block;
text-decoration: none;
}
#menu ul li a:hover {
background: #ffffff;
height: 18px;
}
.content {
height: 425px;
width: 762px;
border: 1px solid #ffffff;
margin: 2px 9px 0px 7px;
background: #eb9532;
color: #ffffff;
float: left;
text-align: center;
}
.sidebar {
height: 425px;
width: 407px;
border: 1px solid #ffffff;
margin: 2px 1px 0px 0px;
background: #cf000f;
color: #ffffff;
float: left;
text-align: center;
}
.footer {
height: 35px;
width: 1180px;
border: 1px solid white;
margin: 7px 1px 0px 7px;
background: #000000;
color: #ffffff;
float: left;
text-align: center;
}
Lalu, coba kalian buka atau klik 2x bagian index.html dan lihat hasilnya...
Bagaimana...? keren bukan...? lalu bagaimana cara mengisi layout tersebut...?, tetep di Dunia Programming, jangan sampai ketinggalan tutorial ya kawan...
Next, Tutorial Model Layout Nomer Dua tentunya berbeda degan layout ini, kalau mau lanjut, kalian bisa click linknya dibawah ini.
Sekian Dari saya, semoga ilmu yang saya berikan bermanfaat, Terimakasih.
Belum ada Komentar untuk "Layout Berbagai Model Dengan CSS Keren | Part 1"
Posting Komentar