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;css简单网页代码
-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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/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>
<metaname="author"content="Await|*******************"/>
<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前端开发面试题
参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。