浅谈DIV+CSS页面布局在教学中体会.docVIP

浅谈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属性来精确定位元素