CSS3网页样式与布局案例课堂

副标题:无

作   者:刘玉红

分类号:

ISBN:9787302477747

微信扫一扫,移动浏览光盘

简介


本书以零基础讲解为宗旨,用实例引导读者深入学习,采取【基础入门→核心技术→网页布局→高级技能→综合案例】的讲解模式,深入浅出地讲解CSS3的各项技术及实战技能。

本书第1篇主要讲解CSS样式入门、CSS3样式的基本语法、CSS3的高级特性等;第2篇主要讲解控制网页字体与段落样式、控制网页图片样式、控制网页背景与边框样式、美化网页超链接和鼠标、控制表格和表单样式、控制列表和菜单样式、使用滤镜美化网页元素等;第3篇主要讲解CSS定位与DIV布局核心技术、CSS DIV盒子的浮动与定位、固定宽度网页布局剖析与制作、自动缩放网页布局剖析与制作等;第4篇主要讲解过渡和动画效果、2D和3D变幻效果、创建响应式页面等;第5篇主要讲解设计商业门户类网页、设计在线购物类网页、设计企业门户类网页、设计娱乐休闲类网页、设计图像影音类网页。

本书适合任何想学习CSS网页设计与布局的人员,无论您是否从事计算机相关行业,无论您是否接触过CSS3,通过学习均可快速掌握CSS3的设计方法和技巧。


目录


目 录

第1篇 基 础 入 门

第1章 CSS样式入门 3

1.1 认识CSS 4

1.1.1CSS的功能 4

1.1.2浏览器与CSS 4

1.1.3CSS的发展历史 5

1.2CSS常用单位 5

1.2.1颜色单位 5

1.2.2长度单位 9

1.3 编辑和浏览CSS 10

1.3.1手工编写CSS 10

1.3.2使用Dreamweaver编写CSS 11

1.4 在HTML中调用CSS的方法 13

1.4.1行内样式 13

1.4.2内嵌样式 14

1.4.3链接样式 15

1.4.4导入样式 16

1.5 调用方法的优先级 17

1.5.1行内样式和内嵌样式的比较 18

1.5.2内嵌样式和链接样式的比较 18

1.5.3链接样式和导入样式的比较 19

1.6 综合案例——制作产品销售统计表 20

1.7 大神解惑 22

1.8 跟我练练手 22

第2章 CSS3样式的基本语法 23

2.1CSS基础语法 24

2.1.1CSS构造规则 24

2.1.2CSS的注释 24

2.2CSS的常用选择器 25

2.2.1标签选择器 25

2.2.2类选择器 26

2.2.3ID选择器 27

2.2.4选择器的声明 27

2.3 综合案例——制作炫彩网站Logo 28

2.4 大神解惑 31

2.5 跟我练练手 31

第3章 CSS3的高级特性 33

3.1 复合选择器 34

3.1.1全局选择器 34

3.1.2交集选择器 35

3.1.3并集选择器 35

3.1.4继承选择器 36

3.2CSS3新增的选择器 37

3.2.1属性选择器 37

3.2.2结构伪类选择器 39

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

3.2.4伪类选择器 42

3.3CSS的继承特性 43

3.3.1继承关系 43

3.3.2CSS继承的运用 44

3.4CSS的层叠特性 45

3.4.1同一选择器被多次定义的

处理 45

3.4.2同一标签运用不同类型选择器

的处理 46

3.5 综合案例——制作新闻菜单 47

3.6 大神解惑 49

3.7 跟我练练手 50

第II篇 核 心 技 术

第4章 使用CSS3控制网页字体

与段落样式 53

4.1 通过CSS控制字体样式 54

4.1.1控制字体类型 54

4.1.2定义字体大小 55

4.1.3定义字体风格 56

4.1.4控制文字的粗细 57

4.1.5将小写字母转换为大写字母 58

4.1.6设置字体的复合属性 59

4.1.7定义文字的颜色 59

4.2CSS3中新增的文本高级样式 61

4.2.1添加文本的阴影效果 61

4.2.2设置文本溢出效果 62

4.2.3控制文本的换行 63

4.2.4设置字体尺寸 64

