
CSS+Div布局.ppt
52页单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,第六级,第七级,第八级,第九级,2018/2/23,,‹#›,,第,8,章,CSS+Div,布局,网页设计与制作,Dreamweaver,CC,标准教程,,本章学习的主要内容:,1.,,盒子,模型,2,.,布局,技术,3.,“,上中下”布局,4.,“,左中右”布局,8.1,盒子,模型,盒子模型是,CSS,样式布局的重要概念,网页,中元素都占据一定的空间,除了元素内容之外还包括元素周围的空间,一般地把元素和它周围空间所形成的矩形区域称为盒子(,box,),从,布局的角度看,网页是由很多盒子组成,根据需要将诸多盒子在网页中进行排列和分布,就形成了网页布局8.1,盒子,模型,8.1.1,盒子结构,8.1.2,盒子,属性,,8.1.1,盒子,结构,盒子模型通过定义模型结构,描述网页元素的显示方式和元素之间的相互关系,确定网页元素在网页布局中的空间和位置,8.1.1,盒子,结构,盒子,模型的结构由四个部分组成:,content,(内容)、,padding,(内边距或填充)、,border,(边框)和,margin,(外边距),如图,8-1,所示,。
8.1.2,盒子,属性,在,CSS,样式中,,将,盒子模型的内边距、边框和外边距,按,top,、,bottom,、,left,、,right,的,四,个,方向,分别进行定义和,设置,,描述盒子属性8.1.2,盒子,属性,例如,,在网页中创建一,个,,标签,,,ID,标识,为,Div1,,并在其中插入一个图像,,,代码如下:,,#,apDiv1 {,position:absolute;,,width:300px,;,height:181px,;,,padding-top: 15px;,,,padding-right,: 18px;,padding-bottom,: 15px;,padding-left,: 18px;,border,: 30px solid #333;,},8.1.2,盒子,属性,8.2,布局,方法,在,CSS+Div,布局中,,,标签是盒子模型的主要载体,具有分割网页的功能,CSS,样式中的,position,属性和,float,属性决定这些,,标签的相互关系和分布排列的位置8.2,布局,技术,8.2.1,,标签,8.2.2 position,定位属性,8.2.3,浮动,方式,8.2.1 ,标签,<,div>,一个块状容器类标签,即在,,和,,之间可以容纳各种,HTML,元素,同时也构成一个独立的矩形区域,。
无论,在页面中使用多少个标签,,,标签之间仅存在并列关系和内嵌关系8.2.1 ,标签,8.2.1 ,标签,,,,,,使用,div,,#box1 {,height: 120px;,width: 200px;,background-color: #C93;,margin: 10px;,padding: 10px;,},#box2 {,height: 60px;,width: 100px;,background-color: #F63;,,,margin: 10px;,padding: 10px;,},#box3 {,height: 100px;,width: 300px;,background-color: #6CF;,},,,,box1,box2,,box3,,,8.2.2 position,定位属性,position,(定位),属性包括了,四,种,属性值:,static,,,relative,,,absolute,和,fixed.,Static,静态定位为默认值,网页元素遵循,HTML,的标准定位规则,即网页各种元素按照“前后相继”的顺序进行排列和分布,。
Relative,相对定位,网页元素也遵循,HTML,的标准定位规则,但需要为网页元素相对于原始的标准,位置设置,一定的偏移距离,CSS+Div,的布局方式采用了标准定位规则的布局方式,这也是系统的默认方式,8.2.2 position,定位属性,absolute,绝对定位方式,网页元素不再遵循,HTML,的标准定位规则,脱离了“前后相继”的,定位关系,,以该元素,的上级元素为,基准设置偏移量进行定位,Fixed,固定定位与绝对定位类似,也脱离了“前后相继”的定位规则,但元素的定位是以浏览器窗口为基准进行,8.2.3,浮动方式,f,loat,属性,包含,三,个,属性值:,Left,控制网页元素向左浮动,,Right,控制网页元素向浮右动,,None,没有,浮动c,lear,属性,包括三个,属性值:,left,清除向左浮动,,right,清除向浮右动,,none,没有清除,c,lear,属性,与,f,loat,属性配合使用,清除各种浮动8.2.3,浮动方式,无浮动,8.2.3,浮动方式,#box1 {,height: 100px;,width: 150px;,background-color: #F90;,},#box2 {,height: 100px;,width: 200px;,background-color: #C30;,},#box3 {,height: 100px;,width: 250px;,background-color: #3FF,;,},8.2.3,浮动方式,左右浮动,8.2.3,浮动方式,#box1 {,height: 100px;,width: 150px;,background-color: #F90;,,float: left;,},#box2 {,height: 100px;,width: 200px;,background-color: #C30;,,float: left;,},#box3 {,height: 100px;,width: 250px;,background-color: #3FF;,,float: right;,},8.2.3,浮动方式,全部左浮动,,8.2.3,浮动方式,#box1 {,height: 100px;,width: 150px;,background-color: #F90;,,float: left;,},#box2 {,height: 100px;,width: 200px;,background-color: #C30;,,float: left;,},#box3 {,height: 100px;,width: 250px;,background-color: #3FF;,,float: left;,},8.2.3,浮动方式,使用左清除,8.2.3,浮动方式,#box1 {,height: 100px;,width: 150px;,background-color: #F90;,,float: left;,},#box2 {,height: 100px;,width: 200px;,background-color: #C30;,,float: left;,},#box3 {,height: 100px;,width: 250px;,background-color: #3FF;,,float: left;,,clear: left;,},,8.3 “,上中下”布局,在“上中下”布局中,,,标签按照前后相继的顺序排列,分割网页空间,不需要使,,标签浮动,其大小和外观由,CSS,样式控制。
8.3 “,上中下”布局,8.3.1,课堂,案例,-,网页设计,大赛,8.3.2,在,Dreamweaver,中插入,,标签,8.3.1,课堂案例,-,网页设计大赛,案例学习目标:学习“上中下”布局的方法案例知识要点:在,【,插入,】,面板,【HTML】,选项卡中,使用,【Div】,按钮 创建网页布局结构;在,【CSS,设计器,】,面板中,使用,【,添加选择器,】,按钮 创建,,标签的,ID,样式,并采用缺省的,【position】,和,【float】,属性,完成“上中下”的布局素材所在位置:光盘,/,案例素材,/ch08/,课堂案例,-,网页设计大赛案例布局要求如图,8-9,所示,案例效果如图,8-10,所示,8.3.2,在,Dreamweaver,中插入,,标签,在,【,插入,Div,标签,】,对话框中,各个选项含义如下:,【ID】,:,可以在下拉框中直接输入或选择一个名称,为,,标签设置网页中的唯一标识类,】,:,可以在下拉框中直接输入或选择一个名称,为,,标签设置一个类样式,设置网页布局和外观,新建,CSS,规则,】,:,为,,标签新建一个,ID,样式或类样式插入,】,:其各种选项决定了,,标签之间是并列关系还是嵌入关系,其选项包括,:,8.3.2,在,Dreamweaver,中插入,,标签,“在插入点”表示在插入点插入一个,,标签,嵌入已经存在的,,标签中,如果插入点前有内容,那么换行插入。
在选定内容旁换行”表示在该文字所在行插入一个,,标签,嵌入已经存在的,,标签中,保留原内容在标签之前”表示插入一个,,标签,与指定的,,标签形成并列,关系在标签之后”表示插入一个,,标签,与指定的,,标签形成并列,关系8.3.2,在,Dreamweaver,中插入,,标签,“,在开始标签之前”表示在,,标签之前,插入一个,,标签在开始标签之后”表示在,,标签之后,插入一个,,标签8.4 “,左中右”布局,在“左中右”布局中,首先插入若干个,,标签,并按照前后相继顺序排列;然后,设置,CSS,样式的【,float,】和【,clear,】属性,使,,标签浮动,实现“左中右”的布局;最后,设置,CSS,样式其他属性控制,,标签的外观,8.4 “,左中右”布局,8.4.1,课堂,案例,-,连锁,餐厅,8.4.2,使用,CSS,样式布局,,8.4.1,课堂案例,-,连锁餐厅,案例学习目标:学习“左中右”布局的方法案例知识要点:在,【,插入,】,面板,【HTML】,选项卡中,使用,【Div】,按钮 ,插入,,标签;在,【,插入,Div】,对话框中,使用,【,新建,CSS,规则,】,按钮,创建,,标签的相关样式,设置,【position】,、,【float】,和,【clear】,属性,完成“左中右”的网页布局。
素材所在位置:光盘,/,案例素材,/ch08/,课堂案例,-,连锁餐厅案例布局要求如图,8-38,所示,案例效果如图,8-39,所示,8.4.2,使用,CSS,样式布局,1,.,,在,Dreamweaver,中,,标签的浮动设置,2.,,常用,布局,形式,在,CSS+Div,布局中,将网页版面分割成左侧,中部和,右侧三个,部分的,形式将网页分割成左右两个,部分,8.4.2,使用,CSS,样式布局,8.4.2,使用,CSS,样式布局,8.4.2,使用,CSS,样式布局,8.5,练习,案例,8.5.1,练习,案例,-,电子,产品,8.5.2,练习,案例,-,装修,公司,8.5.1,练习案例,-,电子产品,案例练习目标:练习“上中下”布局的方法案例操作要点:,1,.创建文件名称为,index.html,的文档,并将所有样式存放在,product,样式文档中插入,ID,名称为,container,的,,标签,宽度为,1000px,,并居中对齐2,.在,container,的,,标签中,插入,ID,名称为,header,,,menu,,,banner,,,info,和,footer,的,5,个,,标签,宽度均为,1000px,,高度分别为,38px,,,34px,,,468px,,,165px,和,64px,。
3,.在,menu,的,,标签中,插入名称为,nav,的,,标签,宽度,450px,,高度,34px,,左外边距,550px,8.5.1,练习,案例,-,电子产品,4,.利用,#menu,样式为,menu,的,,标签添加图像背景在,#nav,标签中,输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”,并设置,#nav,样式,字体大小为,16px,,行高度为,30px,,颜色为,#FFF,5,.设置,#nav a:link,,,#nav a:visited,样式属性,颜色为,#FFF,,文字装饰为无,设置,#nav a:hover,样式属性,文字装饰为下划线,完成导航条的制作6,.在,ID,名称为,info,的,,标签中,插入,1*3,表格,宽度为,100%,,将三个图像分别插入到单元格中,设置,#info,样式背景为黑色素材所在位置:光盘,/,案例素材,/ch08/,练习案例,-,电子产品案例布局要求如图,8-67,所示,案例效果如图,8-68,所示8.5.2,练习,案例,-,装修公司,案例练习目标:练习“左中右”布局的方法案例操作要点:,1,.创建文件名称为,index.html,的新文档,并将所有样式存放在,decoration,样式文档中。
插入,ID,名称为,container,的,,标签,宽度为,1000px,,高度为,860px,,并居中对齐2,.在,container,的,,标签中,插入,ID,名称为,menu,,,info1,,,info2,,,info3,和,footer,的,5,个,,标签,宽度和高度分别为,1000px,和,107px,,,160px,和,670px,,,320px,和,670px,,,310px,和,670px,,,1000px,和,83px,其中,ID,名称为,info1,,,info2,,,info3,的,,标签为左浮动,,ID,名称为,footer,的,,标签取消左浮动,8.5.2,练习案例,-,装修公司,3,.在,footer,标签中,插入两个,,标签,其类样式名称为,.f1,和,.f2,,其宽度分别为,580px,和,280px,,并设置它们为左浮动4,.设置页面属性的背景为,#CCC,,边距为为,0,,字体大小为,12px,,文字颜色为,#999,设置,#container,样式的背景为白色5,.标题样式,.text1,,文本大小为,30px,,颜色为,#451B08,,左对齐;副标题样式,.text2,,文本大小为,18px,;职位标题文本样式,.text3,,文本大小,14px,,下部内边距,5px,,下部边框为实线,宽度为,1px,,颜色为,#999,。
8.5.2,练习,案例,-,装修公司,6,.设置,#info1,样式的左右内边距分别为,85px,;,#info2,样式的左右内边距为,10px,;,#info3,样式的左右内边距分别为,10px,,上部内边距为,10px,;,.f1,样式的上部和左侧外边距分别为,20px,和,60px,;,.f2,样式的上部和左侧外边距分别为,30px,和,60px,,字体为黑体,大小为,20px,,颜色为,#66250F,素材所在位置:光盘,/,案例素材,/ch08/,练习案例,-,装修公司案例布局要求如图,8-69,所示,案例效果如图,8-70,所示,。
