Membuat Layout Web Dengan CSS
Beberapa waktu yang lalu seorang temen kamus, adik tingkat meminta tolong kepada saya untuk di buatkan sebuah layout web dengan menggunakan CSS. Karena sudah dekat maka saya bantu buatkan saja kasian, itung - itung menolong orang karena mungkin saja suatu saat saya juga butuh pertolongan dari dia. Layout yang ditugaskan dari dosen web ini sebenarnya standar sekali dimana ada header, footer content dan juga tempat widget. Mungkin untuk temen - teman yang merasa di tugaskan hal yang sama saya disini coba bagi file html dan CSS untuk lebih tahu jauh tinggal pelajari saja karena disini saya buat sangat simple sekali dan saya rasa bisa kok di pelajari, untuk kodenya lihat dibawah ini :
File HTML
<html> <head> <title>Tugas Web Wulan</title> <link rel="stylesheet" href="cssone.css" /> </head> <body> <div id="blok1"> <div id="blok2"></div> <div id="blok3"> <div id="blok3a"></div> </div> <div id="blok4"></div> </div> </body> </html>Sebaiknya disimpan dengan nama index.html
File CSS
/*
Document : cssone
Author : Megi Tristisan
Description:
Purpose of the stylesheet follows.
*/
root {
display: block;
}
#blok1{
width:800px;
height:100px;
border:1px solid #cdcdcd;
background:#639fce;
margin:auto;
margin-top:30px;
}
#blok2{
width:300px;
height:500px;
border:1px solid #cdcdcd;
background:#FF00FF;
float:left;
margin-top:100px;
}
#blok3{
width:500px;
height:500px;
border:1px solid #cdcdcd;
background:#FF00FF;
margin-top:100px;
margin-left:299px
}
#blok4{
width:800px;
height:100px;
border:1px solid #cdcdcd;
background:#2fb075;
margin:auto;
}
#blok3a{
width:400px;
height:400px;
border:1px solid #cdcdcd;
background:#FFFAF0;
margin-top:50px;
margin-left:50px
}
Untuk css disimpan dengan nama apa saja asal jangan lupa dalam file html harus disertakan.
