CSS3+DIV网页样式与布局案例课堂2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载

CSS3+DIV网页样式与布局案例课堂PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第Ⅰ篇 基础知识3

第1章 网页设计的必备技能3

1.1认识网页和网站4

1.1.1什么是网页4

1.1.2什么是网站4

1.2网页中需要包含的要素5

1.2.1需要HTML文件5

1.2.2需要DIV层5

1.2.3需要CSS定义网页样式6

1.2.4需要JavaScript设置网页动画6

1.2.5需要域名与服务器空间7

1.3一个简单网页的基本构成7

1.3.1 Head部分8

1.3.2 Body部分8

1.3.3注释部分8

1.4设计网页的总体流程9

1.4.1网页规划9

1.4.2搜集资料9

1.4.3设计网页的总体效果10

1.4.4制作网页素材文件11

1.4.5搭建网页DIV层12

1.4.6使用CSS与JavaScript12

1.4.7测试网页13

1.5网站的种类与网页布局方式14

1.5.1网站的种类14

1.5.2网页布局方式15

1.6在Photoshop中构建网页结构16

1.7大神解惑18

1.8跟我练练手18

第2章 CSS样式入门19

2.1认识CSS20

2.1.1 CSS功能20

2.1.2浏览器与CSS20

2.1.3 CSS发展历史21

2.2 CSS常用单位21

2.2.1颜色单位21

2.2.2长度单位25

2.3编辑 和浏览CSS26

2.3.1案例1——手工编写CSS26

2.3.2案例2——使用Dreamweaver编写CSS27

2.4在HTML中调用CSS的方法28

2.4.1案例3——行内样式28

2.4.2案例4——内嵌样式29

2.4.3案例5——链接样式31

2.4.4案例6——导入样式32

2.5调用CSS方法的优先级问题33

2.5.1案例7——行内样式和内嵌样式比较33

2.5.2案例8——内嵌样式和链接样式比较34

2.5.3案例9——链接样式和导入样式比较34

2.6综合案例——制作产品销售统计表35

2.7大神解惑37

2.8跟我练练手37

第3章 CSS3样式的基本语法39

3.1 CSS基本语法40

3.1.1 CSS构造规则40

3.1.2 CSS的注释40

3.2 CSS的常用选择器40

3.2.1案例1——标签选择器41

3.2.2案例2——类选择器41

3.2.3案例3——ID选择器42

3.2.4案例4——选择器的声明43

3.3综合案例——制作炫彩网站Logo44

3.4大神解惑46

3.5跟我练练手47

第Ⅱ篇 核心技术51

第4章 设计网页字体与段落样式51

4.1美化字体样式52

4.1.1案例1——控制字体类型52

4.1.2案例2——定义字体大小53

4.1.3案例3——定义字体风格54

4.1.4案例4——控制文字的粗细55

4.1.5案例5——将小写字母转为大写字母56

4.1.6案例6——设置字体的复合属性57

4.1.7案例7——定义文字的颜色58

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

4.2.1案例8——添加文本的阴影效果59

4.2.2案例9——设置文本溢出效果60

4.2.3案例10——控制文本的换行62

4.2.4案例11——设置字体尺寸63

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

4.3.1案例12——设置单词之间的间隔64

4.3.2案例13——设置字符之间的间隔65

4.3.3案例14——为文本添加下画线、上画线、删除线66

4.3.4案例15——设置垂直对齐方式66

4.3.5案例16——转换文本的大小写68

4.3.6案例17——设置文本的水平对齐方式69

4.3.7案例18——设置文本的缩进效果71

4.3.8案例19——设置文本的行高71

4.3.9案例20——文本的空白处理72

4.3.10案例21——文本的反排73

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

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

4.6大神解惑77

4.7跟我练练手78

第5章 设计网页图片样式79

5.1图片缩放80

5.1.1案例1——通过描述标记width和height缩放图片80

5.1.2案例2——使用CSS3中的max-width和max-height缩放图片80

5.1.3案例3——使用CSS3中的width和height缩放图片81

5.2设置图片的对齐方式82

5.2.1案例4——设置图片横向对齐82

5.2.2案例5——设置图片纵向对齐83

5.3图文混排84

5.3.1案例6——设置文字环绕效果84

5.3.2案例7——设置图片与文字的间距85

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

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

5.6大神解惑90

5.7跟我练练手90

