《WEB前端开发技术实用教程》课件第04章 网站的布局谋篇-DIV+CSS盒子模型.pptx

1、1 1目录4.1 DIV+CSS网站布局概述4.2 网页布局模型-盒子模型4.3 布局属性4.4 布局结构4.5 DIV+CSS排版方式4.1 DIV+CSS网站布局概述u常见的布局方式：传统的table方式；div+css方式u两种布局方式的比较：4.2 网页布局模型-盒子模型盒子模型盒子模型结构4.2 网页布局模型-盒子模型理解盒子模型 一个盒子由content(内容)、border(边框)、padding(间隙)、margin(空隙)四部分组成；盒子具有宽度（width）和高度（height）盒子里面的内容到盒子的边框之间的距离即填充（padding）盒子本身有边框（border）盒子边

2、框外和其他盒子之间，还有边界（margin）4.2 网页布局模型-盒子模型盒子模型具体结构图理解盒子模型4.3 布局属性填充距离填充距离(或内边距或内边距)padding：用于控制内容和边框之间的距离，顺序依次是上、右、下、左 设置1个值：表示上下左右padding均为该值，如padding:5px；设置2个值：前者为上下padding值，后者为左右padding值，如padding:5px 10px；设置3个值：第1个为上padding值，第2个为左右padding值，第3个为下padding值，如padding：5px 10px 15px；设置4个值：按照顺时针方向，依次为上，右，下，左p

3、adding值，如padding：1px 2px 3px 4px；4.3 布局属性边界边界(或外边距或外边距)margin：用于控制元素和元素之间的距离，顺序依次是上、右、下、：用于控制元素和元素之间的距离，顺序依次是上、右、下、左左 设置1个值：表示上下左右margin均为该值。设置2个值：前者为上下magin值，后者为左右maigin值。设置3个值：第1个为上margin值，第2个为左右margin值，第3个为下margin值；设置4个值：按照顺时针方向，依次为上，右，下，左margin值。4.3 布局属性边框边框线线border：设置元素的边框样式，顺序也是上、右、下、左。：设置元素的边

4、框样式，顺序也是上、右、下、左。属性：color（颜色）、width(粗细)、style(样式)颜色：border-color:颜色值;粗细：border-width:thin，medium，thick，值；样式：border-style:none、dotted、dashed、solid、double、groove、ridge、inset、outset。4.3 布局属性浮动浮动float：是：是css 的定位属性。当某个元素脱离了标准流的排列，可以使用浮的定位属性。当某个元素脱离了标准流的排列，可以使用浮动来实现。所谓动来实现。所谓“标准流标准流”，是指在不使用其他的与排列和定位相关的，是指在

5、不使用其他的与排列和定位相关的特殊特殊CSS规则时规则时,各种元素的排列规则。浮动是非标准流的排列方式，主各种元素的排列规则。浮动是非标准流的排列方式，主要用来排版、做文字环绕效果等。要用来排版、做文字环绕效果等。float：none，默认值，对象不飘浮 float：left，文本流向对象的右边 float：right，文本流向对象的左边左浮动案例*margin:0px;padding:0px;#fatherborder:1px solid#000;margin:20px;#father.sonmargin:10px;padding:10px;/*设置儿子的不同样式*/#son1 color:

6、#F00;border:1px solid blue;float:left;#son2 color:blue;border:1px dashed red;float:left;#son3 color:#090;border:1px solid#060;float:left;#father p font:13px Arial,Helvetica,sans-serif;margin:5px;border:1px solid red;左右浮动*margin:0px;padding:0px;#fatherborder:1px solid#000;margin:20px;#father.sonmargi

7、n:10px;padding:10px;/*设置儿子的不同样式*/#son1 color:#F00;border:1px solid blue;float:left;#son2 color:blue;border:1px dashed red;float:right;#son3 color:#090;border:1px solid#060;float:left;#father p font:13px Arial,Helvetica,sans-serif;margin:5px;border:1px solid red;4.3 布局属性定位定位position：定位属性可以允许网页元素相对于其原

8、来本身位置，应该出现：定位属性可以允许网页元素相对于其原来本身位置，应该出现在哪。定位一般分为两种：相对定位在哪。定位一般分为两种：相对定位(relative)和绝对定位和绝对定位(absolute)。相对相对定位定位(relative)：指定位元素相对于它自己原先的位置产生的位移，它原先所占据的位置依然保留，因此它被称为“自私的定位方式”，一般结合top和left设置当前定位元素的位置。绝对绝对定位定位(absolute)：指定位元素相对于离它最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置就相对于最初的包含块。它原先所占据的位置不再保留，让位给跟随其后的元素，因此被称为“无

