Minggu, 06 Maret 2011

Kasus 4

Membuat layout sederhana...


HTML

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

<head>
<title>Studi Kasus</title>
<link rel="stylesheet" href="style.css" type=text/css />
</head>
<body>
<header>Header...</header>

<nav>
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
<button>button 4</button>

Nav...</nav>

<section>

<article>Article...</article>
<aside>Aside...</aside>

Section...</section>

<footer>Footer...</footer>

</body>
</html>

--------

file css

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

header,nav,section,article,aside,footer{
  display:block;
}

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

nav{
  width:730px;
  height:25;
  border:1px solid blue;
  padding:10px 10px 10px 10px;
}
section{
  clear:both;
  width:750px;
  height:450px;
  border:1px solid red;
}

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

aside{
  margin:20px;
  float:right;
  width:200px;
  height:370px;
  border:1px dashed black;
}

footer{
  clear:both;
  height:20px;
  border:1px solid green;
}

button -input{
  width:75;
  height:25px;
  border:1px solid red;
}

Tidak ada komentar:

Posting Komentar