第6章 设计网页背景与边框样式91

6.1设计网页背景样式92

6.1.1案例1——设置背景颜色92

6.1.2案例2——设置背景图片93

6.1.3案例3——背景图片重复94

6.1.4案例4——背景图片显示95

6.1.5案例5——设置背景图片位置97

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

6.2.1案例6——设置背景图片大小99

6.2.2案例7——设置背景显示区域100

6.2.3案例8——设置背景图像裁剪区域102

6.2.4案例9——设置背景的复合属性103

6.3设计边框样式104

6.3.1案例10——设置边框样式104

6.3.2案例11——设置边框颜色106

6.3.3案例12——设置边框线宽107

6.3.4案例13——设置边框的复合属性109

6.4 CSS3中新增的边框圆角效果110

6.4.1案例14——设置圆角边框110

6.4.2案例15——指定两个圆角半径111

6.4.3案例16——绘制四个不同圆角边框112

6.4.4案例17——绘制不同种类的边框114

6.5 CSS3中的渐变效果115

6.5.1案例18——线性渐变效果116

6.5.2案例19——径向渐变效果118

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

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

6.8大神解惑124

6.9 跟我练练手124

第7章 设计网页超级链接和鼠标样式125

7.1使用CSS3美化超链接126

7.1.1案例1——改变超级链接基本样式126

7.1.2案例2——设置带有提示信息的超级链接127

7.1.3案例3——设置超级链接的背景图128

7.1.4案例4——设置超级链接的按钮效果129

7.2使用CSS3美化鼠标130

7.2.1案例5——使用CSS3控制鼠标箭头130

7.2.2案例6——设置鼠标变幻式超链接132

7.2.3案例7——设置网页页面滚动条133

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

7.4综合案例2——关于鼠标特效案例136

7.5综合案例3——制作一个简单的导航栏139

7.6大神解惑140

7.7跟我练练手141

第8章 设计表格和表单样式143

8.1美化表格样式144

8.1.1案例1——设置表格边框样式144

8.1.2案例2——设置表格边框宽度146

8.1.3案例3——设置表格边框颜色147

8.2美化表单样式148

8.2.1案例4——美化表单中的元素148

8.2.2案例5——美化提交按钮150

8.2.3案例6——美化下拉菜单151

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

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

8.5大神解惑157

8.6跟我练练手158

第9章 设计列表和菜单样式159

9.1美化项目列表的样式160

9.1.1案例1——美化无序列表160

9.1.2案例2——美化有序列表161

9.1.3案例3——美化自定义列表163

9.1.4案例4——制作图片列表164

9.1.5案例5——缩进图片列表165

9.1.6案例6——列表复合属性166

9.2使用CSS制作网页菜单168

9.2.1案例7——制作动态导航菜单168

9.2.2案例8——制作水平和垂直菜单170

9.3综合案例1——模拟SOSO导航栏172

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

9.5大神解惑177

9.6跟我练练手177

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

10.1滤镜概述180

10.2设置基本滤镜效果181

10.2.1案例1——高斯模糊（blur）滤镜181

10.2.2案例2——明暗度（brightness）滤镜182

10.2.3案例3——对比度（contrast）滤镜183

10.2.4案例4——阴影（drop-shadow）滤镜184

10.2.5案例5——灰度（grayscale）滤镜185

10.2.6案例6——反相（invert）滤镜186

10.2.7案例7——透明度（opacity）滤镜187

10.2.8案例8——饱和度（saturate）滤镜188

10.2.9案例9——深褐色（sepia）滤镜189

10.3使用复合滤镜效果190

10.4大神解惑191

10.5跟我练练手191

第Ⅲ篇 高级应用195

第11章 CSS3的高级特性195

11.1复合选择器196

11.1.1案例1——全局选择器196

11.1.2案例2——交集选择器197

11.1.3案例3——并集选择器197

11.1.4案例4——继承（后代）选择器198

11.2 CSS3新增的选择器199

11.2.1案例5——属性选择器199

11.2.2案例6——结构伪类选择器201

11.2.3案例7——UI元素状态伪类选择器202

11.2.4案例8——伪类选择器204

11.3 CSS3的继承特性205

11.3.1案例9——继承关系205

11.3.2案例10——CSS继承的运用206

11.4 CSS3的层叠特性207

11.4.1案例11——同一选择器被多次定义的处理207

