小结

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.<input type="submit">                                                                 B.<input type="image">

C.<input type="button">                                                                 D.<input type="reste">

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.<p class=”style”>                                                                         B.<p style=”color:red”;>

C.<p id=”content”>                                                                         D.<p class=”style1 style2”>

7.关于下列代码片段分析不正确的是(D)

<style type=”text/css”>

a {

display:inline;

display:block;

width:100px;

height:30px;

border;1px solid red;

}

</style>

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).

IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题的更多相关文章

  1. IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势

    标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...

  2. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  3. IT兄弟连 HTML5教程 DIV+CSS的兼容性问题

    使用DIV+CSS布局网页其实是很容易的事情,但各种浏览器之间的不兼容性问题,加大了页面布局的难度,给程序员带来很多不便,于是需要花费更多的时间在调试各种浏览器的兼容性上.因为部分CSS属性在不同的浏 ...

  4. div+css网页标准布局实例教程(一)

    今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...

  5. div+css网页标准布局实例教程(二)

    五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...

  6. IT兄弟连 HTML5教程 使用盒子模型设计页面布局

    布局所涉及的技术非常很多,足以另写单独的一本书了.在本节中主要介绍网站中最常用的布局方案,包括区块框居中.两列浮动.三列浮动及多列浮动的区块框. 1  居中设计 区块框居中的设计是在网页布局中常用的技 ...

  7. div+css网页标准布局实例教程(三)

    前边两节学完后,前台工作基本上完成了,下边的任务该程序员添加程序了.为什么说是基本完成呢?因为要做的工作还很多,不但要把首页做出来,其它的列表页详细页等页面也得做.还要配合程序员把整个网站完成,这样才 ...

  8. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  9. 43个实例xHTML+CSS(DIV+CSS)网页及导航布局

    在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...

随机推荐

  1. 爬虫新宠requests_html 带你甄别2019虚假大学 #华为云·寻找黑马程序员#

    python模块学习建议 学习python模块,给大家个我自己不专业的建议: 养成习惯,遇到一个模块,先去github上看看开发者们关于它的说明,而不是直接百度看别人写了什么东西.也许后者可以让你很快 ...

  2. 【跟唐老师学习云网络】-第8篇 iptables - filter过滤功能

    [摘要] 前面的各种协议已经可以把基本可用的物理网络世界给形成了,在正常情况下,它可以玩的很溜.比如组个局域网办公,或者打个联机魔兽争霸,都没有什么问题. 一.背景介绍 前面的各种协议已经可以把基本可 ...

  3. mq解决分布式事物问题【代码】

    上节课简单说了一下mq是怎么保证数据一致性的.下面直接上代码了. 所需环境:1.zookeepor注册中心   2.kafka的服务端和工具客户端(工具客户端也可以不要只是为了更方便的查看消息而已)  ...

  4. eclipse svn 问题记录

    1. 标记为合并,则是 舍弃的是资源库中的文件:覆盖,则是 舍弃本地文件

  5. [TimLinux] Python 使用入门

    1. 为什么用Python 软件质量:Python注重可读性.一致性和软件质量. 提高开发者的效率:Python代码的大小往只有C++/Java代码的1/5 ~ 1/3. 程序的可移植性:绝大多数Py ...

  6. 搭建本地YUM仓库

    YUM介绍 yum(yellow dog updater modified)为多个Linux发行版的软件包管理工具,Redhat RHEL CentOS Fedora YUM主要用于自动安装,升级rp ...

  7. Java语法进阶14-网络编程

    网络编程 软件结构 C/S结构 :全称为Client/Server结构,是指客户端和服务器结构. B/S结构 :全称为Browser/Server结构,是指浏览器和服务器结构. 网络通信协议 网络通信 ...

  8. 【MobX】391- MobX 入门教程(下)

    点击上方"前端自习课"关注,学习起来~ 三.MobX 常用 API 介绍 3. 修改可观察数据 在上一部分内容中,我们了解到,对可观察的数据做出反应的时候,需要我们手动修改可观察数 ...

  9. cookie、session和token那些事

    cookie 和 session 众所周知,HTTP 是一个无状态协议,所以客户端每次发出请求时,下一次请求无法得知上一次请求所包含的状态数据,如何能把一个用户的状态数据关联起来呢? 比如在淘宝的某个 ...

  10. Vue中实现聊天窗口overflow:auto自动滚动到底部,实现显示当前最新聊天消息

    在做消息的项目,当有新消息的时候让新消息出现在最底部,此时的box用的是overflow:auto 注意:vue项目需要注意在dom结构渲染完再进行操作 <div class="mai ...