9、私的定位方式”。相对定位案例.fathermargin:50px;height:250px;border:1px solid black;.sonpadding:15px;border:1px solid red;position:relative;top:100px;left:50px;我是son 绝对定位#box margin:50px;height:200px;border:1px solid red;position:relative;#box.box-small padding:10px;border:1px solid blue;position:absolute;top:10px

10、;left:10px;小盒子 4.3 布局属性层叠顺序层叠顺序Z-index：检索或设置对象的层叠：检索或设置对象的层叠顺序顺序 Z-index:auto 默认值。遵从其父对象的定位 Z-index:number 无单位的整数值。可为负数 较大 number 值的对象会覆盖在较小 number 值的对象之上。4.3 布局属性显示显示display：定义元素以何种方式显示：定义元素以何种方式显示 display：block，此元素将以块元素方式显示，会独占一行，并支持宽度、高度、内边距、外边距等布局属性的设置。display：inline，此元素会被显示为行内元素，其后元素会紧随其后显示，不会换

11、行，设置该元素的宽度、高度、内边距等属性将无效。display：none，此元素将会被隐藏，且所占据的物理位置会被删除。绝对定位综合案例4.4 布局结构1、“国国”字型网页字型网页布局布局：也称为同字型，最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等搜狐国字型网页布局4.4 布局结构布局结构布局结构2、拐角、拐角型网页型网页布局布局 上面是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正文，下面也是一些网站的辅助信息hao123的拐角型网页布局结构4.4 布局结构布局

12、结构布局结构3、左右、左右框架型网页框架型网页布局布局 左右为分别两页的框架结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文，一般大型论坛采用这种结构CSDN论坛的左右框架型网页布局4.4 布局结构4、封面、封面型网页型网页布局：布局：基本上出现在一些网站的首页，大部分为一些精美的平面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示，企业网站和个人主页封面型网页布局4.4 布局结构5、flash型网页型网页布局布局 flash网站基本以图形和动画为主，所以比较适合做那些文字内容不太多，以平面、动画效果为主的应用。

13、如：企业品牌推广、特定网上广告、网络游戏、个性网站等 flash网页布局4.5 DIV+CSS排版方式1、1-2-1方式（两列布局方式方式（两列布局方式）flash网页布局1-2-1布局方式1-2-1方式（两列布局方式）HTML元素定义部分：页头信息 左边内容 右边内容 页脚信息 1-2-1方式（两列布局方式）CSS样式定义部分：#containermargin:0px auto;width:800px;#header,#main,#footerwidth:800px;border:1px solid#999;margin-bottom:10px;#headerbackground-color

14、:#CC0;background-repeat:no-repeat;height:100px;#menufloat:left;width:180px;background-color:#B0DCFF;height:400px;#contentfloat:right;width:600px;background-color:#E0DEFE;height:400px;#footerheight:100px;background-color:#C6F0FB;.clearclear:both;4.5 DIV+CSS排版方式2、1-3-1方式方式（三列（三列布局方式布局方式）flash网页布局1-3-1

15、布局方式1-3-1方式（三列布局方式）HTML元素定义部分：1-3-1方式（三列布局方式）CSS样式定义部分：*margin:0px;padding:0px;bodyfont-size:12px;#container margin:10px auto;width:960px;border:1px solid#03C;#header,#main,#footerwidth:960px;margin-bottom:10px;border:1px solid#666;#header background-color:#C90;height:200px;#left float:left;width:20

16、0px;background-color:#09F;height:300px;margin:5px 10px;#middle float:left;width:400px;backgroundcolor:#699;height:300px;margin:5px 10px;#rightfloat:left;width:300px;background-color:#C33;height:300px;margin:5px 10px;.clearclear:left;#footerheight:100px;background-color:#96F;本章小结u本章主要介绍了网页布局方式DIV+CSS，主要包括网页布局模型-盒子模型，布局属性如浮动float，显示display，定位potition等，网页布局的基本结构及排版方式。传道，授业，解惑同步实训实训要求：实训要求：通过PSD源文件，自行切图，并创建html文档，定义网页布局，添加CSS样式，实现页面效果，测试网页的兼容性。