Contoh Layout Web Dengan Css Beserta Aba-Aba

Di postingan sebalumnya kita sudah mebahas apa itu layout web, disana aku juga sudah memperlihatkan Contoh layout dengan HTML murni

Nah kali ini aku akan memperlihatkan rujukan desain layout dengan memakai css (cascading stylesheet) dimana layaout tersebut didesain dengan dukungan CSS supaya tampilan halaman website lebih terlihat menarik.

Pada postingan ini aku juga akan membrikan source instruksi nya untuk anda yang gres terjun ke dunia desain web. karna ini hanya sebagai rujukan supaya anda sanggup berguru dan memahami fungsi CSS.

Baca Juga : Belajar Dasar HTML Mulai dari Nol

Contoh Layout Web Dengan CSS Beserta Kode

Sebagai rujukan layout tersebut lihat gambar dibawah ini :

Contoh Layout Dengan CSS

Contoh diatas sangat sederhana sekali, dan anda yang gres mulai berguru HTML dan CSS sanggup mempelajarinya dari tiap-tiap bab box nya menyerupai Header, Menu, Konten, Naigasi dan Footer.

Dibawah ini aku akan memperlihatkan kode-kode dari tampilan layout tersebut supaya anda sanggup mempeljarinya dengan gampang ( Silahkan di copy paste ) .

<html> <head> <title>Contoh Desain Layout dengan CSS</title>    <style> body {     margin:0; }   .pembungkus {     width:900px;     padding:5px;     border:1px solid gray;     margin:5px auto; }   .header {     height:140px;     background-color:#CCC; }   .menu {     height:35px;     background-color:skyblue; }   .kontent {  width:628px;  float:left;     background-color:#fff;     min-height:300px;  padding:10px; } .kontent p{  text-align:justify; } .navigasi {     float:right;     width:250px;     background-color:#f0f0f0;     min-height:500px; }   .footer {     clear:both;     height:30px;     background-color:#CCC;  text-align:center;  padding-top:12px; }  </style><-- tutup file css --> </head>   <body>   <div class="pembungkus">     <div class="header">         Header     </div> <div class="menu">         sajian     </div> <div class="kontent">        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div class="navigasi">         Navigasi     </div> <div class="footer">         Footer     </div> </div> </body> </html>

Copy paste instruksi diatas ke text editor anda dan silahkan anda jalankan pada browser anda, semoga artikel ini sanggup membantu anda yang gres mulai berguru mendesain halaman web dengan css. Semoga bermanfaat dan jangan lupa share dan membuatkan ke teman anda yang lain yang ingin belajar.

TKJ

Contoh Layout Web Dengan Css Beserta Aba-Aba

Contoh Layout Web Dengan CSS Beserta Kode

Footer Menu