Div+CSS3.0网页布局案例精粹(升级版)

Div+CSS3.0网页布局案例精粹(升级版)
分享
扫描下方二维码分享到微信
打开微信,点击右上角”+“,
使用”扫一扫“即可将网页分享到朋友圈。
作者:
2019-12
版次: 1
ISBN: 9787121377020
定价: 79.90
装帧: 平装
开本: 16开
纸张: 胶版纸
页数: 404页
2人买过
  • 本书系统地介绍了CSS样式的基础理论和实际应用技术,并结合实例来介绍Div+CSS布局制作网页的方法和技巧。在实例的制作过程中介绍CSS样式设计各方面知识的同时,还结合实际网页制作中可能遇到的问题提供解决问题的思路、方法和技巧,使初学者也可以轻松地掌握Div+CSS布局的方式,制作出精美的网页。本书全面展现了运用Div+CSS进行网页设计布局的方法,详细的讲解步骤配合图示,使得每个步骤清晰易懂、一目了然。收中不但应用大量实例对重点难点进行深入的剖析,而且还结合作者多年的网页设计与教学经验进行点拨,使读者学以致用。并且在书中还穿插介绍了有关CSS和HTML的相关知识,立求使读者了解到*新的网页设计制作技术。本书内容丰富、结构清晰,注重思维锻炼与实践应用,适合初、中级网页设计爱好者以及希望学习Web标准对原有网站进行重构的网页设计者。本书配套资源包中还提供了书中所有实例源文件和相关视频教程,供读者学习和参考。 张晓景 畅销书作者,Adobe 专家委员会成员,Adobe 网页设计师认证讲师,Adobe UI设计工程师,国家信息产业部653工程讲师。 
    参与国家开放大学网页设计和网页界面设计课程体系开发。从事平面设计、网站设计和UI设计多年,参与开发过数十个多媒体商业网站。对UI设计风格有独特见解。有丰富的教学经验,为中国石油、中国铁路等大型企业做专业企业培训,曾在中国传媒大学、北京大学、北京师范大学、北京交通大学等重点院校以及Adobe创意大学和新东方等培训机构教授设计课程。 

    第一章 网页和网站制作流程

    1.1 认识网页 2

    1.1.1 网页和网站 2

    1.1.2 网页的基本构成元素 2

    1.2 什么是网页设计 3

    1.2.1 网页设计概述 3

    1.2.2 网页设计和网页制作 4

    1.2.3 网页设计的特点 5

    1.2.4 网页制作相关术语 6

    1.3 网页设计中所涵盖的内容 11

    1.3.1 视听元素 11

    1.3.2 版式设计 11

    1.4 如何设计网页 12

    1.4.1 网页设计的基本原则 12

    1.4.2 网页设计成功的要素 13

    1.4.3 网页设计风格及色彩搭配 14

    1.5 网页设计的原则 14

    1.5.1 为用户考虑的原则 14

    1.5.2 主题突出原则 15

    1.5.3 整体原则 16

    1.5.4 内容与形式相统一 16

    1.5.5 更新和维护的原则 17

    1.6 网页设计师应具备的素质 17

    1.6.1 艺术素质 17

    16.2 技能素质 18

    1.6.3 综合素质 18

    1.7 网站的制作流程 19

    1.7.1 前期策划 19

    1.7.2 原型设计 20

    1.7.3 页面美化 21

    1.7.4 页面开发 22

    1.7.5 后期维护 22

    1.8 静态页面的制作流程 22

    1.8.1 观察设计稿 22

    1.8.2 拆分设计稿 23

    1.8.3 网页设计实现 23

    第二章 CSS样式入门

    2.1 CSS的基本概念 25

    2.1.1 CSS的特点 25

    2.1.2 CSS的基本语法 25

    2.1.3 CSS的冲突 26

    技能案例:使用就近原则 26

    2.2 网页设计中的CSS 28

    2.2.1 如何使用CSS 28

    2.2.2 CSS能做什么 29

    2.2.3 CSS不能做什么 30

    2.3 CSS的基本用法 30

    2.3.1 内联样式 30

    2.3.2 嵌入样式 30

    技能案例:设置嵌入样式 30

    2.3.3 外部样式 31

    2.4 CSS的单位和值 31

    2.4.1 定义颜色值 32

    2.4.2 定义字体 33

    2.5 CSS基础选择符 34

    2.5.1 通配选择符 34

    2.5.2 标签选择符 35

    2.5.3 id选择符 35

    2.5.4 类选择符 35

    技能案例:使用类选择符定义样式 36

    2.5.5 群组选择符 36

    2.5.6 基础选择符浏览器适配 36

    2.6 CSS的层次选择符 36

    2.6.1 后代选择符 37

    技能案例:使用后代选择符定义样式 37

    2.6.2 子选择符 37

    2.6.3 相邻兄弟选择符 37

    技能案例:使用相邻兄弟选择符设置样式 37

    2.6.4 通用兄弟选择符 38

    技能案例:使用通用兄弟选择符定义样式 38

    2.6.5 层次选择符浏览器适配 39

    2.7 伪类和伪元素 39

    2.7.1动态伪类选择符 39

    2.7.2 目标伪类选择符 40

    2.7.3 语言伪类选择器 40

    2.7.4 UI元素状态伪类选择器 40

    2.7.5 结构伪类选择器 41

    2.7.6 伪类选择符浏览器适配 42

    2.7.7 伪元素选择符 44

    2.8 应用案例――为页面添加CSS样式 45

    2.8.1 设计分析 45

    2.8.2 制作步骤 45

    2.8.3 案例总结 51

    2.9 举一反三――产品介绍网站 51

    2.9.1 案例分析 52

    2.9.2 视频操作 52

    第三章 使用DIV+CSS布局页面

    3.1 定义Div 55

    3.1.1 什么是Div 55

    3.1.2 插入Div 55

    3.1.3 Div的嵌套和固定格式 56

    3.2 CSS布局定位 57

    3.2.1 浮动定位 57

    3.2.2 position定位 60

    3.3 可视化盒模型 62

    3.3.1 盒子模型 62

    3.3.2 视觉可视化模型 64

    3.3.3 空白边叠加 64

    3.4 常见的网页布局方式 65

    3.4.1 居中布局设计 65

    3.4.2 浮动布局设计 66

    3.4.3 高度自适应 70

    3.5 盒模型的控制属性 70

    3.5.1 overflow 70

    技能案例:显示滚动条 71

    3.5.2 overflow-x 71

    技能案例:显示横向滚动条 71

    3.5.3 overflow-y 72

    技能案例:显示竖向滚动条 72

    3.6 应用案例――使用DIV+CSS布局页面 73

    3.6.1 设计分析 73

    3.6.2 制作步骤 73

    3.6.3 案例总结 78

    3.7 举一反三――制作健康网站 78

    3.7.1 案例分析 78

    3.7.2 视频操作 79

    第四章 使用CSS控制网页中的背景

    4.1 背景颜色 81

    4.1.1 设置页面背景颜色 81

    技能案例:添加背景颜色 81

    4.1.2 设置块背景颜色 82

    技能案例:添加块背景 82

    4.1.3 渐变背景 83

    技能案例:设置线性渐变背景 83

    技能案例:设置径向渐变背景 84

    4.2 背景图片 86

    4.2.1 为页面设置背景图片 86

    技能案例:设置背景图片 86

    4.2.2 背景图片的重复 87

    技能案例:设置背景图片的重复 87

    4.2.3 设置背景图片的位置 88

    技能案例:设置背景图片的位置 88

    4.2.4 设置背景滚动 90

    技能案例:设置页面背景滚动 90

    4.2.5 背景样式缩写的方式 90

    4.3 背景定位 91

    4.3.1 背景定位属性的语法 91

    4.3.2 背景定位属性的浏览器适配 91

    4.4 背景裁切 92

    4.4.1 背景裁切属性的语法 92

    4.4.2 背景裁切的浏览器适配 92

    4.5 背景大小 93

    4.5.1 背景大小属性的语法 93

    4.5.2 背景大小浏览器的适配 93

    4.6 多重背景图像 94

    4.6.1 多重背景图像属性的语法 94

    4.6.2 多重背景图像的浏览器适配 95

    4.6.3 CSS多背景属性的优势 95

    4.7 应用案例――制作金融类网站页面 96

    4.7.1 设计分析 96

    4.7.2 制作步骤 96

    4.7.3 案例总结 102

    4.8 举一反三――制作电子商品网站 102

    4.8.1 案例分析 103

    4.8.2 视频操作 103



    第五章 使用CSS控制页面文字样式

    5.1 控制文本样式 106

    5.1.1 文本字体和大小 106

    技能案例:设置网页中的文字字体 107

    5.1.2 文本颜色和粗细 110

    技能案例:设置网页中文字的颜色 110

    5.1.3 文本的3种样式 112

    技能案例:设置网页中文字的样式 112

    5.1.4 文本的美化方式 113

    技能案例:为网页中的文字设置下划线效果 113

    5.1.5 英文字母大小写 113

    5.2 控制段落样式 114

    5.2.1 段落水平对齐 114

    技能案例:设置文字左对齐、水平居中与右对齐 114

    5.2.2 段落垂直对齐 116

    技能案例:设置文本段落垂直对齐 116

    5.2.3 行间距和字间距 117

    5.2.4 首字下沉 118

    技能案例:设置网页中段落首字母下沉 118

    5.3 文字阴影及模糊 119

    5.3.1 文字阴影及模糊属性的语法 119

    技能案例:设置网页中文本的阴影 119

    5.3.2 文字阴影属性的浏览器适配 120

    5.4 文字溢出 120

    5.4.1 文字溢出属性的语法 121

    5.4.2 文字溢出属性浏览器的适配 121

    5.5 文字断开转行 121

    5.5.1 文字断开转行属性的语法 121

    5.5.2 文字转行属性的浏览器适配 122

    5.6 应用实例――设计类网站 122

    5.6.1 设计分析 123

    5.6.2 制作步骤 123

    5.6.3 案例总结 129

    5.7 举一反三――制作社区类网站 129

    5.7.1 案例分析 130

    5.7.2 视频操作 130



    第六章 使用CSS控制图片样式

    6.1图片样式 132

    6.1.1 图片边框设置 132

    技能案例:设置图片边框 132

    6.1.2 图片缩放设置 135

    技能案例:设置网页中图片的缩放 135

    6.2 图片对齐 137

    6.2.1 水平对齐设置 137

    技能案例:设置图片的水平对齐 137

    6.2.2 垂直对齐设置 138

    6.3 图文混排 139

    6.3.1 文本混排 140

    技能案例:设置网页中的图文混排 140

    6.3.2 设置混排间距 140

    6.4 图像边框 141

    6.4.1 图像边框属性的语法介绍 141

    6.4.1 图像边框的浏览器适配 141

    6.5 边框圆角 142

    6.5.1 边框圆角属性的语法 142

    6.5.2 4个子属性 143

    6.5.3 边框圆角属性的浏览器适配 144

    6.6 边框阴影 144

    6.6.1 边框阴影属性的语法 145

    6.6.2边框阴影浏览器的适配 145

    6.7 边框颜色 146

    6.7.1 边框颜色属性的语法 146

    6.7.2 边框颜色的浏览器适配 147

    6.8 应用实例――制作婚庆网站页面 147

    6.8.1 设计分析 147

    6.8.2 制作步骤 148

    6.8.3 案例总结 153

    6.9 举一反三――产品介绍网站 153

    6.9.1 案例分析 154

    6.9.2 视频操作 154

    第七章 使用CSS控制列表样式

    7.1 列表控制概述 155

    7.1.1 列表控制原则 155

    7.1.2 列表的类型及使用 155

    技能案例:使用uI制作无序列表 155

    技能案例:使用ol制作无序列表 156

    技能案例:使用dl制作列表 156

    7.1.3 改变项目样式 157

    技能案例:制作突出的列表样式 157

    7.1.4 图片符号 158

    技能案例:制作图片符号列表 158

    7.2 使用列表制作实用菜单 159

    7.2.1 无需表格的菜单 159

    技能案例:制作竖排菜单 159

    7.2.2 菜单的横竖转换 161

    技能案例:制作横排菜单 161

    技能案例:制作下拉菜单 162

    7.3 Opacity 164

    7.3.1 Opacity 语法 164

    技能案例:为图片设置透明度 164

    7.3.2 Opacity的浏览器适配 165

    7.4 CSS 颜色模式 165

    7.4.1 HSL colors语法 165

    技能案例:使用HSL颜色模式 165

    7.4.2 HSLA colors 语法 166

    技能案例:使用HSLA颜色模式 166

    7.4.3 RGBA colors语法 167

    技能案例:使用RGBA颜色模式 167

    7.4.4 HSL、HSLA和RGBA colors的浏览器适配 168

    7.5 应用实例――制作音乐网站 169

    7.5.1 设计分析 170

    7.5.2 制作步骤 170

    7.5.3 案例总结 174

    7.6 举一反三――制作设计工作室网站 174

    7.6.1 案例分析 174

    7.6.2 视频操作 175

    第八章 使用CSS控制表单样式

    8.1 表单设计概述 177

    8.1.1 表单的设计原则 177

    8.1.2 表单应用分类 178

    8.2 表单的设计 179

    8.2.1 表单和表单元素 179

    8.2.2 标签、字段集和图例 183

    技能案例:制作表单 183

    8.2.3 使用CSS控制文本字段 185

    技能案例:使用CSS样式更改表单外观 185

    8.2.4 使用CSS控制复选框与单选框 185

    技能案例:使用CSS样式更改表单外观2 186

    8.2.5 使用CSS控制列表与跳转菜单 186

    技能案例:使用CSS样式更改表单外观3 186

    8.3 应用实例――制作用户注册页面 187

    8.3.1 设计分析 187

    8.3.2 制作步骤 187

    8.3.3 案例总结 195

    8.4 举一反三――制作用户登录页面 195

    8.4.1 案例分析 196

    8.4.2 视频操作 196

    第九章 使用CSS美化浏览器效果

    9.1 使用CSS控制超链接 199

    9.1.1 认识超链接 199

    9.1.2 关于链接路径 200

    9.1.3 超链接属性控制 202

    技能案例:设置超链接属性 203

    9.1.4 伪元素的内容控制属性 205

    技能案例:使用content属性 206

    9.1.5 图像映射 206

    技能案例:设置热点链接 206

    9.1.6 链接的打开方式 208

    9.2 超链接特效 208

    9.2.1 按钮式超链接 208

    技能案例:制作按钮式超链接 208

    9.2.2 浮雕式超链接 209

    技能案例:制作浮雕式超链接 209

    9.3 鼠标特效 210

    9.3.1 CSS控制鼠标箭头 210

    9.3.2 鼠标变化的超链接 211

    技能案例:设置超链接的鼠标变化 211

    9.4 box-sizing 212

    9.4.1 box-sizing属性语法 212

    9.4.2 box-sizing的浏览器适配 212

    技能案例:为边框添加阴影 213

    9.5 resize 213

    9.5.1 resize属性 213

    9.5.2 resize的浏览器适配 214

    9.6 outline 214

    9.6.1 outline属性语法 214

    9.6.2 outline的浏览器适配 215

    9.7 nav-index 216

    9.7.1 nav-index属性语法 216

    9.7.2 nav-index的浏览器适配 216

    9.8 应用实例――制作产品宣传网站页面 216

    9.8.1 设计分析 217

    9.8.2 制作步骤 217

    9.8.3 案例总结 225

    9.9 举一反三――制作运输公司网站页面 225

    9.9.1 案例分析 225

    9.9.2 视频操作 226

    第十章 使用CSS控制变形动画效果

    10.1 CSS变形属性简介 228

    10.1.1 变形属性与函数 228

    10.1.2 变形属性的浏览器适配 228

    10.2 网页元素的2D变形效果 230

    10.2.1 旋转变形 230

    技能案例:实现元素的旋转效果 230

    10.2.2 缩放和翻转变形 231

    技能案例:实现元素的缩放效果 231

    10.2.3 移动变形 232

    技能案例:实现元素的缩放效果 232

    10.2.4 倾斜变形 233

    技能案例:实现网页元素的倾斜效果 234

    10.2.5 矩阵变形 235

    10.2.6 定义变形的中心点 235

    10.2.7 同时使用多个变形函数 236

    10.3 网页元素3D变形效果 236

    10.3.1 3D位移变形 236

    技能案例:实现网页元素的3D位移效果 237

    10.3.2 3D旋转变形 238

    技能案例:实现网页元素的3D旋转效果 238

    10.3.3 3D缩放变形 240

    技能案例:实现网页元素的3D缩放效果 240

    10.3.4 3D矩阵变形 241

    10.4 CSS过渡效果 242

    10.4.1 过渡属性简介 242

    10.4.2 如何创建过度动画 242

    10.4.3 实现过渡效果 243

    10.4.4 设置过渡时间 243

    10.5 应用实例――网页元素变形过渡效果 244

    10.5.1 设计分析 244

    10.5.2 制作步骤 244

    10.5.3 案例总结 247

    10.6 举一反三――制作关键帧动画效果 247

    10.6.1 案例分析 247

    10.6.2 视频操作 248



    第十一章 CSS与JavaScript的综合应用

    11.1 什么是JavaScript 250

    11.1.1 了解JavaScript 250

    技能案例:在页面中嵌入JavaScript代码 251

    11.1.2 JavaScript的特点 252

    11.1.3 JavaScript的应用范围 253

    11.1.4 CSS样式与JavaScript 255

    11.2 JavaScript的语法基础 255

    11.2.1 JavaScript的基本架构 255

    技能案例:使用JavaScript实现弹出提示框 256

    11.2.2 JavaScript的基本语法 256

    11.2.3 数据类型和变量 259

    11.2.4 表达式和运算符 260

    11.2.5 基本语句 260

    技能案例:使用if语句 261

    技能案例:使用for语句 261

    11.3 JQuery 262

    11.3.1 JQuery Mobile 262

    11.3.2 JQuery UI 263

    技能案例:创建jQuery UI组件 264

    11.4 其他JavaScript框架 264

    11.4.1 Raect 264

    11.4.2 Vue 265

    11.4.3 Angular 265

    11.5 应用实例――在网页中应用交互效果 266

    11.5.1 设计分析 267

    11.5.2 制作步骤 267

    11.5.3 案例总结 276

    11.6 举一反三――制作婚纱摄影网站 276

    11.6.1 案例分析 277

    11.6.2 视频操作 278

    第十二章 CSS与XML的综合应用

    12.1 XML基础 280

    12.1.1 XML的特点 280

    技能案例:创建XML页面 280

    12.1.2 XML与HTML 281

    技能案例:调用XML文件 282

    12.1.3 XML基本语法 283

    12.1.4 格式正确的XML文档 286

    12.2 XML与CSS的链接 287

    12.2.1 使用xml:stylesheet处理指令 287

    技能案例:使用CSS来格式化XML文档 287

    12.2.2 使用@import指令 289

    12.3 XML与CSS的应用 289

    12.3.1 显示学生信息XML文档 289

    技能案例:创建显示学生信息得XML文件 289

    12.3.2 XML文档实现隔行变色的表格 291

    技能案例:实现XML文件隔行变色信息表 291

    12.4 应用实例――在页面中调用XML数据 294

    12.4.1 设计分析 295

    12.4.2 制作步骤 295

    12.4.3 案例总结 300

    12.5 举一反三――制作企业网站 300

    12.5.1 案例分析 300

    12.5.2 视频操作 301

    第十三章 CSS与Ajax的综合应用

    13.1 了解Ajax 303

    13.1.1 Ajax简介 303

    13.1.2 Ajax的关键元素 304

    13.1.3 Ajax的优势 305

    13.1.4 实现Ajax的步骤 305

    13.1.5 使用CSS的必要性 306

    13.2 Ajax基础 307

    13.2.1 创建XMLHttpRequest对象 307

    技能案例:创建Ajax对象 307

    13.2.2 发出Ajax请求 308

    技能案例:添加表单并获取数据 308

    13.2.3 处理服务器响应 309

    技能案例:添加处理服务器响应的代码 309

    13.2.4 使用CSS样式 309

    技能案例:为案例添加CSS样式 309

    13.3 HTML 简介 310

    13.3.1 HTML 标签 310

    13.3.2 HTML 事件属性 311

    13.3.3 HTML 标准属性 313

    13.4 应用实例――使用Ajax实现页面特效 313

    13.4.1 设计分析 314

    13.4.2 制作步骤 314

    13.4.3 案例总结 322

    13.5 举一反三――通过Ajax实现可拖动Div块 322

    13.5.1 案例分析 322

    13.5.2 视频操作 323

    第十四章 综合商业案例

    14.1综合实例――制作游戏类网站 325

    14.1.1 设计分析 325

    14.1.2 制作步骤 325

    制作网页顶部导航栏 325

    制作网页的上半部分主体内容 327

    制作网页的下半部分主体内容 330

    制作网页底部信息 336

    14.1.3 案例总结 337

    14.2 综合实例――制作医疗保健类网站 337

    14.2.1 设计分析 337

    14.2.2 制作步骤 337

    制作网页顶部导航信息 337

    制作网页左半部分主体 342

    制作网页中间部分主体 342

    制作网页右半部分主体 345

    制作网页版底信息栏目 347

    14.2.3 案例总结 348
  • 内容简介:
    本书系统地介绍了CSS样式的基础理论和实际应用技术,并结合实例来介绍Div+CSS布局制作网页的方法和技巧。在实例的制作过程中介绍CSS样式设计各方面知识的同时,还结合实际网页制作中可能遇到的问题提供解决问题的思路、方法和技巧,使初学者也可以轻松地掌握Div+CSS布局的方式,制作出精美的网页。本书全面展现了运用Div+CSS进行网页设计布局的方法,详细的讲解步骤配合图示,使得每个步骤清晰易懂、一目了然。收中不但应用大量实例对重点难点进行深入的剖析,而且还结合作者多年的网页设计与教学经验进行点拨,使读者学以致用。并且在书中还穿插介绍了有关CSS和HTML的相关知识,立求使读者了解到*新的网页设计制作技术。本书内容丰富、结构清晰,注重思维锻炼与实践应用,适合初、中级网页设计爱好者以及希望学习Web标准对原有网站进行重构的网页设计者。本书配套资源包中还提供了书中所有实例源文件和相关视频教程,供读者学习和参考。
  • 作者简介:
    张晓景 畅销书作者,Adobe 专家委员会成员,Adobe 网页设计师认证讲师,Adobe UI设计工程师,国家信息产业部653工程讲师。 
    参与国家开放大学网页设计和网页界面设计课程体系开发。从事平面设计、网站设计和UI设计多年,参与开发过数十个多媒体商业网站。对UI设计风格有独特见解。有丰富的教学经验,为中国石油、中国铁路等大型企业做专业企业培训,曾在中国传媒大学、北京大学、北京师范大学、北京交通大学等重点院校以及Adobe创意大学和新东方等培训机构教授设计课程。 

  • 目录:
    第一章 网页和网站制作流程

    1.1 认识网页 2

    1.1.1 网页和网站 2

    1.1.2 网页的基本构成元素 2

    1.2 什么是网页设计 3

    1.2.1 网页设计概述 3

    1.2.2 网页设计和网页制作 4

    1.2.3 网页设计的特点 5

    1.2.4 网页制作相关术语 6

    1.3 网页设计中所涵盖的内容 11

    1.3.1 视听元素 11

    1.3.2 版式设计 11

    1.4 如何设计网页 12

    1.4.1 网页设计的基本原则 12

    1.4.2 网页设计成功的要素 13

    1.4.3 网页设计风格及色彩搭配 14

    1.5 网页设计的原则 14

    1.5.1 为用户考虑的原则 14

    1.5.2 主题突出原则 15

    1.5.3 整体原则 16

    1.5.4 内容与形式相统一 16

    1.5.5 更新和维护的原则 17

    1.6 网页设计师应具备的素质 17

    1.6.1 艺术素质 17

    16.2 技能素质 18

    1.6.3 综合素质 18

    1.7 网站的制作流程 19

    1.7.1 前期策划 19

    1.7.2 原型设计 20

    1.7.3 页面美化 21

    1.7.4 页面开发 22

    1.7.5 后期维护 22

    1.8 静态页面的制作流程 22

    1.8.1 观察设计稿 22

    1.8.2 拆分设计稿 23

    1.8.3 网页设计实现 23

    第二章 CSS样式入门

    2.1 CSS的基本概念 25

    2.1.1 CSS的特点 25

    2.1.2 CSS的基本语法 25

    2.1.3 CSS的冲突 26

    技能案例:使用就近原则 26

    2.2 网页设计中的CSS 28

    2.2.1 如何使用CSS 28

    2.2.2 CSS能做什么 29

    2.2.3 CSS不能做什么 30

    2.3 CSS的基本用法 30

    2.3.1 内联样式 30

    2.3.2 嵌入样式 30

    技能案例:设置嵌入样式 30

    2.3.3 外部样式 31

    2.4 CSS的单位和值 31

    2.4.1 定义颜色值 32

    2.4.2 定义字体 33

    2.5 CSS基础选择符 34

    2.5.1 通配选择符 34

    2.5.2 标签选择符 35

    2.5.3 id选择符 35

    2.5.4 类选择符 35

    技能案例:使用类选择符定义样式 36

    2.5.5 群组选择符 36

    2.5.6 基础选择符浏览器适配 36

    2.6 CSS的层次选择符 36

    2.6.1 后代选择符 37

    技能案例:使用后代选择符定义样式 37

    2.6.2 子选择符 37

    2.6.3 相邻兄弟选择符 37

    技能案例:使用相邻兄弟选择符设置样式 37

    2.6.4 通用兄弟选择符 38

    技能案例:使用通用兄弟选择符定义样式 38

    2.6.5 层次选择符浏览器适配 39

    2.7 伪类和伪元素 39

    2.7.1动态伪类选择符 39

    2.7.2 目标伪类选择符 40

    2.7.3 语言伪类选择器 40

    2.7.4 UI元素状态伪类选择器 40

    2.7.5 结构伪类选择器 41

    2.7.6 伪类选择符浏览器适配 42

    2.7.7 伪元素选择符 44

    2.8 应用案例――为页面添加CSS样式 45

    2.8.1 设计分析 45

    2.8.2 制作步骤 45

    2.8.3 案例总结 51

    2.9 举一反三――产品介绍网站 51

    2.9.1 案例分析 52

    2.9.2 视频操作 52

    第三章 使用DIV+CSS布局页面

    3.1 定义Div 55

    3.1.1 什么是Div 55

    3.1.2 插入Div 55

    3.1.3 Div的嵌套和固定格式 56

    3.2 CSS布局定位 57

    3.2.1 浮动定位 57

    3.2.2 position定位 60

    3.3 可视化盒模型 62

    3.3.1 盒子模型 62

    3.3.2 视觉可视化模型 64

    3.3.3 空白边叠加 64

    3.4 常见的网页布局方式 65

    3.4.1 居中布局设计 65

    3.4.2 浮动布局设计 66

    3.4.3 高度自适应 70

    3.5 盒模型的控制属性 70

    3.5.1 overflow 70

    技能案例:显示滚动条 71

    3.5.2 overflow-x 71

    技能案例:显示横向滚动条 71

    3.5.3 overflow-y 72

    技能案例:显示竖向滚动条 72

    3.6 应用案例――使用DIV+CSS布局页面 73

    3.6.1 设计分析 73

    3.6.2 制作步骤 73

    3.6.3 案例总结 78

    3.7 举一反三――制作健康网站 78

    3.7.1 案例分析 78

    3.7.2 视频操作 79

    第四章 使用CSS控制网页中的背景

    4.1 背景颜色 81

    4.1.1 设置页面背景颜色 81

    技能案例:添加背景颜色 81

    4.1.2 设置块背景颜色 82

    技能案例:添加块背景 82

    4.1.3 渐变背景 83

    技能案例:设置线性渐变背景 83

    技能案例:设置径向渐变背景 84

    4.2 背景图片 86

    4.2.1 为页面设置背景图片 86

    技能案例:设置背景图片 86

    4.2.2 背景图片的重复 87

    技能案例:设置背景图片的重复 87

    4.2.3 设置背景图片的位置 88

    技能案例:设置背景图片的位置 88

    4.2.4 设置背景滚动 90

    技能案例:设置页面背景滚动 90

    4.2.5 背景样式缩写的方式 90

    4.3 背景定位 91

    4.3.1 背景定位属性的语法 91

    4.3.2 背景定位属性的浏览器适配 91

    4.4 背景裁切 92

    4.4.1 背景裁切属性的语法 92

    4.4.2 背景裁切的浏览器适配 92

    4.5 背景大小 93

    4.5.1 背景大小属性的语法 93

    4.5.2 背景大小浏览器的适配 93

    4.6 多重背景图像 94

    4.6.1 多重背景图像属性的语法 94

    4.6.2 多重背景图像的浏览器适配 95

    4.6.3 CSS多背景属性的优势 95

    4.7 应用案例――制作金融类网站页面 96

    4.7.1 设计分析 96

    4.7.2 制作步骤 96

    4.7.3 案例总结 102

    4.8 举一反三――制作电子商品网站 102

    4.8.1 案例分析 103

    4.8.2 视频操作 103



    第五章 使用CSS控制页面文字样式

    5.1 控制文本样式 106

    5.1.1 文本字体和大小 106

    技能案例:设置网页中的文字字体 107

    5.1.2 文本颜色和粗细 110

    技能案例:设置网页中文字的颜色 110

    5.1.3 文本的3种样式 112

    技能案例:设置网页中文字的样式 112

    5.1.4 文本的美化方式 113

    技能案例:为网页中的文字设置下划线效果 113

    5.1.5 英文字母大小写 113

    5.2 控制段落样式 114

    5.2.1 段落水平对齐 114

    技能案例:设置文字左对齐、水平居中与右对齐 114

    5.2.2 段落垂直对齐 116

    技能案例:设置文本段落垂直对齐 116

    5.2.3 行间距和字间距 117

    5.2.4 首字下沉 118

    技能案例:设置网页中段落首字母下沉 118

    5.3 文字阴影及模糊 119

    5.3.1 文字阴影及模糊属性的语法 119

    技能案例:设置网页中文本的阴影 119

    5.3.2 文字阴影属性的浏览器适配 120

    5.4 文字溢出 120

    5.4.1 文字溢出属性的语法 121

    5.4.2 文字溢出属性浏览器的适配 121

    5.5 文字断开转行 121

    5.5.1 文字断开转行属性的语法 121

    5.5.2 文字转行属性的浏览器适配 122

    5.6 应用实例――设计类网站 122

    5.6.1 设计分析 123

    5.6.2 制作步骤 123

    5.6.3 案例总结 129

    5.7 举一反三――制作社区类网站 129

    5.7.1 案例分析 130

    5.7.2 视频操作 130



    第六章 使用CSS控制图片样式

    6.1图片样式 132

    6.1.1 图片边框设置 132

    技能案例:设置图片边框 132

    6.1.2 图片缩放设置 135

    技能案例:设置网页中图片的缩放 135

    6.2 图片对齐 137

    6.2.1 水平对齐设置 137

    技能案例:设置图片的水平对齐 137

    6.2.2 垂直对齐设置 138

    6.3 图文混排 139

    6.3.1 文本混排 140

    技能案例:设置网页中的图文混排 140

    6.3.2 设置混排间距 140

    6.4 图像边框 141

    6.4.1 图像边框属性的语法介绍 141

    6.4.1 图像边框的浏览器适配 141

    6.5 边框圆角 142

    6.5.1 边框圆角属性的语法 142

    6.5.2 4个子属性 143

    6.5.3 边框圆角属性的浏览器适配 144

    6.6 边框阴影 144

    6.6.1 边框阴影属性的语法 145

    6.6.2边框阴影浏览器的适配 145

    6.7 边框颜色 146

    6.7.1 边框颜色属性的语法 146

    6.7.2 边框颜色的浏览器适配 147

    6.8 应用实例――制作婚庆网站页面 147

    6.8.1 设计分析 147

    6.8.2 制作步骤 148

    6.8.3 案例总结 153

    6.9 举一反三――产品介绍网站 153

    6.9.1 案例分析 154

    6.9.2 视频操作 154

    第七章 使用CSS控制列表样式

    7.1 列表控制概述 155

    7.1.1 列表控制原则 155

    7.1.2 列表的类型及使用 155

    技能案例:使用uI制作无序列表 155

    技能案例:使用ol制作无序列表 156

    技能案例:使用dl制作列表 156

    7.1.3 改变项目样式 157

    技能案例:制作突出的列表样式 157

    7.1.4 图片符号 158

    技能案例:制作图片符号列表 158

    7.2 使用列表制作实用菜单 159

    7.2.1 无需表格的菜单 159

    技能案例:制作竖排菜单 159

    7.2.2 菜单的横竖转换 161

    技能案例:制作横排菜单 161

    技能案例:制作下拉菜单 162

    7.3 Opacity 164

    7.3.1 Opacity 语法 164

    技能案例:为图片设置透明度 164

    7.3.2 Opacity的浏览器适配 165

    7.4 CSS 颜色模式 165

    7.4.1 HSL colors语法 165

    技能案例:使用HSL颜色模式 165

    7.4.2 HSLA colors 语法 166

    技能案例:使用HSLA颜色模式 166

    7.4.3 RGBA colors语法 167

    技能案例:使用RGBA颜色模式 167

    7.4.4 HSL、HSLA和RGBA colors的浏览器适配 168

    7.5 应用实例――制作音乐网站 169

    7.5.1 设计分析 170

    7.5.2 制作步骤 170

    7.5.3 案例总结 174

    7.6 举一反三――制作设计工作室网站 174

    7.6.1 案例分析 174

    7.6.2 视频操作 175

    第八章 使用CSS控制表单样式

    8.1 表单设计概述 177

    8.1.1 表单的设计原则 177

    8.1.2 表单应用分类 178

    8.2 表单的设计 179

    8.2.1 表单和表单元素 179

    8.2.2 标签、字段集和图例 183

    技能案例:制作表单 183

    8.2.3 使用CSS控制文本字段 185

    技能案例:使用CSS样式更改表单外观 185

    8.2.4 使用CSS控制复选框与单选框 185

    技能案例:使用CSS样式更改表单外观2 186

    8.2.5 使用CSS控制列表与跳转菜单 186

    技能案例:使用CSS样式更改表单外观3 186

    8.3 应用实例――制作用户注册页面 187

    8.3.1 设计分析 187

    8.3.2 制作步骤 187

    8.3.3 案例总结 195

    8.4 举一反三――制作用户登录页面 195

    8.4.1 案例分析 196

    8.4.2 视频操作 196

    第九章 使用CSS美化浏览器效果

    9.1 使用CSS控制超链接 199

    9.1.1 认识超链接 199

    9.1.2 关于链接路径 200

    9.1.3 超链接属性控制 202

    技能案例:设置超链接属性 203

    9.1.4 伪元素的内容控制属性 205

    技能案例:使用content属性 206

    9.1.5 图像映射 206

    技能案例:设置热点链接 206

    9.1.6 链接的打开方式 208

    9.2 超链接特效 208

    9.2.1 按钮式超链接 208

    技能案例:制作按钮式超链接 208

    9.2.2 浮雕式超链接 209

    技能案例:制作浮雕式超链接 209

    9.3 鼠标特效 210

    9.3.1 CSS控制鼠标箭头 210

    9.3.2 鼠标变化的超链接 211

    技能案例:设置超链接的鼠标变化 211

    9.4 box-sizing 212

    9.4.1 box-sizing属性语法 212

    9.4.2 box-sizing的浏览器适配 212

    技能案例:为边框添加阴影 213

    9.5 resize 213

    9.5.1 resize属性 213

    9.5.2 resize的浏览器适配 214

    9.6 outline 214

    9.6.1 outline属性语法 214

    9.6.2 outline的浏览器适配 215

    9.7 nav-index 216

    9.7.1 nav-index属性语法 216

    9.7.2 nav-index的浏览器适配 216

    9.8 应用实例――制作产品宣传网站页面 216

    9.8.1 设计分析 217

    9.8.2 制作步骤 217

    9.8.3 案例总结 225

    9.9 举一反三――制作运输公司网站页面 225

    9.9.1 案例分析 225

    9.9.2 视频操作 226

    第十章 使用CSS控制变形动画效果

    10.1 CSS变形属性简介 228

    10.1.1 变形属性与函数 228

    10.1.2 变形属性的浏览器适配 228

    10.2 网页元素的2D变形效果 230

    10.2.1 旋转变形 230

    技能案例:实现元素的旋转效果 230

    10.2.2 缩放和翻转变形 231

    技能案例:实现元素的缩放效果 231

    10.2.3 移动变形 232

    技能案例:实现元素的缩放效果 232

    10.2.4 倾斜变形 233

    技能案例:实现网页元素的倾斜效果 234

    10.2.5 矩阵变形 235

    10.2.6 定义变形的中心点 235

    10.2.7 同时使用多个变形函数 236

    10.3 网页元素3D变形效果 236

    10.3.1 3D位移变形 236

    技能案例:实现网页元素的3D位移效果 237

    10.3.2 3D旋转变形 238

    技能案例:实现网页元素的3D旋转效果 238

    10.3.3 3D缩放变形 240

    技能案例:实现网页元素的3D缩放效果 240

    10.3.4 3D矩阵变形 241

    10.4 CSS过渡效果 242

    10.4.1 过渡属性简介 242

    10.4.2 如何创建过度动画 242

    10.4.3 实现过渡效果 243

    10.4.4 设置过渡时间 243

    10.5 应用实例――网页元素变形过渡效果 244

    10.5.1 设计分析 244

    10.5.2 制作步骤 244

    10.5.3 案例总结 247

    10.6 举一反三――制作关键帧动画效果 247

    10.6.1 案例分析 247

    10.6.2 视频操作 248



    第十一章 CSS与JavaScript的综合应用

    11.1 什么是JavaScript 250

    11.1.1 了解JavaScript 250

    技能案例:在页面中嵌入JavaScript代码 251

    11.1.2 JavaScript的特点 252

    11.1.3 JavaScript的应用范围 253

    11.1.4 CSS样式与JavaScript 255

    11.2 JavaScript的语法基础 255

    11.2.1 JavaScript的基本架构 255

    技能案例:使用JavaScript实现弹出提示框 256

    11.2.2 JavaScript的基本语法 256

    11.2.3 数据类型和变量 259

    11.2.4 表达式和运算符 260

    11.2.5 基本语句 260

    技能案例:使用if语句 261

    技能案例:使用for语句 261

    11.3 JQuery 262

    11.3.1 JQuery Mobile 262

    11.3.2 JQuery UI 263

    技能案例:创建jQuery UI组件 264

    11.4 其他JavaScript框架 264

    11.4.1 Raect 264

    11.4.2 Vue 265

    11.4.3 Angular 265

    11.5 应用实例――在网页中应用交互效果 266

    11.5.1 设计分析 267

    11.5.2 制作步骤 267

    11.5.3 案例总结 276

    11.6 举一反三――制作婚纱摄影网站 276

    11.6.1 案例分析 277

    11.6.2 视频操作 278

    第十二章 CSS与XML的综合应用

    12.1 XML基础 280

    12.1.1 XML的特点 280

    技能案例:创建XML页面 280

    12.1.2 XML与HTML 281

    技能案例:调用XML文件 282

    12.1.3 XML基本语法 283

    12.1.4 格式正确的XML文档 286

    12.2 XML与CSS的链接 287

    12.2.1 使用xml:stylesheet处理指令 287

    技能案例:使用CSS来格式化XML文档 287

    12.2.2 使用@import指令 289

    12.3 XML与CSS的应用 289

    12.3.1 显示学生信息XML文档 289

    技能案例:创建显示学生信息得XML文件 289

    12.3.2 XML文档实现隔行变色的表格 291

    技能案例:实现XML文件隔行变色信息表 291

    12.4 应用实例――在页面中调用XML数据 294

    12.4.1 设计分析 295

    12.4.2 制作步骤 295

    12.4.3 案例总结 300

    12.5 举一反三――制作企业网站 300

    12.5.1 案例分析 300

    12.5.2 视频操作 301

    第十三章 CSS与Ajax的综合应用

    13.1 了解Ajax 303

    13.1.1 Ajax简介 303

    13.1.2 Ajax的关键元素 304

    13.1.3 Ajax的优势 305

    13.1.4 实现Ajax的步骤 305

    13.1.5 使用CSS的必要性 306

    13.2 Ajax基础 307

    13.2.1 创建XMLHttpRequest对象 307

    技能案例:创建Ajax对象 307

    13.2.2 发出Ajax请求 308

    技能案例:添加表单并获取数据 308

    13.2.3 处理服务器响应 309

    技能案例:添加处理服务器响应的代码 309

    13.2.4 使用CSS样式 309

    技能案例:为案例添加CSS样式 309

    13.3 HTML 简介 310

    13.3.1 HTML 标签 310

    13.3.2 HTML 事件属性 311

    13.3.3 HTML 标准属性 313

    13.4 应用实例――使用Ajax实现页面特效 313

    13.4.1 设计分析 314

    13.4.2 制作步骤 314

    13.4.3 案例总结 322

    13.5 举一反三――通过Ajax实现可拖动Div块 322

    13.5.1 案例分析 322

    13.5.2 视频操作 323

    第十四章 综合商业案例

    14.1综合实例――制作游戏类网站 325

    14.1.1 设计分析 325

    14.1.2 制作步骤 325

    制作网页顶部导航栏 325

    制作网页的上半部分主体内容 327

    制作网页的下半部分主体内容 330

    制作网页底部信息 336

    14.1.3 案例总结 337

    14.2 综合实例――制作医疗保健类网站 337

    14.2.1 设计分析 337

    14.2.2 制作步骤 337

    制作网页顶部导航信息 337

    制作网页左半部分主体 342

    制作网页中间部分主体 342

    制作网页右半部分主体 345

    制作网页版底信息栏目 347

    14.2.3 案例总结 348