4.3 通过CSS控制文本间距与对齐方式 65

4.3.1设置单词之间的间隔 65

4.3.2设置字符之间的间隔 66

4.3.3为文本添加下划线、上划线、

删除线 67

4.3.4设置垂直对齐方式 68

4.3.5转换文本的大小写 69

4.3.6设置文本的水平对齐方式 70

4.3.7设置文本的缩进效果 72

4.3.8设置文本的行高 73

4.3.9文本的空白处理 74

4.3.10文本的反排 75

4.4 综合案例1——设置网页标题 76

4.5 综合案例2——制作新闻页面 78

4.6 大神解惑 79

4.7 跟我练练手 80

第5章 使用CSS控制网页图片样式 81

5.1 图片缩放 82

5.1.1通过描述标记width和height

缩放图片 82

5.1.2使用CSS3中的max-width和

max-height缩放图片 82

5.1.3使用CSS3中的width和height

缩放图片 83

5.2 设置图片的对齐方式 84

5.2.1设置图片横向对齐 84

5.2.2设置图片纵向对齐 85

5.3 图文混排 87

5.3.1设置文字环绕效果 87

5.3.2设置图片与文字的间距 88

5.4 综合案例1——制作学校宣传单 90

5.5 综合案例2——制作简单图文混排

网页 92

5.6 大神解惑 94

5.7 跟我练练手 94

第6章 使用CSS控制网页背景

与边框样式 95

6.1 使用CSS控制网页背景 96

6.1.1设置背景颜色 96

6.1.2设置背景图片 97

6.1.3背景图片重复 98

6.1.4背景图片显示 100

6.1.5背景图片位置 101

6.2CSS3中新增控制网页背景属性 102

6.2.1背景图片大小 102

6.2.2背景显示区域 104

6.2.3背景图片裁剪区域 105

6.2.4背景复合属性 107

6.3 使用CSS控制边框样式 108

6.3.1设置边框样式 108

6.3.2设置边框颜色 109

6.3.3设置边框线宽 110

6.3.4设置边框复合属性 112

6.4CSS3中新增边框圆角效果 113

6.4.1设置圆角边框 113

6.4.2指定两个圆角半径 114

6.4.3绘制4个不同圆角边框 115

6.4.4绘制不同种类的边框 117

6.5CSS3中的渐变效果 119

6.5.1线性渐变效果 119

6.5.2径向渐变效果 121

6.6 综合案例1——制作简单公司主页 122

6.7 综合案例2——制作简单生活资讯

主页 126

6.8 大神解惑 127

6.9 跟我练练手 128

第7章 使用CSS3美化网页浏览

效果 129

7.1 使用CSS3美化超链接 130

7.1.1改变超级链接基本样式 130

7.1.2设置带有提示信息的超级

链接 131

7.1.3设置超级链接的背景图 132

7.1.4设置超级链接的按钮效果 133

7.2 使用CSS3美化鼠标特效 134

7.2.1使用CSS3控制鼠标箭头 134

7.2.2设置鼠标变幻式超链接 135

7.2.3设置网页页面滚动条 136

7.3 综合案例1——图片版本超级链接 138

7.4 综合案例2——鼠标特效 140

7.5 综合案例3——制作一个简单的

导航栏 142

7.6 大神解惑 144

7.7 跟我练练手 144

第8章 使用CSS控制表格

和表单样式 145

8.1 美化表格样式 146

8.1.1设置表格边框样式 146

8.1.2设置表格边框宽度 148

8.1.3设置表格边框颜色 149

8.2 美化表单样式 150

8.2.1美化表单中的元素 150

8.2.2美化提交按钮 152

8.2.3美化下拉菜单 153

8.3 综合案例1——制作用户登录页面 155

8.4 综合案例2——制作用户注册页面 156

8.5 大神解惑 159

8.6 跟我练练手 159

第9章 控制列表和菜单样式 161

9.1美化项目列表的样式 162

9.1.1美化无序列表 162

9.1.2美化有序列表 163

9.1.3美化自定义列表 165

9.1.4制作图片列表 166

9.1.5缩进图片列表 167

