300道HTML、CSS习题及面试题(含答案)

HTML+CSS习题及面试题1.[问答题]根据下面效果图设计页面：两点要求：1.自适应宽度，左右两栏固定宽度，中间栏优先加载；2.要考虑到换肤----------------------------------------------------------------------------------------------------------------------------来自：2011腾讯前端面试稿参考：1.自适应宽度，左右两栏固定宽度，中间栏优先加载，可以采用双飞翼布局。styletype=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:0200px0150px;}.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;}/styledivclass=wrap-2divclass=headerHeader/divdivclass=bodydivclass=main-2divclass=main-wrap-2pmain-wrap/ppmain-wrap/p/div/divdivclass=sub-2psub/ppsub/ppsub/p/divdivclass=extra-2pextra/ppmargin-left:350px;background:#CC0;margin-left:350px;background:#CC0;/p/div/divdivclass=footerFooter/div/div2.使用最新的css3盒布局技术，它允许宽度自适应，改变元素显示顺序，优先加载重要区域。[html]!DOCTYPEHTMLhtmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8title自适应宽度，左右两栏固定宽度，中间栏优先加载/titlestyle.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/headbodydivclass=containerdivclass=middle_content优先加载主内容区/divdivclass=sider_l左边栏/divdivclass=sider_r右边栏/div/div/body/html[/html]3.上述两种方式兼容性都存在一定问题，可使用position:absolute试试。!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=utf-8/title无标题文档/titlestyletype=text/csshtml,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:0200px;}.right{width:200px;height:100%;background:#FF0;position:absolute;z-index:1000;right:0;top:0;}/style/headbodydivclass=contentdivclass=center-ctdivclass=centercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercentercenter/div/divdivclass=leftleft/divdivclass=rightright/div/div/body/html4.!DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8/title左右固宽，中间自适应且优先加载/titlemetaname=authorcontent=Await|[e-mail]/metaname=keywordscontent=/metaname=descriptioncontent=/styletype=text/cssbody{margin:0;padding:0;}.main{width:100%;position:relative;background:#fc0;}.content{margin:0210px;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/headbodyheader头部/headerdivclass=mainclearfixdivclass=content中间br中间/divdivclass=left左边br左边/divdivclass=right右边/div/divfooter底部/footer/body/html5.divclass=m/divdivclass=l/divdivclass=r/divstyletype=text/cssdiv{outline:1pxsolidred;min-height:200px;}.m{margin:0200px;}.l,.r{position:absolute;width:200px;background:#f3c;}.l{top:0;}.r{top:0;right:0}/style2.[问答题]根据下图编写一段XHTML----------------------------------------------------------------------------------------------------------------------------来自：淘宝UEDWeb前端开发面试题参考：考察前端工程师的语义化标签知识以及模块化HTML代码知识。divclass=dialogPractiseh2对话练习/h2ulclass=dialogPractise-bdlistrong小明/strongspan我的淘宝店成立5周年啦欢迎光临哦！/span/lilistrong傅玉/strongspan昨天销售300件米奇心情真爽！/span/li/ulspanclass=dialogPractise-fo/span/div3.[问答题]请简化下面的CSS代码：a)margin:0px;b)padding:10px010px0;c)border-width:1px;border-style:solid;border-color:#ff5500;----------------------------------------------------------------------------------------------------------------------------来自：淘宝UEDWeb前端开发面试题参考：考察CSS的优化:margin:0;padding:10px0;border:1pxsolid#ff5500;还可以进一步简写margin:0;padding:10px0;border:1pxsolid#f50;4.[问答题]有这么一段HTML，请挑毛病：P哥写的不