Berikut adalah studi kasus pada modul 4 :
a. Sintaks pada file.css (cobastyle.css)
body
{
margin :10px auto;
width : 750px;
}
header,nav,article,aside,section,footer
{
display:block;
border:1px solid green
}
header
{
height:80px;
border:1px solid green;
}
nav
{
float:left;
width:748px;
height:30px;
border:1px solid blue;
}
article
{
clear:both;
margin-top:10px;
margin-left:30px;
float:left;
width:450px;
height:370px;
border:1px dashed red;
}
aside
{
margin-top:10px;
margin-left:530px;
margin-right:50x;
width:200px;
height:370px;
border:1px dashed black;
}
section
{
clear:both;
margin=left:400px;
width:748px;
height:400px;
border:1px solid red;
}
footer
{
clear:both;
heigth:20px;
border:1px solid green;
}
b. Sintaks pada file.html (coba.html)
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>DESAIN LAYOUT MODUL 4</title>
<link rel="stylesheet" href="cobastyle.css" type="text/css"/>
</head>
<body>
<header>
header
</header>
<nav>
nav
</nav>
<section>
<article>
article
</article>
<aside>
aside
</aside>
section
</section>
<footer>
footer
</footer>
</body>
</html>
Dan berikut adalan printscreen sintaks diatas :
Tidak ada komentar:
Posting Komentar