《电子商务网页设计与制作》课件项目八

项目八DIV+CSS布局设置 能力目标：(1)能够运用盒子模型和标准流进行页面布局(2)能够独立使用DIV+CSS进行简单的页面布局设计知识目标：(1)盒子模型(2)标准流(3)使用DIV+CSS进行布局网页的方法任务一认识DIV标签CSS盒子模型的概念任务一认识DIV标签CSS盒子模型的边框边框（border）在盒子模型中位置，如图8-1，border的属性主要有3个，分别是color（颜色）、width（粗细）和style（样式）。具体的属性和属性值可以参考项目七任务3中设置图片边框的内容，效果是一样的。这里举一个简单的例子，代码如下：

p{ border-top-width:5px;/*上边框粗细为5个像素*/ border-right-width:10px;/*右边框粗细为10个像素*/ border-bottom-width:15px;/*下边框粗细为15个像素*/ border-left-width:20px;/*左边框粗细为20个像素*/ border-top-style:solid;/*上边框样式为实线*/ border-right-style:dotted;/*右边框样式为点画线*/ border-bottom-style:dashed;/*下边框样式为虚线*/ border-left-style:double;/*左边框样式为双线*/ border-top-color:#F00;/*上边框颜色为红色*/ border-right-color:#000;/*右边框颜色为黑色*/ border-bottom-color:#00F;/*下边框颜色为蓝色*/ border-left-color:#FF0;/*左边框颜色为黄色*/}任务一认识DIV标签CSS盒子模型的内边距内边距（padding）在盒子模型中位置，用于设置内容与边框之间的距离。可以通过padding-left，padding-right，padding-top和padding-bottom来分别设置左、右、上、下的内边距。也可以通过padding：1、2、3、4来直接设置四个方向的内边距，顺序按照顺时针方向，依次为上、右、下、左。代码如下：p{

padding:5px10px15px20px;

/*段落标签盒子模型的上内边距为5个像素，右内边距为10个像素，下内边距为15个像素，左内边距为20个像素*/}p{

padding-top:5px;/*上内边距为5个像素*/

padding-right:10px;/*右内边距为10个像素*/

padding-bottom:15px;/*下内边距为15个像素*/

padding-left:20px;/*左内边距为20个像素*/}任务一认识DIV标签CSS盒子模型的外边距外边距（margin）在盒子模型中位置，外边距可以设置盒子和盒子直接的距离。使用方法和padding一样。代码如下：p{

margin:10px20px30px40px;

/*段落标签盒子模型的上外边距为10个像素，右外边距为20个像素，下外边距为30个像素，左外边距为40个像素*/}p{

margin-top:10px;/*上外边距为10个像素*/

margin-right:20px;/*右外边距为20个像素*/

margin-bottom:30px;/*下外边距为30个像素*/

margin-left:40px;/*左外边距为40个像素*/}任务一认识DIV标签标准流的概念所谓标准流，就是指在没有任何外部干涉时，网页中各个元素盒子的排列规则，也就是网页默认的自然的排列布局方式。一个网页中的元素可以分为两类，块级元素和行内元素，也可以理解为两种不同类型的盒子。标准流就是CSS规定的默认的块级元素和行内元素的排列方式。（1）块级元素大部分html标签都属于块级元素，每一个块级元素都占据着一个矩形的区域，并且跟同级的兄弟块依次垂直排列，左右撑满。比如，p标签，h1标签，div标签都是块级元素。块级元素也是本书在网页布局中重点讨论的对象。（2）行内元素网页当中有一小部分元素属于行内元素，比如文字，<a>标签等等。行内元素不占有独立的区域，行内元素不会左右撑满。任务一认识DIV标签任务一认识DIV标签<div>标签是页面布局中最常用的标签。<div>与</div>之间可以容纳网页当中的任何元素，比如段落、标题、图片、链接等等。div{ font-family:"微软雅黑"; font-size:36px; font-weight:bold; color:#F00; text-decoration:underline; border:5pxdotted#F00;}

没有设置浮动时的效果任务一认识DIV标签设置第1个div浮动时的效果任务一认识DIV标签

设置前两个div浮动时的效果任务一认识DIV标签

设置第3个div浮动时的效果任务一认识DIV标签

改变浮动方向后的效果任务一认识DIV标签

div被挤到下一行时的效果任务一认识DIV标签

交换div位置时的效果任务一认识DIV标签

div被挤到下一行的效果任务一认识DIV标签

设置3个div浮动时的效果任务一认识DIV标签

div挤倒下一行被卡住时的效果任务一认识DIV标签

设置浮动后文字环绕的效果任务一认识DIV标签

清除浮动对左侧影响后的效果任务一认识DIV标签

清除浮动对右侧影响后的效果任务一认识DIV标签

包含浮动div的容器将不会适应高度任务一认识DIV标签

希望实现的效果任务一认识DIV标签盒子模型的定位广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。static：静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