Desain Layout Halaman Web
Gambar tersebut adalah tampilan desain layout halaman web dengan memanfaatkan CSS (Cascade Style Sheet).
Untuk dapat membuat desain layout seperti itu yang pertama adalah membuat file css kemudian simpan dengan nama new1.css sebagai berikut :
#wrapper {
margin: auto;
width: 750px;
border: 1px solid black;
}
#header {
height: 90px;
border: 1px solid black;
margin-bottom:5px;
}
#inner {
float: left;
margin: 10px 0;
width: 750px;
border: 1px solid green;
}
#inner2{
float: left;
margin-left:12px;
width: 589px;
height:310px;
border: 1px solid green;
}
#sidebar {
float: left;
margin-right: 0;
width: 145px;
height:310px;
border: 1px solid red;
}
#top{
height: 100px;
border: 1px solid black;
}
#content {
float: left;
margin-right:15px;
width: 385px;
height: 201px;
border: 1px solid red;
margin-bottom: 5px;
}
#right {
float: right;
width: 185px;
height: 155px;
border: 1px solid red;
}
#footer {
clear: both;
margin-top: 5px;
height: 79px;
border: 1px solid black;
}
Selanjutnya adalah membuat file html kemudian simpan dengan nama 1.html
Letakkan file css dan html pada satu folder kemudian jalankan melalui localhost.
Selamat mencoba. Semoga bermanfaat...
0 komentar:
Posting Komentar