300道HTML、CSS习题及面试题(含答案)
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
HTML+CSS习题及面试题
1.
[问答题]
根据下面效果图设计页面:
两点要求:
1.自适应宽度,左右两栏固定宽度,中间栏优先加载;
2.要考虑到换肤
---------------------------------------------------------------------------------------------------------------------------- 来自:2011腾讯前端面试稿
参考:
1.自适应宽度,左右两栏固定宽度,中间栏优先加载,可以采用双飞翼布局。
*{ 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;}
main-wrap
main-wrap
sub
sub
sub
extra
margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;
2.使用最新的css3盒布局技术,它允许宽度自适应,改变元素显示顺序,优先加载重
要区域。
[html]
.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;
}
[/html]
3.上述两种方式兼容性都存在一定问题,可使用position:absolute试试。
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;}