项目六 DIV+CSS布局网页PPT演示课件

项目六DIV+CSS布局网页,掌握盒模型了解元素类型掌握DIV及其常用属性能够分析并使用DIV+CSS布局网页,所有页面中的元素都可以看成是一个盒子，占据着一定的页面空间。一般来说这些被占据的空间往往都要比单纯的内容要大，因为盒子可以有边框，盒子内外都可以有边距，可以通过调整盒子的边框和边距等参数，来调节盒子的位置。一个盒子模型由content（内容）、border（边框）、padding（填充也叫内边距）和margin（外边距）这4个部分组成。如图所示。,6.1任务1：认识盒模型,6.1.1盒模型概述,内边距（padding）,外边距（margin）,边框（border）,Padding与margin都有上、右、下、左四个值。当这些属性被赋值后，会影响盒子的宽度与高度。1、盒模型的宽度盒模型的宽度=margin-left（左外边距）+border-left（左边框）+padding-left（左内边距）+width（内容宽度）+padding-right（右内边距）+border-right（右边框）+margin-right（右外边距）2、盒模型的高度盒模型的高度=margin-top（上外边距）+border-top（上边框）+padding-top（上内边距）+height（内容高度）+padding-bottom（下内边距）+border-bottom（下边框）+margin-bottom（下外边距）【实例】盒模型宽高计算divmargin:30px;padding:20px;height:100px;width:100px;border:solid20px#CCFFFF;,6.1任务1：认识盒模型,DIV的宽度=30px+20px+20px+100px+20px+20px+30px=240pxDIV的高度=30px+20px+20px+100px+20px+20px+30px=240px,6.1任务1：认识盒模型,6.1.2元素类型,HTML中的元素默认分为两种：块元素（blockelement）与行内元素（inlineelement）。1、块元素块元素是独立的，显示时独占一行。常见的块元素有：p、div、ul、li、h1、dt.2、行内元素行内元素都会在一行内显示。常见的行内元素有：a、img、span、strong.【实例】元素类型.blockbackground-color:#6CF;.inlinebackground-color:#F9F;,6.1任务1：认识盒模型,块元素块元素在显示时会独占一行，常见的块元素有p、ul、li.行内元素行内元素在一行内显示，常见的行内元素有strong、a、span.在浏览器中预览效果如图所示。3、块元素与行内元素转换块元素与行内元素可以通过“区块”分类中display属性的block（块）与inline（行内）进行互相转换。,6.1任务1：认识盒模型,（division）是一个区块容器标记，它可称作为“DIVblock”，或“DIVelement”或“CSS-layer”，或干脆叫“layer”。与之间可以放置任何内容，包括其他的DIV标签。也就是说DIV是一个没有特性的容器而已。DIV块作为一个独立的对象，在CSS样式控制下有着灵活的表现形式，形成另外一种组织布局形式DIV+CSS。,6.2任务2：认识DIV标签,6.2.1插入DIV标签,）创建一个HTML文档。）执行【插入】【布局对象】【DIV标签】命令或点击“插入”面板“布局”“DIV标签”，打开“插入DIV标签”对话框，如图6-5所示。在这里必须设定一个类或ID，以便于应用CSS样式。图插入DIV标签对话框,3）在ID处输入“top”，点击“确定”按钮，在Dreamweaver设计窗口出现如图所示DIV块。表明插入了一个id名为top的DIV标签。,6.2.2设置DIV属性,DIV是容器，是块元素，也是一个盒子，主要的属性就是盒模型的一些基本属性，包括边框、内边距、外边距以及DIV容器的位置。创建一个ID为top的CSS规则，打开“#top的CSS规则定义”对话框，DIV标签的常见属性主要是在“方框”、“边框”与“定位”分类里设定的。,6.2任务2：认识DIV标签,方框分类属性点击“方框”分类，如图所示。1）width：设置DIV的宽度。2）height：设置DIV的高度。在此处width与height分别设为200，点击“确定”按钮，设计视图中的DIV。3）padding：设置DIV的内边距，也就是内容到边框的距离。4）margin：设置DIV的外边距，也就是边框到父容器或与其他容器之间的距离。设置所有padding为20，所有margin为20，点击“确定”按钮后效果如图所示。,6.2任务2：认识DIV标签,5）float：浮动，定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围。HTML中元素在浏览器中显示是按照流方式显示，行内元素从左到右，块元素从上到下。在CSS中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素对象设置了float属性之后，它将脱离文档流的显示方式，不再独自占据一行，可以向左或向右移动，直到它的外边缘碰到包含它的边框或另一个浮动块的边框为止，后面的元素会围绕它显示。float属性有四个可用的值：left和right分别浮动元素到各自的方向，none(默认)使元素不浮动，inherit将会从父级元素获取float值。,6.2任务2：认识DIV标签,【实例】float属性divheight:100px;width:100px;margin-top:15px;border:1pxdashed#33F;此处显示iddiv1的内容此处显示iddiv2的内容此处显示iddiv3的内容,正常DIV显示,6.2任务2：认识DIV标签,给DIV设置float属性，让div1右浮动，div2左浮动，在style内添加如下代码：#div2float:left;#div1float:right;添加后预览效果如图所示。,6.2任务2：认识DIV标签,6）clear：清除浮动。其值有left、right、both、none。如上例，要想让div3不受div2浮动的影响，恢复其原始文档流位置显示，则在style中插入CSS规则：#div3clear：left；即可。预览效果如图所示。2、边框分类属性点击“边框”分类，如右图所示。,6.2任务2：认识DIV标签,style：边框的样式。width：边框的粗细。color：边框的颜色。边框的三个属性可简写为：border：widthstylecolor。例如：border：2pxsolidred；3、定位分类属性点击“定位”分类，如图所示。,6.2任务2：认识DIV标签,1）position：定位，它有四个属性值：static（静态）、relative（相对定位）、absolute（绝对定位）、fixed（固定）。Static：默认值，无定位，元素按正常文档流显示。Relative：定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，所占用的空间依然保留，通过placement中的left，right，top，bottom属性来设置相对于其在正常文档流位置所偏移的距离。相对定位对象可层叠，层叠顺序可通过z-index属性控制。【实例】relative相对定位#parentheight:200px;width:200px;border:solid2px;,.subheight:80px;width:100px;border:solid1px;#sub1position:relative;left:30px;top:30px;background-color:#C9F;,6.2任务2：认识DIV标签,Relative相对static静态absolute:将被赋予此定位方法的对象从文档流中拖出，与relative的区别是其在正常文档流中的位置不再存在。使用left，right，top，bottom属性相对于其最接近的一个具有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，则依据body对象左上角作为参考进行定位。绝对定位对象同样可通过z-index进行层次分级。,6.2任务2：认识DIV标签,【实例】绝对定位（父级没有设置定位属性）接上例，改变#sub1的定位为absolute，修改内容如下：absolute绝对#sub1position:absolute;left:30px;top:30px;background-color:#C9F保存预览效果如右图所示。,6.2任务2：认识DIV标签,【实例】绝对定位（父级设置定位属性）接上例，改变#parent的定位为relation，修改CSS规则如下：#parentheight:200px;width:200px;border:solid2px;margin:20px0px0px20px;position:relative;#sub1position:absolute;left:30px;top:30px;background-color:#C9F保存预览效果如右图所示。,6.2任务2：认识DIV标签,fixed：特殊的absolute，总是以body为定位对象，按照浏览器窗口进行定位2）width与height，与方框里的一样，用于设置元素的宽高的。3）visibility：元素可见性。是指当块内元素中的内容超出边界后的显示设置。属性值有：inherit、visible、hidden。Inherit：从父元素继承visibility的值。Visible：默认值，元素可见。Hidden：元素不可见。4）z-Index：设置元素堆叠顺序，该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴。数字越大处于越上层，可以为正也可以为负5）overflow：溢出。当元素超过区块的容纳范围时会产生溢出。其属性值有visible、hidden、scroll、auto。Visible：默认值，超出部分显示。Hidden：超出部分隐藏。Scroll：产生滚动条，不管是否溢出都产生。Auto：自动，超出时产生滚动条，不超出时不产生滚动条。,6.2任务2：认识DIV标签,6）clip：裁剪绝对定位元素。这个属性用于定义一个剪裁矩形。对于一个绝对定义元素，在这个矩形内的内容才可见。出了这个剪裁区域的内容会根据overflow的值来处理。剪裁区域可能比元素的内容区大，也可能比内容区小。【实例】使用DIV+CSS制作一个如下所示的网页布局效果，网页居中显示。,结构代码如下所示：,6.2任务2：认识DIV标签,CSS控制代码如下：#containerwidth:800px;margin-right:auto;margin-left:auto;divborder:1pxsolid#CCC;#navheight:55px;#headheight:180px;,#leftheight:450px;width:300px;float:left;#rightheight:450px;width:496px;float:right;/*在水平方向上边框占了4个像素*/#footerheight:60px;clear:both;,6.2任务2：认识DIV标签,6.3任务3制作DIV+CSS布局网页茶业公司首页,6.3.1案例效果展示,布局规划图,6.3任务3制作DIV+CSS布局网页茶业公司首页,6.3.2搭建框架,6.3任务3制作DIV+CSS布局网页茶业公司首页,1、头部内容首页关于我们业务范围产品展示合作客户,6.3.3添加内容,6.3任务3制作DIV+CSS布局网页茶业公司首页,人才招聘联系我们2、banner内容banner由一张图片组成。光标放在“代码”视图中后，插入图片banner.jpg。具体代码如下。3、主体内容A、左边内容从效果图上看，左边内容有一个圆角矩形的边框，上下圆角部分要切图作为图像插入来实现，因此左边内容分为上边框、主要内容、下边框三部分，两边的边框用背景图像实现。主要内容又分为上下两部分：标题与内容。其结构如图所示。,6.3任务3制作DIV+CSS布局网页茶业公司首页,左边内容右边内容,6.3任务3制作DIV+CSS布局网页茶业公司首页,6.3任务3制作DIV+CSS布局网页茶业公司首页,6.3任务3制作DIV+CSS布局网页茶业公司首页,4、版尾版尾是版权声明，把光标放在“代码”视图中后，直接输入“Copyright2003-2014.漫想族文化传播有限公司AllRightsReserved版权所有”即可。至此，页面内容添加完毕，HTML文档结构完成，如图所示。,6.3任务3制作DIV+CSS布局网页茶业公司首页,1、创建CSS文档2、文档CSS规则初始化具体代码如下：bodyfont-size:12px;background-image:url(images/bg.jpg);background-repeat:repeat-x;margin:0px;padding:0px;#containerwidth:980px;margin:50pxauto0pxauto;,6.3.3美化网页,6.3任务3制作DIV+CSS布局网页茶业公司首页,3、美化头部具体代码如下。#headheight:137px;#headimgfloat:left;margin-top:30px;#navfloat:right;height:137px;width:830px;,#navfloat:right;height:137px;width:830px;#navulliacolor:#FFF;text-decoration:none;line-height:180%;padding:0px10px;,6.3任务3制作DIV+CSS布局网页茶业公司首页,#navullia:hoverbackground-color:#F60;#navullitext-align:center;float:left;list-style-type:none;margin-right:1px;padding:010px;border-right:1pxsolid#FFF;width:80px;#navimgfloat:right;margin:20px0px;,#navulclear:both;background-image:url(images/nav_01.jpg);background-repeat:repeat;overflow:hidden;,6.3任务3制作DIV+CSS布局网页茶业公司首页,4、美化bannerBanner处就是一张图片，因此不用美化。5、美化内容（1）左边内容美化#leftheight:210px;width:636px;float:left;background-image:url(images/bk_center.jpg);background-repeat:repeat-y;#rightfloat:right;height:210px;w