11.4.2案例12——同一标签运用不同类型选择器的处理208

11.5综合案例——制作新闻菜单209

11.6大神解惑212

11.7跟我练练手212

第12章 过渡和动画效果213

12.1认识过渡效果214

12.2案例1——添加过渡效果214

12.3了解动画效果217

12.4案例2——添加动画效果218

12.5大神解惑219

12.6跟我练练手220

第13章 2D和3D变幻效果221

13.1认识2D转换效果222

13.2添加2D转换效果222

13.2.1案例1——添加移动效果222

13.2.2案例2——添加旋转效果223

13.2.3案例3——添加缩放效果224

13.2.4案例4——添加倾斜效果225

13.2.5案例5——添加综合变幻效果227

13.3添加3D转换效果228

13.4大神解惑230

13.5跟我练练手230

第14章 CSS3和JavaScript的搭配应用231

14.1 JavaScript语法基础232

14.1.1什么是JavaScript232

14.1.2数据类型232

14.1.3变量234

14.1.4案例1——运算符的简单应用234

14.1.5案例2——流程控制语句的简单应用237

14.1.6案例3——函数的简单应用240

14.2常见的JavaScript编写工具243

14.2.1记事本编写工具243

14.2.2 Dreamweaver编写工具244

14.3 JavaScript在HTML中的使用244

14.3.1案例4——在HTML网页头中嵌入JavaScript代码245

14.3.2案例5——在HTML网页中嵌入JavaScript代码246

14.3.3案例6——在HTML网页的元素事件中嵌入JavaScript代码247

14.3.4案例7——在HTML中调用已经存在的JavaScript文件248

14.3.5案例8——通过JavaScript伪URL引入JavaScript脚本代码249

14.4 JavaScript与CSS3的结合使用250

14.4.1案例9——设置动态内容250

14.4.2案例10——改变动态样式251

14.4.3案例11——动态定位网页元素252

14.4.4案例12——设置网页元素的显示与隐藏254

14.5 HTML5、CSS3和JavaScript的搭配应用255

14.5.1案例13——设定左右移动的图片256

14.5.2案例14——制作颜色选择器258

14.5.3案例15——制作跑马灯效果260

14.6综合案例——制作树形导航菜单262

14.7大神解惑267

14.8跟我练练手268

第15章 CSS与XML的综合运用269

15.1 XML语法基础270

15.1.1实例1——XML的基本应用270

15.1.2实例2——XML文档的组成和声明271

15.1.3实例3——XML元素介绍272

15.2使用CSS修饰XML文件274

15.2.1实例4——XML使用CSS274

15.2.2实例5——设置字体属性275

15.2.3实例6——设置色彩属性276

15.2.4实例7——设置边框属性277

15.2.5实例8——设置文本属性278

15.3综合实例1——招聘广告279

15.4综合实例2——图文混排页面281

15.5综合实例3——古诗欣赏283

15.6大神解惑286

15.7跟我练练手286

第Ⅳ篇 网页布局289

第16章 CSS定位与DIV布局核心技术289

16.1认识块级元素和行内级元素290

16.1.1案例1——块级元素和行内级元素的应用290

16.1.2案例2——div元素和span元素的区别292

16.2盒子模型292

16.2.1盒子模型的概念293

16.2.2案例3——定义网页border区域293

16.2.3案例4——定义网页padding区域295

16.2.4案例5——定义网页margin区域296

16.3弹性盒模型299

16.3.1案例6——定义盒子布局方向（box-orient）300

16.3.2案例7——定义盒子布局顺序（box-direction）301

16.3.3案例8——定义盒子布局位置（box-ordinal-group）303

16.3.4案例9——定义盒子弹性空间（box-flex）304

16.3.5案例10——管理盒子空间（box-pack和box-align）306

16.3.6案例11——盒子空间的溢出管理（box-lines）307

16.4综合案例1——图文排版效果308

16.5综合案例2——淘宝导购菜单310

16.6大神解惑313

16.7跟我练练手314

第17章 CSS＋DIV盒子的浮动与定位315

17.1定义DIV316

17.1.1什么是DIV316

17.1.2案例1——创建DIV316

17.2盒子的定位317

17.2.1案例2——静态定位317

17.2.2案例3——相对定位318

17.2.3案例4——绝对定位319

17.2.4案例5——固定定位320

17.2.5案例6——盒子的浮动321

