Senin, 19 Oktober 2015

HTML - CSS membuat layout sederhana menggunakan css



membuat layout sederhana menggunakan html - css

pertama buat 2 file dalam 1 folder = file pertama beri nama belajarlayout.php dan file kedua beri nama belajarlayout.css 

tempat kan folder file tersebut kedalam htdocs pada xampp

lalu buat codingan pada file belajarlayout.php 



<!DOCTYPE html>

<html>

<head>

 <title>belajar CSS</title>

 <link rel="stylesheet" href="belajarlayout.css">

</head>

<body>

 <div class="container">

  <div class="banner">banner</div>

  <div class="navigasi-menu">

   <div class="menu"><a href="">Home</a></div>

   <div class="menu"><a href="">About Us</a></div>

   <div class="menu"><a href="">Product</a></div>

   <div class="menu"><a href="">Contact Us</a></div>

   <div class="menu"><a href="#">Site Maps</a></div>

  </div>

  <div class="content_kiri">content kiri</div>

  <div class="content_tengah">content tengah</div>

  <div class="content_kanan">content kanan</div>

  <div class="footer">footer</div>

 </div>

</body>

</html>
dan kedua buatlah file bernama belajarlayout.css


.container{
 width: 1000px;
 height: 650px;
 border:1px solid #000;
 margin: 0 auto;
}

.banner{
 width: 100%;
 height: 100px;
 background:#ccc; 
 text-align: center;
}
.navigasi-menu{
 width: 100%;
 border: 1px solid #000;
 border-right: 0px;
 border-left: 0px;
}
.menu a{
 width: 20%;
 text-align: center;
 background: #eee;
 float: left;
 display: block;
 border-bottom: 1px solid #000;
 text-decoration: none;
}
.menu a:hover{
 background: #ccc;
 color: #000;
}
.content_kiri{
 width: 20%;
 height: 480px;
 float: left;
 text-align: center;
}
.content_tengah{
 width: 59%;
 height: 480px;
 float: left;
 border-right: 1px solid #ccc;
 border-left: 1px solid #ccc;
 text-align: center;
 background: #eee;
}
.content_kanan{
 width: 20%;
 height: 480px;
 float: left;
 text-align: center;
}
.footer{
 width: 100%;
 height: 49px;
 background: #ccc;
 float: left;
 text-align: center;
 border-top: 1px solid #000;
}
Kemudian coba jalankan di browser anda Selamat mencoba :)

0 komentar:

Posting Komentar