CSS盒子模型讲稿(1).pptx

第四章 CSS盒子模型 。盒子模型相关属性 。 块元素与行内元素的区别 让IT教学更简单，让IT学习更有效 【案例7】:音乐盒 【案例8】:用户中心 【案例9】:咖啡店banner 【案例10】:图标导航栏 目录 让IT教学更简单，让IT学习更有效 音乐可以陶冶情操，为我们带来听觉上 的享受，随着互联网的普及，在网络上听音 乐变得越来越方便。本节将通过盒子模型及 其边框属性制作一个音乐盒，如下图所示。 4.1【案例7】音乐盒 让IT教学更简单，让IT学习更有效 毕业季|再见青春 认识盒子模型 2 <div>标记 3 边框属性 4.1【案例7】知识引入 知识引入 让IT教学更简单，让IT学习更有效 1、 认识盒子模型 所谓盒子模型就是把HTML 页面中的元素看作是一个矩形的盒子，也就是一 个盛装内容的容 器。每个矩形都由 元素的内容、内边距 (padding)、 边 框 ( border) 和外边距 (margin) 组成。 [点击查看demo] 4.1 【案例7】知识点讲解 让IT教学更简单，让IT学习更有效 2 、<div> 标记 div 是英文division 的缩写，意为“分割、区域”。 <div> 标记简单而言就是一 个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和 布局。<div> 与</div> 之间相当于一个容器，可以容纳段落、标题、图像等各种网 页元素，也就是说大多数HTML 标记都可以嵌套在<div> 标记中， <div> 中还可以 嵌套多层<div>。 <div> 标记非常强大，通过与id、class 等属性配合，然后使用CSS 设置样式 ,来替代大多数的文本标记。 点击查看demo] 4.1【案例7】知识点讲解 让IT教学更简单，让IT学习更有效 border-bottom-width: 宽度； border-bottom-color:颜色； border-bottom: 宽度样式颜色； border-left-style:样式； border-left-width: 宽度； border-left-color: 颜色； border-left: 宽度样式颜色； border-right-style: 样式； border-right-width: 宽度； border-right-color:颜色； border-right: 宽度样式颜色； border-style:上边[右边下边左边]; border-width: 上边[右边下边左边]; border-color:上边[右边下边左边]; border: 四边宽度四边样式四边颜色； 下边框 左边框 右边框 样式综合设置 宽度综合设置 颜色综合设置 边框综合设置 样式属性 border-top-style: 样式； border-top-width: 宽度； border-top-color:颜色； border-top: 宽度样式颜色； border-bottom-style: 样式 ； none无(默认)、solid 单实线、dashed 虚线、dotted 点线、double 双实线 像素值 颜色值、#十六进制、rgb(r,g,b)、 rgb(r%,g%,b%) 4.1【案例7】知识点讲解 让IT教学更简单，让IT学习更有效 3、 边框属性 常用属性值 设置内容 上边框 3、 边框属性 (1)设置边框样式 (border-style) 边框样式用于定义页面中边框的风格，常用属性值如下： · none: 没有边框即忽略所有边框的宽度(默认值) · solid: 边框为单实线 · dashed: 边框为虚线 · dotted: 边框为点线 · doubl e: 边框为双实线 4.1【案例7】知识点讲解 让IT教学更简单，让IT学习更有效 3、 边框属性 (1)设置边框样式 (border-style) 在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边 的样式，具体如下： · border-top-style: 上边框样式； · border-right-style: 右边框样式； · border-bottom-style: 下边框样式； · border-left-style: 左边框样式； · border-style: 上边框样式右边框样式下边框样式左边框样式； · border-style: 上边框样式左右边框样式下边框样