ᠰᠦᠯᠵᠢᠶ᠎ᠡ ᠬᠢᠬᠦ ᠮᠡᠷᠭᠡᠵᠢᠯ ᠤᠨ ᠦᠨᠳᠦᠰᠦᠨ ᠮᠡᠳᠡᠯᠭᠡ CSS_Div布局.pptx

CSS+Div布局,1. 盒子模型 2. 布局技术 3. “上中下”布局 4. “左中右”布局,本章学习的主要内容：,1盒子结构 网页中元素都占据一定的空间，除了元素内容之外还包括元素周围的空间，一般地把元素和它周围空间所形成的矩形区域称为盒子 ︵box︶ 。 从布局的角度看，网页是由很多盒子组成，根据需要将诸多盒子在网页中进行排列和分布，就形成了网页布局。,1盒子模型,1.1盒子结构 模型的结构由4个部分组成，content ︵内容︶ 、padding ︵内边距或填充︶ 、border ︵边框︶ 和margin ︵外边距︶ 。,1盒子模型,边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。,1.2盒子属性 在CSS样式中，将盒子模型的内边距、边框和外边距，按top、bottom、left、right的4个方向，分别进行定义和设置。,1盒子模型,2.1 标签 一个块状容器类标签，即在和之间可以容纳各种HTML元素，同时也构成一个独立的矩形区域。 无论在页面中使用多少个标签，标签之间仅存在并列关系和内嵌关系。,2布局技术,2.1 标签,2布局技术,2.1 标签,2布局技术,2.2 position定位属性 position ︵定位︶ 属性包括了4种属性值：static，relative，absolute和fixed. Static静态定位为默认值，网页元素遵循HTML的标准定位规则，即网页各种元素按照“前后相继”的顺序进行排列和分布。 ︵normal-flow.html︶ Relative相对定位，网页元素也遵循HTML的标准定位规则，但需要为网页元素相对于原始的标准位置设置一定的偏移距离。 ︵position-relative.html︶ ,2布局技术,CSS样式表,10,static 按照元素的类型和在HTML源文件中的出现顺序进行定位 就是block元素 ︵如p、h、div︶ ︵块级框︶ 从上到下一个接一个的排列 除非特殊的指定，否则所有的框都在普通流中定位 相对定位 相对于元素在普通文本流中的初始位置 如果一个元素进行相对定位，它将以它所在的位置 ︵即它在普通流中的位置︶ 为初始点，然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的初始点进行移动,使用相对定位时，元素仍然占据原来的空间，因此被看作普通流定位模型的一个特殊情况 另外，移动元素可能导致覆盖其它元素, #style1 {position: relative︔ left:20px︔ top:20px } ,Absolute绝对定位方式，网页元素不再遵循HTML的标准定位规则，脱离了“前后相继”的定位关系，以该元素的上级元素为基准设置偏移量进行定位。 ︵position-absolute.html︶ Fixed固定定位与绝对定位类似，也脱离了“前后相继”的定位规则，但元素的定位是以浏览器窗口为基准进行。 ︵position-fixed.html︶ ,2布局技术,可以把某个元素精确的定位在某个地方 绝对定位使元素的位置与文档流无关，因此不占据普通流中的空间，普通文档流中其他元素的布局就像绝对定位的元素不存在时一样 绝对定位的元素的位置是相对于最近的父元素而言的,固定定位 是绝对定位的一个特殊情况 与绝对定位相似，唯一不同的是绝对定位是相对于父元素的某一个位置，而固定定位则是固定在浏览器的视框位置 这样当窗口滚动时，固定定位的元素不会随之滚动，总是出现在屏幕的固定位置, #style1 {position:absolute︔ left:20px︔ top:20px } , #style1 {position:fixed︔ left:20px︔ top:20px } ,2.3 浮动方式 Float属性包含3个属性值：Left控制网页元素向左浮动，Right控制网页元素向浮右动，None没有浮动。 Clear属性包括3个属性值：left清除向左浮动，right清除向浮右动，none没有清除。 ︵表明一个盒子的左侧或右侧不允许浮动元素︶ Clear属性与Float属性配合使用，清除各种浮动。,2布局技术,浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘,2.3 浮动方式 无浮动,2布局技术,2.3 浮动方式,2布局技术,2.3 浮动方式 左右浮动,2布局技术,2.3 浮动方式,2布局技术,2.3 浮动方式 全部左浮动 ︵using-float.html︶ ,2布局技术,2.3 浮动方式,2布局技术,2.3 浮动方式 使用左清除 ︵clear.html︶ ,2布局技术,2.3 浮动方式,2布局技术,3.1课堂案例-网页设计大赛 案例学习目标：学习“上中下”布局的方法。 案例知识要点：在【插入】面板【布局】选项卡中，使用【插入Div标签】按钮创建网页布局结构；在【CSS样式】面板中，使用【新建CSS规则】按钮创建标签的ID样式，并采用缺省的【position】和【float】属性，完成“上中下”的布局。 素材所在位置：光盘/案例素材/ch12/课堂案例-网页设计大赛。 案例布局要求如图所示，案例效果如图所示。,3“上中下”布局,3.2 在Dreamweaver中插入标签 在【插入Div标签】对话框中，各个选项含义如下： 【ID】：为标签设置网页中的唯一标识。 【类】：可以在下拉框中为标签选择一个已经存在的类样式。 【新建CSS规则】：为标签新建一个以ID标识为名称的样式。 【插入】：其各种选项决定了标签之间是并列关系还是嵌入关系，其选项包括：,3“上中下”布局,“在插入点”表示在插入点插入一个标签，嵌入已经存在的标签中，如果插入点前有内容，那么换行插入。 “在选定内容旁换行”表示在该文字所在行插入一个标签，嵌入已经存在的标签中，保留原内容。 “在标签之前”表示插入一个标签，与指定的标签形成并列关系。 “在标签之后”表示插入一个标签，与指定的标签形成并列关系。,3“上中下”布局,“在开始标签之前”表示在标签之前，插入一个标签。 “在开始标签之后”表示在标签之后，插入一个标签。,3“上中下”布局,4.1课堂案例-连锁餐厅 案例学习目标：学习“左中右”布局的方法。 案例知识要点：在【插入】面板【布局】选项卡中，使用【插入Div标签】按钮，插入标签；在【插入Div标签】对话框中，使用【新建CSS规则】按钮，创建标签的ID样式，设置【position】、【float】和【clear】属性，完成“左中右”的网页布局。 素材所在位置：连锁餐厅。 案例布局要求如图所示，案例效果如图所示。,4“左中右”布局,#container: width:1000px︔ height:930px︔ right:left:auto #main 12px︔ #666︔ right:16px .text:32px︔ #f90︔ .text2:18px︔ #f90,4.2使用CSS样式布局 1. 在Dreamweaver中标签的浮动设置 2. 常用布局形式 在CSS+Div布局中，将网页版面分割成左侧，中部和右侧3个部分的形式. 将网页分割成左右两个部分.,4“左中右”布局,4.2使用CSS样式布局,4“左中右”布局,4.2使用CSS样式布局,4“左中右”布局,4.2使用CSS样式布局,4“左中右”布局,5.1练习案例-电子产品 案例练习目标：练习“上中下”布局的方法。 案例操作要点： 在ID名称为header，banner和footer的3个标签中，直接插入相应图像。 在ID名称为menu的标签中，嵌入名称为navi的标签，menu标签中的图像，通过在#menu样式中添加背景图像。,5练习案例,在navi的标签中，输入文字“公司介绍 产品展示 客户服务 人员招募 互动社区”，并设置#navi样式的属性，宽度：450px，高度：34px，左外边距450px，字体大小14px，行高度：30，颜色：#FFF。 在ID名称为info的标签中，插入3个图像，中间用空格隔开，设置#info样式添加黑色背景。 素材所在位置：练习案例-电子产品。,5练习案例,5.2练习案例-装修公司 案例练习目标：练习“左中右”布局的方法。 案例操作要点： 在ID名称为menu和footer的2个标签中，直接插入相应图像。 设置页面属性body背景为#CCC，边距为0，字体大小12px，文字颜色#999。#container样式背景为白色。,5练习案例,#info1样式属性的左右内边距分别为85px；#info2样式属性的内边距为10；#info3样式属性的左右内边距分别为10px，上部内边距为70px。 标题样式.text1属性，文本大小30px，颜色为#451B08，居中；副标题样式.text2属性，文本大小18px；info1中文本样式.text3属性，文本大小14px，区块显示block，下部内边距5px，下部边框为实线，宽度1px，颜色#999，上下外边距为20px。 素材所在位置：练习案例-装修公司。 案例布局要求如图所示，案例效果如图所示。,5练习案例,