查看详情
相关图书 / 更多
Div+CSS3.0网页布局案例精粹(升级版)
Discrete Mathematics
陈明
Div+CSS3.0网页布局案例精粹(升级版)
Digitale Depression 数字抑郁时代:新媒体如何改变我们对幸福的感知
张 骥 后浪 译 者;[德]萨拉·迪芬巴赫 丹尼尔·乌尔里希
Div+CSS3.0网页布局案例精粹(升级版)
Dirichlet除数问题(精)/现代数学中的著名定理纵横谈丛书
王梓坤 著;刘培杰数学工作室 编
Div+CSS3.0网页布局案例精粹(升级版)
Digital Guided Micro Prosthodontics 数字引导的显微修复(英文版)
于海洋 著
Div+CSS3.0网页布局案例精粹(升级版)
Dido等周问题(精)/现代数学中的著名定理纵横谈丛书
王梓坤 著;刘培杰数学工作室 编
Div+CSS3.0网页布局案例精粹(升级版)
Digital Photography Essentials
Ang, Tom
Div+CSS3.0网页布局案例精粹(升级版)
DirtonMyShirt
Steve Bjorkman 著;Jeff Foxworthy、Steve Bjorkman 绘
Div+CSS3.0网页布局案例精粹(升级版)
Diibee4.0富媒体工具实例教程
张文忠;孙晓翠
Div+CSS3.0网页布局案例精粹(升级版)
DiscreteMathematics:TheoryandApplications(RevisedEdition)
Malik Sen 著
Div+CSS3.0网页布局案例精粹(升级版)
Disaster Risk Science
史培军
Div+CSS3.0网页布局案例精粹(升级版)
Differential and Difference Equations(差分与微分方程)(李艳秋)
江舜君 编著;李艳秋;郑冬梅
Div+CSS3.0网页布局案例精粹(升级版)
Discovery Education探索·科学百科. 中阶. 3级. A3,长城
[澳]库珀 著;邱辛欣 译