Studi Kasus modul 4 menggunakan html5 dimana kita menggunakan elemen-lemen seperti header, nav, section, aside dan footer sehingga elemen-lemen baru tersebut dapat lebih mudah dan praktis dalam penyusunan style jadi kita tidak perlu lagi mendefinisikan elemen division lagi..
Pada studi kasus modul4 ini terdapat 2 file yaitu file.css dan file.html, untuk syntax lebih lengkapnya sbb :
FILE .CSS
body{
margin:10px auto;
width:750px;
}
header,nav,section,article,aside,footer{
display:block;
/*border:1px solid blue;*/
}
header{
height:80px;
border:1px solid green
}
nav{
height:50px;
border:1px solid blue;
padding:10px;
}
ul{
margin:0;
padding:0;
list-style:none;
}
ul li{
position: relative;
float:left;
width:100px;
}
li ul{
position:absolute;
top:25px;
display:none;
}
ul li{
display:block;
line-height:20px;
text-align:center;
padding:7px;
background: red;
margin:0 2px;
border:1px solid blue;
}
ul li a:haver{background: grey;}
li:hover ul, li.over ul{display:block;}
section{
padding:20px;
height:400px;
border:1px solid red;
}
article{
float:left;
width:70%;
height:100%;
border:2px dashed red;
}
aside{
float:right;
width:25%;
height:100%;
border:2px dashed black;
}
footer{
clear:both;
height:20px;
border:1px solid green;
}
0 komentar:
Posting Komentar