9.1.6列表复合属性 168

9.2 使用CSS制作网页菜单 169

9.2.1制作无须表格的菜单 169

9.2.2制作水平和垂直菜单 171

9.3 综合案例1——模拟soso导航栏 173

9.4 综合案例2——将段落转变成列表 177

9.5 大神解惑 178

9.6 跟我练练手 178

第10章 使用滤镜美化网页元素 179

10.1滤镜概述 180

10.2设置基本滤镜效果 181

10.2.1高斯模糊滤镜 181

10.2.2明暗度滤镜 182

10.2.3对比度滤镜 183

10.2.4阴影滤镜 184

10.2.5灰度滤镜 185

10.2.6反相滤镜 186

10.2.7透明度滤镜 187

10.2.8饱和度滤镜 188

10.2.9深褐色滤镜 189

10.3使用复合滤镜效果 190

10.4大神解惑 191

10.5跟我练练手 192

第III篇 网 页 布 局

第11章 CSS定位与DIV布局核心

技术 195

11.1了解块级元素和行内级元素 196

11.1.1块级元素和行内级元素的

应用 196

11.1.2div元素和span元素的区别 198

11.2盒子模型 198

11.2.1盒子模型的概念 198

11.2.2定义网页border区域 199

11.2.3定义网页padding区域 200

11.2.4定义网页margin区域 201

11.3弹性盒模型 204

11.3.1定义盒子布局方向 205

11.3.2定义盒子布局顺序 206

11.3.3定义盒子布局位置 208

11.3.4定义盒子弹性空间 209

11.3.5管理盒子空间 211

11.3.6盒子空间的溢出管理 213

11.4综合案例1——图文排版效果 214

11.5综合案例2——淘宝导购菜单 217

11.6大神解惑 219

11.7跟我练练手 220

第12章 CSS DIV盒子的浮动

与定位 221

12.1定义DIV 222

12.1.1什么是DIV 222

12.1.2创建DIV 222

12.2盒子的定位 223

12.2.1静态定位 223

12.2.2相对定位 224

12.2.3*定位 225

12.2.4固定定位 226

12.2.5盒子的浮动 227

12.3其他CSS布局定位方式 229

12.3.1溢出定位 229

12.3.2隐藏定位 231

12.3.3z-index空间定位 233

12.4新增CSS3多列布局 234

12.4.1设置列宽度 234

12.4.2设置列数 236

12.4.3设置列间距 237

12.4.4设置列边框样式 238

12.5综合案例1——定位网页布局样式 240

12.6综合案例2——制作阴影文字效果 243

12.7大神解惑 244

12.8跟我练练手 244

第13章 固定宽度网页布局剖析

与制作 245

13.1CSS排版观念 246

13.1.1将页面用div分块 246

13.1.2设置各块位置 246

13.1.3用CSS定位 247

13.2固定宽度网页剖析与布局 250

13.2.1网页单列布局模式 250

13.2.2网页1-2-1型布局模式 254

13.2.3网页1-3-1型布局模式 258

13.3大神解惑 261

13.4跟我练练手 262

第14章 自动缩放网页布局剖析

与制作 263

14.1自动缩放网页1-2-1型布局模式 264

14.1.1“1-2-1”等比例变宽布局 264

14.1.2“1-2-1”单列变宽布局 265

14.2自动缩放网页1-3-1型布局模式 266

14.2.1“1-3-1”三列宽度等比例

布局 266

14.2.2“1-3-1”单侧列宽度固定的

变宽布局 266

14.2.3“1-3-1”中间列宽度固定的

变宽布局 270

14.2.4“1-3-1”双侧列宽度固定的

变宽布局 273

14.2.5“1-3-1”中列和左侧列宽度

固定的变宽布局 277

14.3分列布局背景色的使用 280

14.3.1设置固定宽度布局的列

背景色 280

14.3.2设置特殊宽度变化布局的列

背景色 282

14.4综合案例1——单列宽度变化布局 284

14.5综合案例2——多列等比例宽度变化

布局 285

14.6大神解惑 288

14.7跟我练练手 288

第IV篇 高 级 技 能

