No.1
下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用CSS3中的功能实现它们的布局。
已知HTML结构是：
<div class="box"> <div class="item">column 1</div> <div class="item">column 2</div> <div class="item">column 3</div> </div>
答案：
.box{ width:100%; background:green; display:-moz-box; /* Firefox */ display:-webkit-box; /* Safari and Chrome */ display:box; -webkit-box-orient:horizontal; } .item{ -moz-box-flex:1; /* Safari 和 Chrome */ -webkit-box-flex:1; /* Safari 和 Chrome */ box-flex:1; /* Safari 和 Chrome */ height:60px; background:red; margin:10px 0 ; } .item:first-child{ background:red; width:200px; -webkit-box-flex:0; /* Safari 和 Chrome */ margin:10px; } .item:last-child{ background:red; margin:10px; }
No.2
请用html5标准完成以下页面布局（要求完整书写整个页面的html代码，不需要写CSS）
答案：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<header>头部</header>
<nav>导航</nav>
<article>
<aside>侧边栏</aside>
<hgroup>内容区</hgroup>
</article>
<footer>尾页</footer>
</body>
</html>
原文：http://www.cnblogs.com/tryao/p/3933409.html