17.3其他CSS布局定位方式323

17.3.1案例7——溢出（overflow）定位323

17.3.2案例8 ——隐藏（visibility）定位325

17.3.3案例9 ——z-index空间定位327

17.4新增CSS3多列布局328

17.4.1案例10——设置列宽度328

17.4.2案例11——设置列数330

17.4.3案例12——设置列间距331

17.4.4案例13——设置列边框样式332

17.5综合案例1——定位网页布局样式334

17.6综合案例2——制作阴影文字效果337

17.7大神解惑338

17.8跟我练练手338

第18章 固定宽度网页布局剖析与制作339

18.1 CSS排版的观念340

18.1.1将页面用div分块340

18.1.2设置各块位置340

18.1.3案例1——用CSS定位341

18.2固定宽度网页剖析与布局344

18.2.1案例2——网页单列布局模式344

18.2.2案例3——网页“1-2-1”型布局模式348

18.2.3案例4——网页“1-3-1”型布局模式350

18.3大神解惑354

18.4跟我练练手354

第19章 自动缩放网页布局剖析与制作355

19.1自动缩放网页“1-2-1”型布局模式356

19.1.1案例1——“1-2-1”等比例变宽布局356

19.1.2案例2——“1-2-1”单列变宽布局357

19.2自动缩放网页“1-3-1”型布局模式358

19.2.1“1-3-1”三列宽度等比例布局358

19.2.2案例3——“1-3-1”单侧列宽度固定的变宽布局358

19.2.3案例4——“1-3-1”中间列宽度固定的变宽布局361

19.2.4案例5——“1-3-1”双侧列宽度固定的变宽布局365

19.2.5案例6——“1-3-1”中列和左侧列宽度固定的变宽布局368

19.3分列布局背景色的使用371

19.3.1案例7——设置固定宽度布局的列背景色372

19.3.2案例8——设置特殊宽度变化布局的列背景色373

19.4综合案例1——单列宽度变化布局374

19.5综合案例2——多列等比例宽度变化布局376

19.6大神解惑378

19.7跟我练练手378

第20章 创建响应式页面379

20.1了解弹性盒子380

20.2案例1——使用弹性盒子380

20.3案例2——设置弹性子元素的位置383

20.4案例3——设置弹性子元素的横向对齐方式384

20.5案例4——设置弹性子元素的纵向对齐方式389

20.6案例5——设置弹性子元素的换行方式390

20.7综合案例——使用弹性盒子创建响应式页面393

20.8大神解惑395

20.9跟我练练手396

第Ⅴ篇 项目案例实战399

第21章 设计商业门户类网页399

21.1整体设计400

21.1.1颜色应用分析400

21.1.2架构布局分析400

21.2主要模块设计401

21.2.1网页整体样式插入401

21.2.2网页局部样式403

21.2.3顶部模块样式代码分析410

21.2.4中间主体代码分析411

21.2.5底部模块分析414

21.3网站调整415

21.3.1部分内容调整415

21.3.2模块调整415

21.3.3调整后预览测试417

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

22.1整体设计420

22.1.1颜色应用分析420

22.1.2架构布局分析421

22.2主要模块设计422

22.2.1样式代码分析422

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

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

22.2.4底部模块分析430

22.3网站调整431

22.3.1部分内容调整431

22.3.2模块调整432

22.3.3调整后预览测试435

第23章 设计娱乐休闲类网页437

23.1整体设计438

23.1.1应用设计分析438

23.1.2架构布局分析439

23.2主要模块设计440

23.2.1网页整体样式插入440

23.2.2顶部模块代码分析441

23.2.3视频模块代码分析442

23.2.4评论模块代码分析443

23.2.5热门推荐模块代码分析444

23.2.6底部模块分析446

23.3网页调整446

23.3.1部分内容调整446

23.3.2调整后预览测试448

第24章 设计企业门户类网页449

24.1构思布局450

24.1.1设计分析450

24.1.2排版架构450

24.2主要模块设计451

24.2.1 Logo与导航菜单451

24.2.2 Banner区452

24.2.3资讯区453

24.2.4版权信息455

第25章 设计在线购物类网页457

25.1整体布局458

25.1.1设计分析458

25.1.2排版架构458

25.2主要模块设计459

25.2.1 Logo与导航区459

25.2.2 Banner与资讯区460

25.2.3产品类别区域462

25.2.4页脚区域463