<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>爆牙齿的Web标准面试题 - 习题与演示 - CSS魔法</title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta name="Keywords" >
<meta name="Description" content="这是一个CSS面试题/练习题/演示/教程的演示页面，涉及HTML/XHTML/CSS/JavaScript等网页制作技术，遵循Web标准，力推CSS布局与网站重构，关注网页的可用性/可访问性/用户体验。">
<style>
* {margin:0;padding:0;}
body {
font: 12px/1.2 SimSun, sans-serif;
color: black;
background: white;
}
h2,dt {
font: 700 14px/1.2 SimSun, sans-serif;
}
p,dd {
line-height: 1.25;
}
a:link,a:visited {
color: black;
text-decoration: none;
}
a:hover,a:active {
text-decoration: underline;
}
a.more {
position: absolute;
bottom: 2px;
right: 5px;
}
#dv_wrap {
margin: 0 auto;
max-width: 700px;
_width: expression(documentElement.clientWidth<700?'auto':'700px'); /** 模拟max-width @ IE6 **/
}
#dv_wrap div {
overflow: hidden;
}
#dv_head {
height: 100px;
background: #09c;
}
h1 {
float: left; _display: inline;
margin: 35px 0 0 20px;
font: 700 25px/1.2 Arial, Helvetica, SimHei, sans-serif; /** 标准浏览器得到更好的中英混排效果 **/
*font: 700 25px/1.2 SimHei, sans-serif;
text-align: right;
}
h1 em {
font: italic 700 12px/1.2 Verdana, Arial, Helvetica, sans-serif;
}
h1 span {
display: block;
font: 400 12px/1.2 SimSun, sans-serif;
}
#dv_head dl {
float: right; _display: inline;
margin: 12px 10px 0 0;
}
#dv_col-1,
#dv_col-5 {
position: relative;
width: 120px;
height: 300px;
}
#dv_col-2,
#dv_col-3,
#dv_col-4 {
position: relative;
_left: -3px; /** 修复3px bug @ IE6 **/
margin: 0 120px;
_margin: 0 117px 0 120px; /** 修复3px bug @ IE6 **/
height: 100px;
}
#dv_col-1 {
float: left; _display: inline;
background: #FF9900;
}
#dv_col-2 {
background: #990000;
}
#dv_col-3 {
background: #003399;
}
#dv_col-4 {
background: #990000;
}
#dv_col-5 {
float: right; _display: inline;
margin-top: -300px;
background: #FFFF00;
}
#dv_col-1 dl,
#dv_col-5 dl {
padding: 2px 0 0 4px;
}
#dv_col-2 dl,
#dv_col-3 dl,
#dv_col-4 dl,
#dv_foot dl {
padding: 10px 0 0 10px;
}
#dv_foot {
clear: both;
height: 100px;
background: #009966;
}
#dv_note {
float: right; _display: inline;
margin-top: -100px;
padding: 10px 10px 0 0;
width: 120px;
}
#dv_note strong {
font-weight: 400;
color: white;
}
#dv_back {
margin: 0 auto;
padding-top: 20px;
width: 700px;
}
</style>
</head>
<body>
<div id="dv_wrap">
<div id="dv_head">
<h1>爆牙齿的Web标准面试题 <em>beta</em> <span>2006 7 11</span></h1>
<dl>
<dt>页头</dt>
<dd>页面居中时宽度为700px</dd>
<dd>页面自适应时宽度自适应</dd>
<dd>高度固定为100px</dd>
<dd>色彩代码为：#0099CC</dd>
</dl>
</div>
<div id="dv_col-1">
<dl>
<dt>栏目一</dt>
<dd>宽度固定120px</dd>
<dd>高度固定为300px</dd>
<dd>色彩代码为：#FF9900</dd>
</dl>
<a href="###" class="more">更多>></a>
</div>
<div id="dv_col-2">
<dl>
<dt>栏目二</dt>
<dd>页面居中时宽度为460px</dd>
<dd>页面自适应时宽度自适应</dd>
<dd>高度固定为100px</dd>
<dd>色彩代码为：#990000</dd>
</dl>
<a href="###" class="more">更多>></a>
</div>
<div id="dv_col-3">
<dl>
<dt>栏目三</dt>
<dd>页面居中时宽度为460px</dd>
<dd>页面自适应时宽度自适应</dd>
<dd>高度固定为100px</dd>
<dd>色彩代码为：#003399</dd>
</dl>
<a href="###" class="more">更多>></a>
</div>
<div id="dv_col-4">
<dl>
<dt>栏目四</dt>
<dd>页面居中时宽度为460px</dd>
<dd>页面自适应时宽度自适应</dd>
<dd>高度固定为100px</dd>
<dd>色彩代码为：#990000</dd>
</dl>
<a href="###" class="more">更多>></a>
</div>
<div id="dv_col-5">
<dl>
<dt>栏目五</dt>
<dd>宽度固定120px</dd>
<dd>高度固定为300px</dd>
<dd>色彩代码为：#FFFF00</dd>
</dl>
<a href="###" class="more">更多>></a>
</div>
<div id="dv_foot">
<dl>
<dt>页脚</dt>
<dd>页面居中时宽度为700px</dd>
<dd>页面自适应时宽度自适应</dd>
<dd>高度固定为100px</dd>
<dd>色彩代码为：#009966</dd>
</dl>
</div>
<div id="dv_note">
<h2>附：考题说明</h2>
<p>请写出xhtml和css展现出图片中所有内容</p>
<p><strong>没有标准答案</strong></p>
<p>JS部分未来加上</p>
</div>
</div>
<div id="dv_back">
<a href="http://www.cssmagic.net/"><< 返回首页</a>
</div>
<!--=======================================================-->
<script>
var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-17208063-4']); _gaq.push(['_trackPageview']);
(function() {var ga = document.createElement('script'); ga.async = true; ga.src = 'http://www.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();
</script>
<!--=======================================================-->
</body></html>
原文地址：http://www.cssmagic.net/