《CSS3 DIV网页样式与布局(全案例微课版)》是针对零基础读者编写的网页样式与布局入门教材。本书侧重案例实训,并提供扫码微课来讲解当前的热点案例。 《CSS3 DIV网页样式与布局(全案例微课版)》分为24章,内容包括网页设计需要学什么、网页实现技术HTML5、初始CSS3层叠样式表、CSS3选择器的应用及特性、使用CSS3设计字体与文本样式、使用CSS3设计图片与边框样式、使用CSS3控制网页背景样式、使用CSS3定义链接与鼠标样式、使用CSS3设计表格样式、使用CSS3设计表单样式、使用CSS3设计列表与菜单样式、使用CSS3滤镜设计网页图片**、使用CSS3设计动画效果、使用CSS3中的盒子模型、CSS3 DIV布局的浮动与定位、使用CSS3布局网页版式、设计可响应式的移动网页、使用JavaScript控制CSS3样式、使用CSS设计XML 文档样式、流行的响应式开发框架Bootstrap以及4个热点综合项目。 《CSS3 DIV网页样式与布局(全案例微课版)》通过精选热点案例,让初学者快速掌握网页样式与布局的开发技术。通过微信扫码看视频,读者可以随时在移动端观看案例对应的视

第1章 网页设计需要学什么 001 1.1 认识网页和网站 002 1.1.1 认识网页 002 1.1.2 认识网站 003 1.2 网页设计需要的技术 004 1.2.1 HTML 004 1.2.2 DIV布局 005 1.2.3 CSS样式 005 1.2.4 脚本语言JavaScript 006 1.3 网页文档的基本结构 007 1.3.1 制作个网页 007 1.3.2 文档类型说明 008 1.3.3 html标签 008 1.3.4 头部标签 008 1.3.5 主体标签 008 1.3.6 注释标签 009 1.4 网页设计的流程 009 1.4.1 网站规划 010 1.4.2 搜集资料 010 1.4.3 设计网页结构 010 1.4.4 获取网页素材 011 1.4.5 搭建网页DIV层 012 1.4.6 设计网页效果 013 1.4.7 测试网页 013 第2章 网页实现技术——HTML5 015 2.1 HTML5中的常用标签 016 2.1.1 基础标签的应用 016 2.1.2 文本格式标签 017 2.1.3 **链接标签 017 2.1.4 列表标签的应用 018 2.2 HTML5中的图像标签 019 2.2.1 插入并编辑网页中的图像 020 2.2.2 定义图像热点区域 021 2.2.3 绘制网页图形图像 022 2.3 HTML5中的表单标签 023 2.3.1 文本类输入框 024 2.3.2 按钮类输入框 025 2.3.3 网页中的按钮 026 2.3.4 图像域和文件域 027 2.3.5 设置表单中的列表 028 2.3.6 表单常用属性的应用 029 2.4 HTML5中的表格标签 030 2.4.1 表格的基本结构 030 2.4.2 使用属性编辑表格 031 2.4.3 完整的表格标签 033 2.5 HTML5中的多媒体标签 034 2.5.1 audio标签的应用 034 2.5.2 在网页中添加音频文件 035 2.5.3 认识video标签 036 2.5.4 在网页中添加视频文件 037 2.6 标签 039 2.7 标签 040 2.8 新手常见疑难问题 041 2.9 实战技能训练营 041 第3章 初始CSS3层叠样式表 042 3.1 CSS概述 043 3.1.1 CSS的功能介绍 043 3.1.2 CSS的发展历史 043 3.1.3 CSS的构造规则 044 3.1.4 CSS的注释 044 3.2 CSS中的常用单位 045 3.2.1 颜色单位 045 3.2.2 长度单位 048 3.3 创建和编辑CSS 文件 049 3.4 在HTML5 中调用CSS 的方法 051 3.4.1 行内样式 051 3.4.2 内嵌样式 052 3.4.3 链接样式 053 3.4.4 导入样式 054 3.5 调用方法的优先级 055 3.5.1 行内样式和内嵌样式比较 055 3.5.2 内嵌样式和链接样式比较 055 3.5.3 链接样式和导入样式 056 3.6 新手常见疑难问题 057 3.7 实战技能训练营 057 第4 章 CSS3 选择器的特性及应用 058 4.1 认识CSS 选择器 059 4.2 选择器的应用 059 4.2.1 标签选择器 059 4.2.2 类选择器 061 4.2.3 ID 选择器 062 4.2.4 全局选择器 063 4.2.5 组合选择器 063 4.2.6 继承选择器 064 4.2.7 伪类选择器 065 4.2.8 属性选择器 066 4.2.9 结构伪类选择器 067 4.2.10 UI 元素状态伪类选择器 068 4.3 选择器声明 069 4.3.1 集体声明 069 4.3.2 多重嵌套声明 070 4.4 CSS3 的继承特性 070 4.4.1 继承关系 070 4.4.2 CSS 继承的运用 071 4.5 CSS3 的层叠特性 072 4.5.1 同一选择器被多次定义的处理 072 4.5.2 同一标签运用不同类型选择器的处理 072 4.6 新手常见疑难问题 073 4.7 实战技能训练营 073 第5 章 使用CSS3 设计字体与文本样式 074 5.1 设置字体样式 075 5.1.1 控制字体类型 075 5.1.2 定义字体大小 076 5.1.3 定义字体风格 077 5.1.4 控制文字的粗细 077 5.1.5 将小写字母转换为大写字母 078 5.1.6 设置字体的复合属性 079 5.1.7 定义文字的颜色 080 5.2 设置文本的**样式 081 5.2.1 添加文本的阴影效果 081 5.2.2 设置文本溢出效果 082 5.2.3 控制文本的换行 082 5.2.4 设置字体尺寸 083 5.3 设置文本间距与对齐方式 084 5.3.1 设置单词之间的间隔 084 5.3.2 设置字符之间的间隔 085 5.3.3 为文本添加装饰线 086 5.3.4 设置垂直对齐方式 086 5.3.5 转换文本的大小写 088 5.3.6 设置文本的水平对齐方式 088 5.3.7 设置文本的缩进效果 090 5.3.8 设置文本的行间距 090 5.3.9 文本的空白处理 091 5.3.10 文本的反排 092 5.4 新手常见疑难问题 093 5.5 实战技能训练营 093 第6 章 使用CSS3 设计图片与边框样式 095 6.1 图片样式基础 096 6.1.1 图片大小 096 6.1.2 图片对齐 097 6.1.3 文字环绕图片 099 6.1.4 图片与文字的间距 100 6.2 边框样式基础 101 6.2.1 边框样式 101 6.2.2 边框颜色 103 6.2.3 边框线宽 104 6.2.4 边框复合属性 105 6.3 圆角边框样式 106 6.3.1 定义圆角边框 106 6.3.2 指定两个圆角半径 107 6.3.3 绘制四个不同圆角的边框 107 6.3.4 绘制不同种类的边框 108 6.4 新手常见疑难问题 110 6.5 实战技能训练营 110 第7 章 使用CSS3 控制网页背景样式 111 7.1 背景样式基础 112 7.1.1 设置背景颜色 112 7.1.2 网页板块配色 113 7.1.3 设置背景图像 114 7.1.4 平铺背景图像 115 7.1.5 固定背景图像 116 7.1.6 定位背景图像 117 7.2 新增控制背景属性 119 7.2.1 背景图像大小 119 7.2.2 背景显示区域 120 7.2.3 裁剪背景图像 121 7.2.4 背景复合属性 122 7.3 网页背景渐变效果 123 7.3.1 线性渐变效果 123 7.3.2 径向渐变效果 124 7.4 新手常见疑难问题 125 7.5 实战技能训练营 126 第8 章 使用CSS3 定义链接和鼠标样式 127 8.1 链接样式基础 128 8.1.1 设置链接样式 128 8.1.2 定义下划线样式 130 8.1.3 定义链接背景图 131 8.1.4 定义链接提示信息 132 8.1.5 定义链接按钮 133 8.2 定义鼠标指针** 134 8.2.1 鼠标样式基础 134 8.2.2 变幻鼠标光标 137 8.2.3 定义滚动条样式 138 8.3 新手常见疑难问题 139 8.4 实战技能训练营 140 第9 章 使用CSS3 设计表格样式 141 9.1 表格样式基础 142 9.1.1 设置表格颜色 142 9.1.2 设置表格边框 143 9.1.3 设置表格边框宽度 144 9.1.4 设置表格边框颜色 145 9.1.5 设置表格标题的位置 145 9.1.6 隐藏空单元格 146 9.1.7 设置单元格的边距 147 9.2 设置悬浮变色的表格 148 9.3 使用表格布局网页 151 9.4 新手常见疑难问题 153 9.5 实战技能训练营 153 第10 章 使用CSS3 设计表单样式 154 10.1 表单样式基础 155 10.1.1 表单字体样式 155 10.1.2 表单边框样式 156 10.1.3 表单背景样式 157 10.1.4 设计表单按钮样式 158 10.1.5 设计下拉菜单样式 159 10.2 制作用户登录页面 160 10.3 制作用户注册页面 161 10.4 新手常见疑难问题 162 10.5 实战技能训练营 163 第11 章 使用CSS3 设计列表与菜单样式 164 11.1 项目列表样式 165 11.1.1 无序项目列表 165 11.1.2 有序项目列表 166 11.1.3 自定义项目列表 167 11.1.4 图片列表样式 168 11.1.5 设置图片列表的位置 169 11.1.6 列表复合属性的应用 170 11.1.7 将段落转变成列表 171 11.2 菜单样式基础 172 11.2.1 制作动态导航菜单 172 11.2.2 制作水平方向菜单 173 11.2.3 制作多级菜单列表 175 11.2.4 模拟制作SOSO 导航栏 177 11.3 新手常见疑难问题 179 11.4 实战技能训练营 179 第12 章 使用CSS3 滤镜设计网页图片** 180 12.1 CSS3 中的滤镜 181 12.2 设置基本滤镜效果 182 12.2.1 高斯模糊(blur)滤镜 182 12.2.2 明暗度(brightness)滤镜 183 12.2.3 对比度(contrast)滤镜 183 12.2.4 阴影(drop-shadow)滤镜 184 12.2.5 灰度(grayscale)滤镜 185 12.2.6 反相(invert)滤镜 185 12.2.7 透明度(opacity)滤镜 186 12.2.8 饱和度(saturate)滤镜 187 12.2.9 深褐色(sepia)滤镜 188 12.2.10 使用复合滤镜效果 188 12.3 新手常见疑难问题 189 12.4 实战技能训练营 189 第13 章 使用CSS3 设计动画效果 191 13.1 2D 转换动画效果 192 13.1.1 添加2D 移动效果 192 13.1.2 添加2D 旋转效果 193 13.1.3 添加2D 缩放效果 194 13.1.4 添加2D 倾斜效果 195 13.1.5 添加2D 综合变换效果 196 13.2 3D 转换动画效果 197 13.2.1 添加3D 移动效果 197 13.2.2 添加3D 旋转效果 200 13.2.3 添加3D 缩放效果 202 13.3 设计过渡动画效果 204 13.3.1 设置过渡属性 204 13.3.2 设置过渡时间 205 13.3.3 设置延迟时间 206 13.3.4 设置过渡动画类型 207 13.4 设计帧动画效果 208 13.4.1 设置关键帧 208 13.4.2 设置动画属性 210 13.5 新手常见疑难问题 212 13.6 实战技能训练营 213 第14 章 使用CSS 中的盒子模型 214 14.1 块级元素与行内级元素 215 14.1.1 块级元素的应用 215 14.1.2 行内元素的应用 216 14.2 盒子模型 216 14.2.1 定义盒子边界 217 14.2.2 定义盒子边框 219 14.2.3 定义盒子补白 220 14.2.4 定义盒子大小 221 14.3 CSS3 新增的盒子模型属性 222 14.3.1 定义盒子的布局方向 223 14.3.2 定义盒子的布局顺序 224 14.3.3 定义盒子的布局位置 225 14.3.4 定义盒子的显示空间 226 14.3.5 管理盒子空间的大小 227 14.3.6 盒子空间的溢出管理 228 14.4 弹性盒子模型 229 14.4.1 使用弹性盒子 229 14.4.2 设置弹性子元素的位置 231 14.4.3 设置弹性子元素的横向对齐方式 231 14.4.4 设置弹性子元素的纵向对齐方式 233 14.4.5 设置弹性子元素的换行方式 234 14.5 新手常见疑难问题 235 14.6 实战技能训练营 236 第15 章 CSS DIV 布局的浮动与定位 237 15.1 定义DIV 238 15.1.1 什么是DIV 238 15.1.2 创建DIV 238 15.2 网页元素的定位 238 15.2.1 静态定位 239 15.2.2 相对定位 239 15.2.3 定位 240 15.2.4 固定定位 241 15.2.5 浮动定位 241 15.3 其他CSS 布局定位方式 242 15.3.1 溢出(overflow)定位 243 15.3.2 隐藏(visibility)定位 244 15.3.3 z-index 空间定位 245 15.4 新增CSS3 多列布局 245 15.4.1 设置列宽度 246 15.4.2 设置列数 246 15.4.3 设置列间距 247 15.4.4 设置列边框样式 248 15.5 新手常见疑难问题 250 15.6 实战技能训练营 250 第16 章 使用CSS3 布局网页版式 251 16.1 认识CSS3 布局版式 252 16.1.1 将页面用DIV 分块 252 16.1.2 设置各块位置 252 16.1.3 用CSS 定位版式 253 16.2 固定宽度网页布局模式 255 16.2.1 网页单列布局模式 255 16.2.2 网页1-2-1 型布局模式 258 16.2.3 网页1-3-1 型布局模式 260 16.3 自动缩放网页布局模式 262 16.3.1 1-2-1 等比例变宽布局 262 16.3.2 1-2-1 单列变宽布局 262 16.3.3 1-3-1 单侧列宽度固定布局 263 16.3.4 1-3-1 中间列宽度固定布局 265 16.3.5 1-3-1 双侧列宽度固定布局 267 16.3.6 1-3-1 中列和左侧列宽度固定布局 269 16.4 新手常见疑难问题 271 16.5 实战技能训练营 271 第17 章 设计可响应式的移动网页 273 17.1 什么是响应式网页设计 274 17.2 像素和屏幕分辨率 275 17.3 视口 275 17.3.1 视口的分类和常用属性 275 17.3.2 媒体查询 276 17.4 设计响应式网页的布局 277 17.4.1 常用布局类型 277 17.4.2 布局的实现方式 277 17.4.3 响应式布局的设计与实现 278 17.5 设计响应式图片 279 17.5.1 使用 标签 279 17.5.2 使用CSS 图片 280 17.6 设计响应式视频 281 17.7 设计响应式导航菜单 282 17.8 设计响应式表格 284 17.8.1 隐藏表格中的列 284 17.8.2 滚动表格中的列 285 17.8.3 转换表格中的列 286 17.9 新手常见疑难问题 288 17.10 实战技能训练营 289 第18 章 使用JavaScript 控制CSS3 样式 290 18.1 JavaScript 语法基础 291 18.1.1 什么是JavaScript 291 18.1.2 数据类型 291 18.1.3 变量 292 18.1.4 运算符 293 18.1.5 流程控制语句 295 18.1.6 JavaScript 中的函数 297 18.2 常见的JavaScript 编写工具 299 18.2.1 记事本编写工具 299 18.2.2 Dreamweaver 编写工具 300 18.3 JavaScript 在HTML 中的使用 300 18.3.1 在HTML 网页头中嵌入JavaScript代码 301 18.3.2 在HTML 网页中嵌入JavaScript代码 301 18.3.3 在HTML 网页的元素事件中嵌入JavaScript代码 302 18.3.4 在HTML 中调用JavaScript 文件 303 18.3.5 通过JavaScript 伪URL 引入JavaScript脚本代码 303 18.4 JavaScript 与CSS3 的结合使用 304 18.4.1 动态改变网页元素 304 18.4.2 改变网页元素的动态样式 305 18.4.3 动态定位网页元素 306 18.4.4 设置网页元素的显示与隐藏 307 18.5 HTML5、CSS3 和JavaScript 的搭配应用 308 18.5.1 设定左右移动的图片 308 18.5.2 制作背景颜色选择器 310 18.5.3 制作文字跑马灯效果 312 18.6 新手常见疑难问题 313 18.7 实战技能训练营 314 第19 章 使用CSS 设计XML 文档样式 315 19.1 XML 语法基础 316 19.1.1 XML 的基本应用 316 19.1.2 XML 文档的组成和声明 317 19.1.3 XML 元素介绍 318 19.2 CSS 修饰XML 文件 319 19.2.1 在XML 中使用CSS 320 19.2.2 设置字体属性 320 19.2.3 设置色彩属性 321 19.2.4 设置边框属性 322 19.2.5 设置文本属性 322 19.3 新手常见疑难问题 323 19.4 实战技能训练营 323 第20 章 流行的响应式开发框架Bootstrap 325 20.1 Bootstrap 概述 326 20.1.1 Bootstrap 的特色 326 20.1.2 Bootstrap 4 的重大更新 326 20.2 下载与安装Bootstrap 327 20.2.1 下载Bootstrap 327 20.2.2 安装Bootstrap 329 20.2.3 使用Bootstrap 329 20.3 使用常用组件 330 20.3.1 使用下拉菜单 330 20.3.2 使用按钮组 331 20.3.3 使用导航组件 332 20.3.4 绑定导航和下拉菜单 334 20.3.5 使用面包屑 335 20.3.6 使用广告屏 335 20.3.7 使用card(卡片) 336 20.3.8 使用进度条 337 20.3.9 使用模态框 340 20.3.10 使用滚动监听 342 20.4 胶囊导航选项卡(Tab 栏) 344 20.5 新手常见疑难问题 345 20.6 实战技能训练营 346 第21 章 项目实训1——开发连锁咖啡响应式网站 347 21.1 网站概述 348 21.1.1 网站结构 348 21.1.2 设计效果 348 21.1.3 设计准备 349 21.2 设计首页布局 350 21.3 设计可切换导航 351 21.4 主体内容 356 21.4.1 设计轮播广告区 356 21.4.2 设计产品**区 358 21.4.3 设计登录、注册按钮和Logo 359 21.4.4 设计特色展示区 360 21.4.5 设计产品生产流程区 361 21.5 设计底部隐藏导航 364 第22 章 项目实训2——开发房产企业响应式网站 365 22.1 网站概述 366 22.1.1 网站结构 366 22.1.2 设计效果 366 22.1.3 设计准备 367 22.2 设计主页 367 22.2.1 主页布局 367 22.2.2 设计导航条 368 22.2.3 设计轮播广告 370 22.2.4 设计功能区 372 22.2.5 设计特色展示 373 22.2.6 设计脚注 377 22.3 设计侧边导航栏 378 22.4 设计登录页 380 第23 章 项目实训3——开发在线购物网站 382 23.1 整体布局 383 23.1.1 设计分析 383 23.1.2 排版架构 383 23.2 主要模块设计 384 23.2.1 Logo 与导航区 384 23.2.2 Banner 与资讯区 385 23.2.3 产品类别区域 387 23.2.4 页脚区域 388 第24 章 项目实训4——开发企业门户网站 389 24.1 构思布局 390 24.1.1 设计分析 390 24.1.2 排版架构 390 24.2 主要模块设计 391 24.2.1 Logo 与导航菜单 391 24.2.2 Banner 区 392 24.2.3 资讯区 393 24.2.4 版权信息 395