div css布局ppt下载

素材大小：: 1 MB

素材授权：: 免费下载

素材格式：: .ppt

素材上传：: lipeier

上传时间：: 2020-02-13

素材编号：: 251008

素材类别：: 课件PPT

素材预览

这是div css布局ppt，包括了盒子模型，布局技术，“上中下”布局，“左中右”布局等内容，欢迎点击下载。

div css布局ppt是由红软PPT免费下载网推荐的一款课件PPT类型的PowerPoint.

第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 盒子结构 8.1.2 盒子属性在CSS样式中，将盒子模型的内边距、边框和外边距，按top、bottom、left、right的四个方向，分别进行定义和设置，描述盒子属性。 8.1.2 盒子属性例如，在网页中创建一个ou9红软基地

标签，ID标识为Div1，并在其中插入一个图像，代码如下： 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

标签

一个块状容器类标签，即在

和

之间可以容纳各种HTML元素，同时也构成一个独立的矩形区域。无论在页面中使用多少个标签，

标签之间仅存在并列关系和内嵌关系。 8.2.1

标签 8.2.1

标签 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 浮动方式 float属性包含三个属性值：Left控制网页元素向左浮动，Right控制网页元素向浮右动，None没有浮动。 clear属性包括三个属性值：left清除向左浮动，right清除向浮右动，none没有清除。 clear属性与float属性配合使用，清除各种浮动。 8.2.3 浮动方式无浮动 8.2.3 浮动方式 8.2.3 浮动方式左右浮动 8.2.3 浮动方式 8.2.3 浮动方式全部左浮动 8.2.3 浮动方式 8.2.3 浮动方式使用左清除 8.2.3 浮动方式 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所示。

div+css的ppt：这是div+css的ppt，包括了Div+css的概述，DIV+CSS布局，SPAN和DIV的区别，CSS概述，用CSS定义样式，盒子模型，普通流定位机制等内容，欢迎点击下载。

div css教程ppt：这是div css教程ppt（部分ppt内容已做更新升级），包括了传统布局与CSS布局，XHTML与CSS基础，CSS网页布局与定位，实例：三栏居中式布局等内容，欢迎点击下载。

div css布局ppt下载

div css布局ppt

素材评分榜

素材排行榜