第15章 过渡和动画效果 291

15.1了解过渡效果 292

15.2添加过渡效果 292

15.3了解动画效果 295

15.4添加动画效果 296

15.5大神解惑 297

15.6跟我练练手 298

第16章 2D和3D效果 299

16.1了解2D转换效果 300

16.2添加2D转换效果 300

16.2.1添加2D移动效果 300

16.2.2添加2D旋转效果 301

16.2.3添加2D缩放效果 302

16.2.4添加2D倾斜效果 303

16.2.5添加综合变幻效果 304

16.3添加3D转换效果 305

16.4大神解惑 308

16.5跟我练练手 308

第17章 创建响应式页面 309

17.1了解弹性盒子 310

17.2使用弹性盒子 310

17.3设置弹性子元素的位置 313

17.4设置弹性子元素的横向对齐方式 314

17.5设置弹性子元素的纵向对齐方式 319

17.6设置弹性子元素的换行方式 321

17.7综合案例——使用弹性盒子创建

响应式页面 323

17.8大神解惑 325

17.9跟我练练手 326

第V篇 综 合 案 例

第18章 商业门户类网站赏析 329

18.1整体设计 330

18.1.1颜色应用分析 330

18.1.2架构布局分析 331

18.2主要模块设计 331

18.2.1网页整体样式插入 331

18.2.2网页局部样式 333

18.2.3顶部模块样式代码分析 340

18.2.4中间主体代码分析 341

18.2.5底部模块分析 344

18.3网站调整 345

18.3.1部分内容调整 345

18.3.2模块调整 345

18.3.3调整后预览测试 347

第19章 设计在线购物类网页 349

19.1整体布局 350

19.1.1设计分析 350

19.1.2排版架构 350

19.2主要模块设计 351

19.2.1Logo与导航区 351

19.2.2Banner与资讯区 353

19.2.3产品类别区域 354

19.2.4页脚区域 355

第20章 设计企业门户类网页 357

20.1构思布局 358

20.1.1设计分析 358

20.1.2排版架构 358

20.2主要模块设计 359

20.2.1Logo与导航菜单 359

20.2.2Banner区 360

20.2.3资讯区 361

20.2.4版权信息 363

第21章 设计娱乐休闲类网页 365

21.1整体设计 366

21.1.1应用设计分析 366

21.1.2架构布局分析 367

21.2主要模块设计 368

21.2.1网页整体样式插入 368

21.2.2顶部模块代码分析 369

21.2.3视频模块代码分析 370

21.2.4评论模块代码分析 371

21.2.5热门推荐模块代码分析 373

21.2.6底部模块分析 375

21.3网页调整 376

21.3.1部分内容调整 376

21.3.2调整后预览测试 377

第22章 设计图像影音类网页 379

22.1整体设计 380

22.1.1颜色应用分析 380

22.1.2架构布局分析 381

22.2主要模块设计 382

22.2.1样式代码分析 382

22.2.2顶部模块样式代码分析 386

22.2.3网站主体模块代码分析 387

22.2.4底部模块分析 391

22.3网站调整 392

22.3.1部分内容调整 392

22.3.2模块调整 392

22.3.3调整后预览测试 395


已确认勘误

次印刷

页码 勘误内容 提交人 修订印次

CSS3网页样式与布局案例课堂
    • 名称
    • 类型
    • 大小

    光盘服务联系方式: 020-38250260    客服QQ:4006604884

    意见反馈

    14:15

    关闭

    云图客服:

    尊敬的用户,您好!您有任何提议或者建议都可以在此提出来,我们会谦虚地接受任何意见。

    或者您是想咨询:

    用户发送的提问,这种方式就需要有位在线客服来回答用户的问题,这种 就属于对话式的,问题是这种提问是否需要用户登录才能提问

    Video Player
    ×
    Audio Player
    ×
    pdf Player
    ×
    Current View

    看过该图书的还喜欢

    some pictures

    解忧杂货店

    东野圭吾 (作者), 李盈春 (译者)

    亲爱的云图用户,
    光盘内的文件都可以直接点击浏览哦

    无需下载,在线查阅资料!

    loading icon