IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题

 

小结

DIV+CSS布局页面的优势：表现和内容相分离、代码简洁，提高页面浏览速度、易于维护和改版、提高搜索引擎对网页的索引效率。每个HTML元素都可以看作一个区块，类似于装了东西的盒子，称为盒子模式。一个盒子是装内容的区块，如果多个盒子组合在一起使用，再通过定位和浮动的设置，就可以对整个页面进行布局。标准W3C盒子模型的范围包括margin、border、padding、内容区，并且内容区部分不包含其他部分。DIV+CSS进行页面布局时需要处理的兼容性问题有很多。通常在进行页面布局调试时将其划分为IE和非IE两类。本章的学习建议：重要的是多写、多练、多布局一些有个性的页面；把书上的每个例子亲手输入到计算机中实践；对自己布局的页面不断提出更高的要求。

 

习题

1．基本CSS代码书写规范不正确的是（D）

A．尽量不缩写

B．全部小写，且每一项CSS定义写成一行

C．ID必须是唯一的，且用在结构的定义中

D．CSS可以尽量使用expression

 

2．用来标示有序列表的标签是（B）

A．ul                                                                                                       B．ol

C．li                                                                                                         D．dl

 

3．下列哪句语句是input类型中用于添加可单击按钮的。（C）

A．                                                                 B．

C．                                                                 D．

 

4．下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度（C）

A．display:inline                                                                                  B．display:none   

C．display:block                                                                                  D．display:inherit

 

5．下述有关css属性position的属性值的描述，说法错误的是？（B）

A．static：没有定位，元素出现在正常的流中 

B．fixed：生成绝对定位的元素，相对于父元素进行定位 

C．relative：生成相对定位的元素，相对于元素本身正常位置进行定位。

D．absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。

解析：fixed相对于浏览器窗口进行定位

 

6．下列选项中，应用了行内样式的是（B）

A．                                                                         B． 

C．                                                                         D．

 

7．关于下列代码片段分析不正确的是（D）

 

a { 

display:inline;  

display:block;  

width:100px;  

height:30px; 

 border;1px solid red; 

} 

 

A．以上代码用于修改超链接标签的默认样式

B．超链接将以块状方式显示 

C．超链接的宽度为100px,高度为30px

D．超链接在同一行显示

 

8．下列的选项中关于标签div与span的说法正确的是（B）

A．span标签只能用于文本内容

B．div标签显示时将独占一行 

C．span标签在浏览器中显示时将占满一行

D．多个div标签元素将在同一行显示

 

9．在制作系统后台页面时,通常会优先考虑的布局是（B）

A．DIV布局                                                                                      B．框架布局 

C．表格布局                                                                                 D．文字布局

 

10．采用DIV+CSS设计页面布局的优势不包括（D）

A．减少页面冗余代码                                                    B．更容易修改和维护 

C．容易被搜索引擎收录                                             D．可以轻松控制页面布局

 

11．介绍一下CSS的盒子模型？

（1）有两种，IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading;

（2）盒模型：内容(content)、填充(padding)、边界(margin)、 边框(border).