Skip to content Skip to sidebar Skip to footer

Widget Atas Posting

Bantu Support Dunia Programming dengan menonaktifkan Adsblock, atau gunakan browser tanpa block iklan, dan jangan lupa klik iklan yang ada disitus ini ya, agar website terus berkembang

Layout Berbagai Model Dengan CSS Keren | Part 2

Saya akan memposting, bagaimana cara membuat macam-macam bentuk tampilan layout, kemaren saya sudah membuat tampilan Layout pertama, dan sekarang, saya akan memberikan gambaran tampilan layout yang kedua. apakah berbeda dengan yang pertama..? Pastinya berbeda dongs. 

Oke, Oke...Simak ya tutorialnya 
Let's Go...!! 

Tampilan model kedua
Tampilan Layout Model Ke-2
Untuk mengetahui hasilnya, silahkan kalian copy script dibawah ini, untuk html, beri nama index.html 

Script HTML
<!doctype html>
<html>
<head>
<title>Layout 2</title>
<link rel="shortcut icon" type="image/x-icon" href="smk.png" />
<link type="text/css" rel="stylesheet" href="Tugas 2.css">
</head>
<body>              
<div class="wrapper">
<div class="header">HEADER</div>
<div id="menu">
<ul>   
<li><a href="#">HOME</a></li>
<li><a href="#">WEB DEVELOPMENT</a>
<li><a href="#">WEB DESAIN</a>
<ul>
<li><a href="#">PARALLAX</a></li>
<li><a href="#">FLAT</a></li>
<li><a href="#">ORIGINAL</a></li>
<li><a href="#">PHOTOSHOP</a></li>
</ul>
</li>
<li><a href="#">TUTORIAL</a>
<ul>
<li><a href="#">TUTORIAL 1</a></li>
<li><a href="#">TUTORIAL 2</a></li>
<li><a href="#">TUTORIAL 3</a></li>
</ul>
</li>
<li><a href="#">TIPS & TRICK</a></li>
<li><a href="#">NEWS</a></li>
<li><a href="#">INSPIRATION</a></li>
<li><a href="#">GRAPHIC DESAIN</a></li>
<li><a href="#">COMENT</a></li>
</ul>
</div>
<div class="wrapper1">
<div class="side">LOGIN</div>
<div class="side">JUMLAH<br>PENGUNJUNG</div>
</div>
<div class="content">CONTENT</div>
<div class="sidebar">SIDEBAR</div>
<div class="sidebar">SIDEBAR2</div>
<div class="sidebar">SIDEBAR3</div>
<div class="sidebar">SIDEBAR4</div>
<div class="footer">FOOTER</div>
</div>
</body>
</html>

Copy Script CSS dibawah ini dan berinama style.css 

Script CSS
body {
    background: url("bg.jpg");
    background-size: 100%;
    background-attachment: fixed;
}
.wrapper {
    height: 639px;
    width: 1203px;
    border: 0px solid black;
    background: ;
    margin-left: auto;
    margin-right: auto;
    vertical-align: middle;
    font-family: calibri;
    font-size: 1.3em;
}
.wrapper1 {
    height: 455px;
    width: 271px;
    border: 0px solid black;
    background: ;
    margin: 0px 0px 0px 7px;
    text-align: center;
    vertical-align: middle;
    font-family: calibri;
    font-size: 1em;
    float: left;
}
.header {
    height: 48px;
    width: 1180px;
    border: 1px solid #ffffff;
    margin: 10px 1px 1px 7px;
    background: #8e44ad;
    color: #ffffff;
    text-align: center;
    border-radius: 10px 10px 0px 0px;
    padding: 35px 0px 10px 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;
}
#menu ul li ul {
    display: none;
}
#menu ul li:hover ul {
    display: block;
    position: absolute;
    top: 45px;
    left: -1px;
}
#menu ul li:hover ul li a {
    display: block;
    background: #000000;
    color: #ffffff;
    width: 180px;
}
#menu ul li:hover ul li a:hover {
    display: block;
    background: #ffffff;
    color: #000000;
    width: 180px;
}
#menu li:hover > a {
    color: #000000;
}
#menu li:hover, #menu a:focus, #menu a:hover, #menu a:active {
    background: #ffffff;
    color: #000000;
}
.side {
    height: 130px;
    width: 264px;
    border: 1px solid #ffffff;
    margin: 5px 0px 0px 0px;
    background: #86e2d5;
    color: #ffffff;
    padding: 80px 0px 0px 0px;
}
.content {
    height: 231px;
    width: 634px;
    text-align: center;
    border: 1px solid #ffffff;
    margin: 5px 8px 0px 4px;
    background: #eb9532;
    color: #ffffff;
    float: left;
    padding: 196px 0px 0px 0px;
}
.sidebar {
    height: 65px;
    width: 262px;
    border: 1px solid #ffffff;
    margin: 5px 1px 2px 0px;
    background: #cf000f;
    color: #ffffff;
    float: left;
    text-align: center;
    padding: 35px 0px 0px 0px;
}
.footer {
    height: 35px;
    width: 1181px;
    border: 1px solid white;
    margin: -15px 1px 0px 7px;
    background: #000000;
    text-align: center;
    color: #ffffff;
    float: left;
}      


Sekian Tutorial dari saya, apabila ada kesalahan atau terjadi ketidak sesuaian dalam penulisan script, silahkan anda dapat berkomentar dibawah artikel ini. Sekian Terimakasih.

2 comments for "Layout Berbagai Model Dengan CSS Keren | Part 2"