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.<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网页标准化布局 小结及习题的更多相关文章
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例
首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...
- IT兄弟连 HTML5教程 DIV+CSS的兼容性问题
使用DIV+CSS布局网页其实是很容易的事情,但各种浏览器之间的不兼容性问题,加大了页面布局的难度,给程序员带来很多不便,于是需要花费更多的时间在调试各种浏览器的兼容性上.因为部分CSS属性在不同的浏 ...
- div+css网页标准布局实例教程(一)
今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...
- div+css网页标准布局实例教程(二)
五.布局页面——头部和导航 有了上边的基础,下面的任务就是要利用html和css制作完成一个完整的网页了.先从头部开始,第三小节时我们已经把整体框架给搭建好了,就像盖房子一样,整体结构已经出来了,下面 ...
- IT兄弟连 HTML5教程 使用盒子模型设计页面布局
布局所涉及的技术非常很多,足以另写单独的一本书了.在本节中主要介绍网站中最常用的布局方案,包括区块框居中.两列浮动.三列浮动及多列浮动的区块框. 1 居中设计 区块框居中的设计是在网页布局中常用的技 ...
- div+css网页标准布局实例教程(三)
前边两节学完后,前台工作基本上完成了,下边的任务该程序员添加程序了.为什么说是基本完成呢?因为要做的工作还很多,不但要把首页做出来,其它的列表页详细页等页面也得做.还要配合程序员把整个网站完成,这样才 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
随机推荐
- scrapy框架安装配置
scrapy框架 scrapy安装(win) 1.pip insatll wheel 2.下载合适的版本的twisted:http://www.lfd.uci.edu/~gohlke/pythonli ...
- 小白的springboot之路(四)、mybatis-generator自动生成mapper和model、dao
0-.前言 在用mybatis开发项目中,数据库动辄上百张数据表,如果你一个一个去手动编写,比较耗费时间:还好,我们有mybatis-generator插件,只需简单几步就能自动生成mybatis的m ...
- 十、Spring boot 简单优雅的整合 Swagger2
前言 swagger2 是什么,我这里就不说了,就是一个简单的接口文档,方便前后端联调. 其实之前没有想要到要使用swagger 的.因为我之前用的是YAPI ,不过这个是一个单独的工具.并且是开源的 ...
- 用C在GBA上写光线追踪(0)配置开发编译环境
前段时间用C#写了一个光线追踪程序,可以渲染圆球,平面这种基本图形,反射,光照,阴影,都大致尝试做了一下. ↑ C#实现的光线追踪 ↑ GBA上C实现的光线追踪 然而,在我打算继续深入优化的时 ...
- apache thrift 和 apache jersey 记录
几篇好的入门文档链接: 1. Hello World by Thrift Using Java 2. Thrift 实例 Helloworld 3. Thrift版的Hello World 4. Th ...
- react文本溢出hover气泡显示全部文本——JS判断文本溢出
需求: 在文本溢出的时候,显示气泡 JS相关知识 // target js元素 const containerLength = target.width; //当前容器的宽度 const textLe ...
- Nginx的定时事件的实现(timer)
Nginx的定时事件的实现(timer) 在前面的文章里面就说到了在事件循环中除了要处理所有的从epoll中获取的事件之外,还要处理一些timer事件,这篇文章就讲讲Nginx的timer是如何实现的 ...
- linux—netstat
netstat--option -a: 列出所有端口,监听的没有监听的 -t: 显示tcp相关的选项 -u: 显示udp相关的选项 -l: 仅仅显示监听选项 -p: 显示与连接有关的程序名和 ...
- Seata 配置中心实现原理
Seata 可以支持多个第三方配置中心,那么 Seata 是如何同时兼容那么多个配置中心的呢?下面我给大家详细介绍下 Seata 配置中心的实现原理. 配置中心属性加载 在 Seata 配置中心,有两 ...
- CSS之position属性
层级的话可以用z-inde进行设置