今天网上闲逛无意间看到有这么一份“网页重构”试题，据说是某国内知名互联网公司的实习生招聘“海选”试题（具体真实性及哪个公司此处不做讨论仅供学习交流之用）同是做网站前端的朋友可以看一看是否你能轻松应对，明天我会贴出我自己做的答案并做一些简单的解题说明和点评给大家参考一下，试题部分如下：

一、  耐心填一填！（每空4分，共24分）

1. 为div设置类a与b,应编写HTML代码__________。

2. 设置CSS属性clear的值为__________时可清除左右两边浮动。

3. __________标签必须直接嵌套于ul、ol中。

4. CSS属性__________可为元素设置外补丁。

5. 设置CSS属性float的值为__________时可取消元素的浮动。

6. 文字居中的CSS代码是__________。

二、  精心选一选！（每题4分，共16分）

1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度(   )

A. display:inline      B. display:none     C. display:block    D. display:inheric

2. 选出你认为最合理的定义标题的方法(     )

A. <span>文章标题</span>B. <p><b>文章标题</b></p>

C. <h1>文章标题</h1>D. <strong>文章标题</strong>

3. br标签在XHTML中语义为(     )

A.换行          B.强调          C.段落          D.标题

4. 不换行必须设置(    )

A.word-break        B.letter-spacing        C.white-space       D.word-spacing

5. 在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值(     )

A. cellpadding=”0″      B. padding:0        C. margin:0     D. cellspacing=”0″

三、判断对或错！（每题4分，共24分）

1. CSS属性font-style 用于设置字体的粗细。 (     )

2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。(     )

3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。(     )

4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。(     )

5. display:inline兼容所有的浏览器。(     )

6. input属于窗体元素,层级显示比flash、其它元素都高。(    )

四、用心想一想，你一定是生活中的智者！ （每题9分，共36分）

1. 写出ul、ol、dl三种列表的html结构。

：

2. 将以下CSS代码进行缩写，注意要符合缩写的规范。

1 2 3 4 5 6 7 8

代码一 { border-width:1px; border-color:#000; border-style:solid; } 代码二 { background-position:0 0; background-repeat:no-repeat; background-color:#f00; background-attachment:fixed; background-image:url(background.gif); } 代码三 { font-style:italic; font-family:"Lucida Grande",sans-serif; font-size:1em; font-weight:bold; font-variant:small-caps; line-height:140%; } 代码四 { list-style-position:inside; list-style-type:square; list-style-image:url(image.gif); } 代码五 { margin-left:20px; margin-right:20px; margin-bottom:5px; margin-top:20px; } 代码六 { color:#336699; color:#ffcc00; }

：

3. 修改以下代码，使其结构更加合理以及符合W3C标准。（XHTML 1.0 Strict）

1 2 3 4 5 6 7

<div> <h2>Don’t buy these electronics used</h2> Money may be tight, but you may kick yourself for purchasing these electronics secondhand.<br /> Even when the price is low, the risk may be too high.<br /> <p><img src="album.jpg"></p> <p><a href="home.html" target="_blank">home</a> <a href="content.html" target="_blank">content</a></p></div>

：

4. 简述border:none以及border:0的区别，并给出使用建议。

：

五、勇气拼一拼，让你超越别人的加分题目来了！ （不限于一种方法，共30分）

使用重构的方式制作出一个如下图的水平、垂直都居中短边为50px，长边为150px的红色十字架。

要求：1.使用2个div完成；  2.使用3个div完成；  3.使用5个div完成；

虽然试题非常倾向于“网站重构”方面，但同时这些知识确实是网站前端工作所必需掌握的最基本知识，强烈推荐大家仔细考虑一下这些问题，里面的个别内容相当有意思。