这是网页效果图：
<!doctype html>
<html>
<head>
<title>HTML5 Layout</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #666666;
background-color: #f9f8f6;
background-image: url("images/dark-wood.jpg");
background-position: center;
font-family: Georgia, Times, serif;
line-height: 1.4em;
margin: 0;
}
.wrapper {
width: 940px;
margin: 20px auto 20px auto;
border: 2px solid #000000; /*整体全局背景色白色*/
background-color: #ffffff;
}
.header {
height: 160px;
background-image: url(images/header.jpg);
}
h1 { /*home的位子*/
text-indent: -9999px;
width: 940px;
height: 130px;
margin: 0;
}
.nav, .footer { /*home条和角标2011的背景颜色*/
clear: both;
color: #ffffff;
background-color: #aeaca8;
height: 30px;
}
.nav ul {
margin: 0px; /*home 位置*/
padding: 5px 0px 5px 30px; /*home 文字 右移动 在背景框位置*/
}
.nav li {
display: inline; /*home文字横着排序*/
margin-right: 40px; /*位置*/
}
.nav li a {
color: #ffffff; /* classes catering about contact 颜色*/
}
.nav li a:hover, .nav li a.current {
color: #000000; /*home 字体变成 黑色 并且 点击 变色*/
}
.section.courses {
float: left; /*右侧 popular contact 从原来下面 右移动*/
width: 659px;
border-right: 1px solid #eeeeee; /* 长竖线*/
}
.article {
clear: both;
overflow: auto; /*调整图片位置上移动一点*/
width: 100%; /*japanese sauces 从下往右移动*/
}
hgroup {
margin-top: 40px; /*japan sauces 位置*/
}
figure {
float: left;
width: 290px;
height: 220px; /*图片1 图片2的长*/
padding: 5px; /*图片在框里位置*/
margin: 20px; /*图片 位置*/
border: 1px solid #eeeeee; /*边框粗细*/
}
figcaption {
font-size: 90%; /*Bok choi teriyaki百分比*/
text-align: left; /*Bok choi teriyaki 左移动*/
}
.aside {
width: 230px; /*右侧popular 宽度*/
float: left;
padding: 0 0 0 20px; /*popular 距离竖线线条距离*/
}
.aside .section a {
display: block; /*块状元素会单独占据一样，其他元素跟他在同一行的会被迫换行*/
padding: 10px; /*每块的宽度*/
border-bottom: 1px solid #eeeeee; /*文字下面横线的宽度颜色设置*/
}
.aside .section a:hover {
color: #985d6a;
background-color: #efefef;
}
a {
color: #de6581; /*yakitori 字体颜色给红色*/
text-decoration: none;
}
h2 {
margin: 10px 0 5px 0; /*japanese 位置*/
padding: 0;
}
h3 {
margin: 0 0 10px 0; /*Five / one day 位置 红色*/
color: #de6581;
}
.aside h2 {
padding: 30px 0px 10px 0px; /*整个右侧的位置*/
color: #de6581; /*popular contact 红色*/
}
.footer {
font-size: 80%;
padding: 7px 0 0 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Yoko's Kitchen</h1>
<div class="nav">
<ul>
<li><a href="" class="current">home</a></li>
<li><a href="">classes</a></li>
<li><a href="">catering</a></li>
<li><a href="">about</a></li>
<li><a href="">contact</a></li>
</ul>
</div>
</div>
<div class="section courses">
<div class="article">
<figure>
<img src="images/bok-choi.jpg" alt="Bok Choi" />
<figcaption>Bok Choi</figcaption>
</figure>
<hgroup>
<h2>Japanese Vegetarian</h2>
<h3>Five week course in London</h3>
</hgroup>
<p>A five week introduction to traditional Japanese vegetarian meals, teaching you a selection of rice and noodle dishes.</p>
</div>
<div class="article">
<figure>
<img src="images/teriyaki.jpg" alt="Teriyaki sauce" />
<figcaption>Teriyaki Sauce</figcaption>
</figure>
<hgroup>
<h2>Sauces Masterclass</h2>
<h3>One day workshop</h3>
</hgroup>
<p>An intensive one-day course looking at how to create the most delicious sauces for use in a range of Japanese cookery.</p>
</div>
</div>
<div class="aside">
<div class="section popular-recipes">
<h2>Popular Recipes</h2>
<a href="">Yakitori (grilled chicken)</a>
<a href="">Tsukune (minced chicken patties)</a>
<a href="">Okonomiyaki (savory pancakes)</a>
<a href="">Mizutaki (chicken stew)</a>
</div>
<div class="section contact-details">
<h2>Contact</h2>
<p>Yoko's Kitchen<br />
27 Redchurch Street<br />
Shoreditch<br />
London E2 7DP</p>
</div>
</div>
<div class="footer">
© 2011 Yoko's Kitchen
</div>
</div>
</body>
</html>写了三遍，前两边怎么调位置都没有对
最初做出来是这样的其实：
