HTML5 CSS3 JavaScript网页设计与制作项目教程课件PPT 项目4 网页布局与元素的精确定位——DIV+CSS应用.pptx

HTML5+CSS3+JavaScript网页设计与制作项目教程项目1 网页布局与元素的精确定位——CSS+DIV应用 目录ENTERPRISE OPERATION REPORT04.总结提升03.知识链接02.学习目标01.项目导入 项目导入PART 01 项目导入【项目导入】 “旅行家——住宿”页面效果展示CSS+DIV可实现丰富的页面布局及美化。在进行网页页面实现时，我们通常使用盒子模型的定位属性布局页面，同时使用盒子模型的边框及背景属性美化页面。本章我们将使用CSS+DIV制作“旅行家——住宿”页面，案例完成效果如图4.1所示。 学习目标PART 02 知识目标能力目标理解盒子模型的基本概念，熟悉盒子模型的基本属性及高级属性掌握盒子的浮动属性了解文档流的概念，掌握盒子模型定位方法掌握HTML元素的类型及其转换方法能够布局网页基本框架能够灵活运用盒子模型设计并制作网页模块 知识链接PART 03 一、盒子模型及其基本属性1、盒子模型简介我们通常所说的盒子模型，是指将HTML中的元素看成一个矩形容器。我们通过实际生活中的手机盒子来类比CSS盒子模型，以便于更好理解盒子模型的概念，如图4.2所示： 对于一个CSS盒子，其实际占据的宽高计算方法如下：总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和 一、盒子模型及其基本属性2、DIV结构及其基本属性在HTML中，我们使用div标记来表示一个盒子，其基本语法格式为：div 属性=”属性值”文本内容/div盒子模型的基本属性包括盒子的宽高、边框、内边距、外边距，盒子模型的基本结构如图4.3所示： （1）width/height：指盒子内容部分的宽/高，其属性值可以px为单位，也可以是百分比形式，用来表示其宽度所占其父对象的比例。（2）border：用来设置盒子的边框属性，其属性如表4.1所示： 一、盒子模型及其基本属性样式属性属性说明属性值border-width设置边框的宽度（粗细）px（像素值）border-style设置边框的样式（线型）none（默认）、solid（单实线）、dashed（虚线）、dotted（电线）、double（双实线）、groove（3D凹槽）、ridge（菱形边框）、inset （3D凹边）、outset（3D凸边）border-color设置边框的颜色颜色词、十六进制颜色码、rgb值border设置综合边框属性border:宽度 样式 颜色;border-radius设置圆角边像素值、百分比border-image设置图片边框border-image: 路径 裁剪方式/边框宽度/边框扩展距离 重复方式;表4.1 边框属性 一、盒子模型及其基本属性例4-1 边框的基本属性(代码略）例4-2 圆角边(代码略） 一、盒子模型及其基本属性border-image用来设置图片边框，其复合写法语法格式如下border-image: source slice width outset repeat|initial|inherit;图片边框的属性也可分为一下几个属性分别设置，具体如表4.2表4.2 border-image 图片边框属性属性名称描述border-image-source用在边框的图片的路径。border-image-slice图片边框向内偏移。border-image-width图片边框的宽度。border-image-outset边框图像区域超出边框的量。border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 一、盒子模型及其基本属性例4-3 图片边框（代码略） 图4.6 例4-3素材图 图4.7 图片边框裁切属性原理 图4.8 图片边框超出属性原理 一、盒子模型及其基本属性（3）padding/margin：用来设置盒子内/外边距的宽度，其属性值是一个像素值也可使用auto属性自动设置边距。可以将边距设置为同样的值，也可将边距分四个方向设置为不同的值。其语法格式如下：padding/margin:边距值padding/margin:上下边距值 左右边距值padding/margin:上边距值 左右边距值 下边距值padding/margin:上边距值 右边距值 下边距值 左边距值 一、盒子模型及其基本属性例4-4 内边距及外边距（代码略） 1. box-shadow属性box-shadow属性用于给盒子添加阴影效果，其语法格式如下：box-shadow: 水平阴影 垂直阴影 模糊半径 扩展半径 阴影颜色 阴影类型 box