HTML+CSS 习题及面试题
1.
[问答题]
根据下面效果图设计页面：
两点要求：
1.自适应宽度，左右两栏固定宽度，中间栏优先加载；
2.要考虑到换肤
----------------------------------------------------------------------------------------------------------------------------
来自：2011 腾讯前端面试稿
参考：
1. 自适应宽度，左右两栏固定宽度，中间栏优先加载，可以采用双飞翼布局。
<style type="text/css">
*{ margin:0; padding:0px;}
.header{ background:#666; text-align:center;}
.body{ overflow:hidden;*zoom:1;}
.wrap-2{ margin-top:30px;}
.wrap-2 .main-2{ float:left; width:100%;margin-bottom:-3000px;
padding-bottom:3000px;background:#F90;}
.wrap-2 .main-wrap-2{ margin:0 200px 0 150px; }
.wrap-2 .sub-2{ float:left; margin-left:-100%; width:150px; background:#6C0;
margin-bottom:-3000px; padding-bottom:3000px;}
.wrap-2 .extra-2{ float:left; margin-left:-200px; width:200px;
background:#F9F; margin-bottom:-3000px; padding-bottom:3000px;}
.footer{ background:#666; text-align:center;}
</style>
<div class="wrap-2">
<div class="header">Header</div>
<div class="body">
<div class="main-2"><div
class="main-wrap-2"><p>main-wrap</p><p>main-wrap</p></div></div>
<div class="sub-2"><p>sub</p><p>sub</p><p>sub</p></div>
<div class="extra-2"><p>extra</p><p>margin-left:350px;
background:#CC0;margin-left:350px; background:#CC0;</p></div>
</div>
<div class="footer">Footer</div>
</div>
2. 使用最新的 css3 盒布局技术，它允许宽度自适应，改变元素显示顺序，优先加载重
要区域。
[html]<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>自适应宽度，左右两栏固定宽度，中间栏优先加载</title>
<style>
.container{
display:-moz-box;
display:-webkit-box;
}
div{
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.sider_l{
width:250px;
-moz-box-ordinal-group:1;
-webkit-box-ordinal-group:1;
background:limegreen;
}
.middle_content{
-moz-box-flex:1;
-webkit-box-flex:1;
-moz-box-ordinal-group:2;
-webkit-box-ordinal-group:2;
background:lightpink;
}
.sider_r{
width:250px;
-moz-box-ordinal-group:3;
-webkit-box-ordinal-group:3;
background:green;
}
</style>
</head>
<body>
<div class="container">
<div class="middle_content">优先加载主内容区</div>
<div class="sider_l">左边栏</div>
<div class="sider_r">右边栏</div>
</div>
</body>
</html>
[/html]
3. 上述两种方式兼容性都存在一定问题，可使用 position:absolute 试试。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
html,body{width:100%;height:100%;margin:0;padding:0;}
.content{width:100%;height:100%;position:relative;background:#CFF;overflow:hidden;}
.left{width:200px;height:100%;background:#0F0;position:absolute;z-index:1001;top:0;left:
0;}
.center-ct{height:100%;background:#60F;position:absolute;z-index:900;top:0;left:0;margin
:0;width:100%;}
.center{margin:0 200px;}
.right{width:200px;height:100%;background:#FF0;position:absolute;z-index:1000;right:0;to
p:0;}
</style>
</head>
<body>
<div class="content">
<div class="center-ct">
<div class="center">
center center center center center center center center center center center center
center center center center center center center center center center center center center center
center center center center center center center center center center center center center center
center center center center center center center center center center center center center center
center center center center center center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>左右固宽，中间自适应且优先加载</title>
<meta name="author" content="Await|yltfy2008@gmail.com" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
body{margin:0;padding:0;}
.main{width: 100%; position: relative; background: #fc0;}
.content{ margin:0 210px; background:#f60;}
.left{position: absolute; left: 0; top: 0; width:200px; background: #00f;}
.right{position: absolute; right: 0; top: 0; width:200px; background: #0f0;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
</style>
</head>
<body>
<header>头部</header>
<div class="main clearfix">
<div class="content">中间<br>中间</div>
<div class="left">左边<br>左边</div>
<div class="right">右边</div>
</div>
<footer>底部</footer>
</body>
</html>
5.
<div class="m"></div>
<div class="l"></div>
<div class="r"></div>
<style type="text/css">
div { outline: 1px solid red; min-height: 200px;}
.m{margin:0 200px;}
.l,
.r {
position:absolute;
width:200px;
background: #f3c;
}
.l { top:0;}
.r { top:0;
right:0}
</style>
2.
[问答题]
根据下图编写一段 XHTML
----------------------------------------------------------------------------------------------------------------------------
来自：淘宝 UED Web 前端开发面试题
参考：
