好文档就是一把金锄头!
欢迎来到金锄头文库![会员中心]
电子文档交易市场
安卓APP | ios版本
电子文档交易市场
安卓APP | ios版本

CSS+Div布局.ppt

52页
  • 卖家[上传人]:工****
  • 文档编号:608201153
  • 上传时间:2025-05-25
  • 文档格式:PPT
  • 文档大小:1.22MB
  • / 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,所示,。

      点击阅读更多内容
      相关文档
      教科版(2024)新教材小学二年级科学上册第一单元《科学阅读 各种各样的房屋》精品课件.pptx 教科版(2024)新教材小学二年级科学上册《第一单元 单元小结》精品课件.pptx 教科版(2024)新教材小学二年级科学上册第一单元《6.“小房子”展示会》精品课件.pptx 小学语文新部编版三年级上册第四单元12 在牛肚子里旅行作业课件(含答案)(2025秋).pptx 小学语文新部编版二年级上册第二单元3 拍手歌作业课件(含答案)(2025秋).pptx 小学语文新部编版三年级上册第三单元9 犟龟作业课件(含答案)(2025秋).pptx 小学语文新部编版三年级上册第二单元7 听听秋的声音作业课件(含答案)(2025秋).pptx 小学语文新部编版二年级上册第一单元语文园地一作业课件(含答案)(2025秋).pptx 小学语文新部编版二年级上册第六单元16 难忘的泼水节作业课件(含答案)(2025秋).pptx 小学语文新部编版二年级上册第五单元语文园地五作业课件(含答案)(2025秋).pptx 小学语文新部编版二年级上册第一单元1 小蝌蚪找妈妈作业课件(含答案)(2025秋).pptx 小学语文新部编版三年级上册第二单元6 秋天的雨作业课件(含答案)(2025秋).pptx 小学语文新部编版二年级上册第五单元12 寒号鸟作业课件(含答案)(2025秋).pptx 小学数学新人教版三年级上册第六单元2分数的简单计算第1课时 分数的简单计算(1)作业课件(含答案)(2025秋).pptx 小学语文新部编版三年级上册第八单元26 一个粗瓷大碗作业课件(含答案)(2025秋).pptx 小学语文新部编版三年级上册第二单元5 铺满金色巴掌的水泥道作业课件(含答案)(2025秋).pptx 小学数学新人教版三年级上册第二单元综合训练作业课件(含答案)(2025秋).pptx 小学数学新人教版三年级上册第六单元1初步认识分数第2课时 几分之几作业课件(含答案)(2025秋).pptx 小学语文新部编版二年级上册第五单元11 坐井观天作业课件(含答案)(2025秋).pptx 小学数学新人教版三年级上册第六单元易错集锦作业课件(含答案)(2025秋).pptx
      关于金锄头网 - 版权申诉 - 免责声明 - 诚邀英才 - 联系我们
      手机版 | 川公网安备 51140202000112号 | 经营许可证(蜀ICP备13022795号)
      ©2008-2016 by Sichuan Goldhoe Inc. All Rights Reserved.