论文部分内容阅读
【摘 要】DIV CSS成为目前网站的主要布局手段，越来越受重视。这种网页布局和以前教材中表格方式的布局有着很大的区别，它不仅是页面展示核心技术的进步，更对一线教师提出了更高的要求。
【关键词】DIV CSS 页面布局 盒模型 页面元素
一、引言
简单地讲，DIV CSS是一种网页全新布局的方法，与传统的用表格方式来定位网页元素不同的是，它把页面的内空和网页的美化分开了，形成了两个方面的分支。在教学中，有一位学生问过我这样一个问题：“老师，每逢遇到重大节日，那些大型网站是如何做到不改变架构的情况下，还能表现出节日渲染的气氛呢？”
二、了解盒子模型
上述问题的答案就是：页面内容与样式分离的技术，大大提高了页面不同风格的应用率。要明白这个理论，首先就要了解DIV CSS的盒子模型。盒子模型是学习DIV CSS布局的基础，它非常像我们生活中从网上购物后商家包装物品的盒子。商家在给商品发货时要将纸盒装在包装袋里，这个袋子就是盒子的“边距”，纸箱就是“边框”，那么防止纸箱在运输过程出现碰撞而增加的泡沫垫就可以看成“补白”。简单来说：盒子模型就是加了几层东西的容器，它比我们日常生活单纯的盒子要多出一些内容。例如，p标签是个能盛文字的容器，它的高度就是文字的实际高度，但别忘了文字高度的外表还有三层装饰的东西呢。在实际教学过程中，大部分学生想到的盒子就只是DIV，其实很多元素都可以当作盒子来处理。图1所示为基本教学中常用的盒子模型，页面中的所有元素都遵循该模型的设置方式。
（一）边距
边距是网页元素之间的间隔。CSS的margin属性用于设置边距距离。其通用语法如下：margin：length。其中，length的值可以用长度单位，也可以用百分比定义，还可以使用关键字auto定义。
（二）补白
如果你设置了边框颜色，那么文本和边框太靠近就不好看了。CSS的padding属性用于设置补白。其通用语法如下：padding：length。其中，length的值可以用长度单位，也可以用百分比定义，还可以使用关键字auto定义。
（三）边框
边框是页面元素独立体范围的最外圈。边框所包围的是补白 内容，CSS中设置边框的属性有三个，分别是：borde-width：设置边框宽度；borde-color：设置边框颜色；border-style：设置边框样式。
1.border-width属性用于改变边框的宽度，其通用语法如下：Border-width：width。
2.border-color属性用于改变边框的颜色，其通用语法如下：Border-color：color。
3.border-style属性用于改变边框的样式，其通用语法如下：Border-style：style。
三、页面元素的布局
有了上面的学习后，对页面的布局就有了更好的理解。根据多届教学经验，DIV CSS布局方式是学生反应比较难学的知识点，其内容对初学者而言比较深。根据教学经验，提炼出实质的知识要点：页面元素布局的定位和浮动；块级元素和行内元素的区别与联系。掌握了这些知识点后，就能对DIV CSS的布局有了个清晰的认识。
（一）块级元素与行内元素
在CSS页面布局中，我们把HTML标签按照一定的特性分成两种。一种是块级元素，这种元素是按照垂直方式来布局的，例如div标签和p标签。另一种是行内元素，按照小平方式布局的，一般是基于语义级的基本元素，只能容纳文本和其他行内元素，例如超链接a和span标签，它们可以通过元素的.display属性相互转换。
（二）CSS布局方式的常规流
CSS DIV页面布局的学习中有三种常用的模式，分别是常规流、浮动和定位。常规流（normal flow）是网页开发工具默认的方式，块按照从上到下的顺序排版，就像瀑布流下一样。
（三）CSS布局方式的浮动
如果要实现块的水平方向排列，必须使用块的浮动属性，有了它我们就可以随心所欲地排版了。在CSS中，所有元素都可以设置成浮动的方式来展现，它可以使排版更加简单，易于控制。CSS的float属性是设置元素的浮动，它有三个值：left、right和none。Left是左边浮动；right代表右边浮动；none表示没有。
使用浮动定位方式，可以实现到一块到多块的固定宽度。如果需要几个块水平方向排列且居中显示，可以使用志的嵌套形式设计。先用一个块作为容器且居中显示，再将几个块水平排列放置在容器中之中，这样几个块就被绑定并居中显示了。
（四）CSS布局方式：相对定位
最后一种常用的页面布局方式，就是页面的定位。CSS的position属性用于定位，可用position属性来精确定位元素相对其父元素或者其他元素的位置。Position属性共有四个关键字值，分别是static、absolute、relative和fixed。Static是默认值，表示是静态的不动；relative代表相对定位，其意就是相对他人而言。
（五）CSS布局方式：绝对定位
Position属性中的absolute代表绝对定位，使用绝对定位的子元素时候，其移动是相对父元素来说的，也就是它必须有一个参考对象的问题。注意，它始终要相对父元素来绝对定位的。通常这个最初的包含块是html标签。
四、DIV CSS页面布局应用举例
以下以一个艺术宣传网页为例来讨论一下DIV CSS页面布局的架构原理。在设计前，应该遵循简洁明了的要求，页面不应该杂乱无序，布局应该合理，有个性，区块划分要合理，布局可以按照各栏目的内容来进行区块划分。根据站点及栏目的分类，笔者对主页进了如下的布局及有布局时各块的嵌套和命名：
【关键词】DIV CSS 页面布局 盒模型 页面元素
一、引言
简单地讲，DIV CSS是一种网页全新布局的方法，与传统的用表格方式来定位网页元素不同的是，它把页面的内空和网页的美化分开了，形成了两个方面的分支。在教学中，有一位学生问过我这样一个问题：“老师，每逢遇到重大节日，那些大型网站是如何做到不改变架构的情况下，还能表现出节日渲染的气氛呢？”
二、了解盒子模型
上述问题的答案就是：页面内容与样式分离的技术，大大提高了页面不同风格的应用率。要明白这个理论，首先就要了解DIV CSS的盒子模型。盒子模型是学习DIV CSS布局的基础，它非常像我们生活中从网上购物后商家包装物品的盒子。商家在给商品发货时要将纸盒装在包装袋里，这个袋子就是盒子的“边距”，纸箱就是“边框”，那么防止纸箱在运输过程出现碰撞而增加的泡沫垫就可以看成“补白”。简单来说：盒子模型就是加了几层东西的容器，它比我们日常生活单纯的盒子要多出一些内容。例如，p标签是个能盛文字的容器，它的高度就是文字的实际高度，但别忘了文字高度的外表还有三层装饰的东西呢。在实际教学过程中，大部分学生想到的盒子就只是DIV，其实很多元素都可以当作盒子来处理。图1所示为基本教学中常用的盒子模型，页面中的所有元素都遵循该模型的设置方式。
（一）边距
边距是网页元素之间的间隔。CSS的margin属性用于设置边距距离。其通用语法如下：margin：length。其中，length的值可以用长度单位，也可以用百分比定义，还可以使用关键字auto定义。
（二）补白
如果你设置了边框颜色，那么文本和边框太靠近就不好看了。CSS的padding属性用于设置补白。其通用语法如下：padding：length。其中，length的值可以用长度单位，也可以用百分比定义，还可以使用关键字auto定义。
（三）边框
边框是页面元素独立体范围的最外圈。边框所包围的是补白 内容，CSS中设置边框的属性有三个，分别是：borde-width：设置边框宽度；borde-color：设置边框颜色；border-style：设置边框样式。
1.border-width属性用于改变边框的宽度，其通用语法如下：Border-width：width。
2.border-color属性用于改变边框的颜色，其通用语法如下：Border-color：color。
3.border-style属性用于改变边框的样式，其通用语法如下：Border-style：style。
三、页面元素的布局
有了上面的学习后，对页面的布局就有了更好的理解。根据多届教学经验，DIV CSS布局方式是学生反应比较难学的知识点，其内容对初学者而言比较深。根据教学经验，提炼出实质的知识要点：页面元素布局的定位和浮动；块级元素和行内元素的区别与联系。掌握了这些知识点后，就能对DIV CSS的布局有了个清晰的认识。
（一）块级元素与行内元素
在CSS页面布局中，我们把HTML标签按照一定的特性分成两种。一种是块级元素，这种元素是按照垂直方式来布局的，例如div标签和p标签。另一种是行内元素，按照小平方式布局的，一般是基于语义级的基本元素，只能容纳文本和其他行内元素，例如超链接a和span标签，它们可以通过元素的.display属性相互转换。
（二）CSS布局方式的常规流
CSS DIV页面布局的学习中有三种常用的模式，分别是常规流、浮动和定位。常规流（normal flow）是网页开发工具默认的方式，块按照从上到下的顺序排版，就像瀑布流下一样。
（三）CSS布局方式的浮动
如果要实现块的水平方向排列，必须使用块的浮动属性，有了它我们就可以随心所欲地排版了。在CSS中，所有元素都可以设置成浮动的方式来展现，它可以使排版更加简单，易于控制。CSS的float属性是设置元素的浮动，它有三个值：left、right和none。Left是左边浮动；right代表右边浮动；none表示没有。
使用浮动定位方式，可以实现到一块到多块的固定宽度。如果需要几个块水平方向排列且居中显示，可以使用志的嵌套形式设计。先用一个块作为容器且居中显示，再将几个块水平排列放置在容器中之中，这样几个块就被绑定并居中显示了。
（四）CSS布局方式：相对定位
最后一种常用的页面布局方式，就是页面的定位。CSS的position属性用于定位，可用position属性来精确定位元素相对其父元素或者其他元素的位置。Position属性共有四个关键字值，分别是static、absolute、relative和fixed。Static是默认值，表示是静态的不动；relative代表相对定位，其意就是相对他人而言。
（五）CSS布局方式：绝对定位
Position属性中的absolute代表绝对定位，使用绝对定位的子元素时候，其移动是相对父元素来说的，也就是它必须有一个参考对象的问题。注意，它始终要相对父元素来绝对定位的。通常这个最初的包含块是html标签。
四、DIV CSS页面布局应用举例
以下以一个艺术宣传网页为例来讨论一下DIV CSS页面布局的架构原理。在设计前，应该遵循简洁明了的要求，页面不应该杂乱无序，布局应该合理，有个性，区块划分要合理，布局可以按照各栏目的内容来进行区块划分。根据站点及栏目的分类，笔者对主页进了如下的布局及有布局时各块的嵌套和命名：
/* 放置整个页面的box 块*/
其他文献
应用压模剪切加载方法对混凝土的Ⅱ型断裂破坏进行了实验和数值研究.计算了此加载下砼的Ⅱ型断裂韧度.对此加载下混凝土试件的裂纹扩展方式、断口形貌及裂纹尖端和两裂尖韧带
嘉善县西塘镇中心幼儿园地处享有吴根越角之称的水乡古镇——西塘，近几年来，幼儿园利用乡土资源，创建“古韵乐园”特色学校，充分挖掘古镇文化融入到校园文化中。 在近几年展示校园文化时涌现出有特长的教师，我们把有特长的教师分门别类地组织起来，利用他们的特长，来丰富我们展示校园文化的活动形式与方法。我们探索出一种新型的推进“古韵乐园”校园文化建设的活动载体——社团，通过社团活动，展示师生的特长，全面发展每
对ULSI中多层金属铜布线的CMP(化学机械抛光)进行了理论分析,介绍了Cu-CMP模型与机理及其动力学过程,抛光液的种类及其存在的问题,并对CuCMP的研究作了进一步探讨.
IGBT被广泛应用于风电机组变流器中,其工作可靠性依赖于工作环境、电路条件和良好的驱动。以2SD315A作为风电机组变流器IGBT的驱动器,详细介绍了驱动控制电路的电源单元、触
模范少数族裔理论是在60年代民权运动的背景下出现的。该理论的核心内容是借夸张宣扬亚裔族群在经济教育方面的成功实例，影射其他少数族裔的惰性及其对联邦政府的经济依赖。这
说明了电磁继电器协同设计的必要性，描述了电磁继电器协同设计支持工具，包括基于Web的专家系统和特性分析，基于ANSYS的有限元分析系统和基于MDT的三维参数化设计系统、建立电磁
【摘 要】高职院校艺术设计类专业的设计基础课程需要改革，需要与时俱进而不能一成不变，改革原因及具体方案。 【关键词】高职院校 设计基础课程 改革 前言 2013年被媒体称作是“史上最难就业年”，随后腾讯网络媒体报道“专科生毕业人数及就业率大于研究生”，这句话的背后引发了笔者对中国高等教育与就业市场相互关系的思考，本文以这句话为线索，对高职院校艺术设计专业的相关课程与当今艺术设计相关行业的能力
【摘 要】瑜伽作为新兴的大众体育健身项目，正逐渐被人们认识和接纳。社会对懂得瑜伽专业的人才的需求也在不断增多。大学体育课应开设瑜伽课程，并根据社会需要，与就业市场接轨。本文对瑜伽运动在济源职业技术学院体育选修课中开展的可行性进行调查研究，为瑜伽运动进入济源职业技术学院运动教学中提供一定的参考。 【关键词】瑜伽运动 可行性 高校 一、研究对象和研究方法 （一）研究对象 以济源职业技术学院在校
教育的最终目的应该是给学生幸福。学生如何才能在学校中感受到幸福，这就需要教师用全新的课程观来构建课堂。 笔者认为，课程不但指国家课程、地方课程和校本课程，还包括覆盖学生成长方方面面的综合课程体系，一个有助于学生成长和幸福一生的课程体系。所以，进行全方位的幸福课堂建设是十分必要的。 一、树立生本观念，打造自主学习的幸福课堂 我校在构建“一校一模”的号召下，结合自身实际，在前期的小组合作探究课题
摘 要：高中生物课程是理科高考中比较重要的科目之一，对高考成绩具有重要的影响。新课改下高中生物教学出现启发式、互动式等教学模式，并取得了不错的教学效果。本文对高中生物互动式教学进行浅析，以期提高高中生物教学质量。 关键词：高中生物；互动式教学；思考 高中生物的知识容量较大，再加上某些知识离学生生活经验较远，所以一直是理科教学中比较难的科目。为使高中生学好生物，从容面对高考，将互动式教学方式融入