Sunday, February 27, 2011

LayouT..

Pembuatan desain Layout website dengan memanfaatkan elemen HTML5.
Hasilnya seperti:


Code .cssnya:

body{
margin : 10px auto;
width : 900px;
border : 1px solid green ;
}

header, nav, section, article, aside, footer{
display : block;
text-align  : left;
}

button input{
height:30px;
width:50px;
border: 1px solid black;
}

header{
height: 80px;
border : 1px solid green;
}

nav{
width: 900px;
height: 30px;
border : 1px solid blue;
}

section{
width : 900px;
height : 450px;
border : 1px solid red;
}

article{
float: left;
margin : 20px;
width: 500px;
height: 410px;
border: 1px dashed red;
}

aside{
margin : 20px;
margin-left: 540px;
width: 335px;
height: 410px;
border: 1px dashed black;
}

footer{
clear : both;
height : 30px;
}

Code .htmlnya:

<!Doctype html>
<html lang="en">

<head>
<TITLE>Studi Kasus</TITLE>
<link rel="stylesheet" href="mboh.css" type="text/css" />
</head>

<body>
<header>header</header>
<nav>nav
<button>
RAGIL
</button>
<button>
TRI
</button>
<button>
ASTUTI
</button>
<button>
209533420398
</button>
</nav>
<section>
<article>article</article>
<aside>aside</aside>
</section>
<footer>footer</footer>
</body>
</html>

No comments:

Post a Comment