网页开发手记 CSS+DIV网页布局实战详解【2025|PDF下载-Epub版本|mobi电子书|kindle百度云盘下载】

网页开发手记 CSS+DIV网页布局实战详解PDF格式电子书版下载

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

第1篇 CSS布局基础知识1

第1章 网页开发必备基础2

1.1 网页文档与网页浏览器3

1.2 网页文档的类型4

1.2.1 什么是HTML文档4

1.2.2 什么是XHTML文档5

1.2.3 XHTML的页面结构6

1.2.4 XHTML的书写格式6

1.2.5 XHTML的语法规范6

1.3 初识CSS——层叠样式表7

1.4 选择合适的开发工具8

1.4.1 TopStyle——CSS开发编辑器8

1.4.2 Dreamweaver——网页开发编辑器9

1.5 小结12

第2章 CSS初体验——编写一个简单的网页文档13

2.1 编写XHTML文档14

2.1.1 使用Dreamweaver新建一个XHTML框架文档14

2.1.2 手工编写XHTML文档16

2.2 在XHTML文档中使用CSS样式的方法16

2.2.1 行内样式16

2.2.2 内嵌式18

2.2.3 链接式19

2.2.4 导入样式21

2.2.5 样式的优先级21

2.3 初探CSS语句22

2.3.1 CSS语句的结构23

2.3.2 CSS语句样式的工作原理23

2.3.3 CSS基本书写规范24

2.3.4 使用有意义的CSS命名24

2.3.5 CSS样式表书写顺序26

2.4 合理的CSS注释26

2.5 小结27

第3章 CSS的基本语法知识28

3.1 选择器29

3.1.1 标签选择器29

3.1.2 类选择器30

3.1.3 ID选择器32

3.1.4 全局选择器33

3.1.5 组合选择器34

3.1.6 继承选择器36

3.1.7 伪类与伪元素39

3.2 声明40

3.2.1 多重声明41

3.2.2 集体声明41

3.3 CSS的层叠原理43

3.3.1 CSS样式来源43

3.3.2 选择器的优先级43

3.3.3 ！important 语句45

3.3.4 顺序优先级46

3.3.5 CSS的层叠规则47

3.4 颜色单位48

3.4.1 颜色名称48

3.4.2 百分比颜色49

3.4.3 数字颜色51

3.4.4 十六进制颜色51

3.5 长度单位53

3.5.1 绝对单位53

3.5.2 相对单位54

3.6 URL56

3.6.1 绝对URL56

3.6.2 相对URL56

3.7 继承性57

3.8 小结57

第2篇 CSS页面布局技巧59

第4章 设置文本样式60

4.1 字体类型61

4.2 字体大小设置62

4.2.1 相对大小定义63

4.2.2 绝对大小定义66

4.3 字体加粗68

4.4 字体颜色70

4.5 斜体71

4.6 下画线、顶画线和删除线72

4.7 英文字母大小写74

4.8 文本的复合属性76

4.9 文字的段落样式76

4.9.1 段落的水平对齐方式76

4.9.2 段落的垂直对齐方式77

4.9.3 首行缩进80

4.9.4 行间距与字间距81

4.10 实例：简单的文章页面85

4.11 小结88

第5章 在页面内添加图片89

5.1 在网页中插入图片90

5.2 控制图片的大小91

5.2.1 设置图片的固定大小91

5.2.2 使用百分比控制图片的宽和高92

5.2.3 单独控制图片的宽度或高度93

5.3 为图片设置边框效果94

5.4 图片与文本混排95

5.5 图片无法显示98

5.6 给图片增加链接99

5.7 小结100

第6章 设置页面背景101

6.1 设置页面元素的背景色102

6.2 设置背景图片103

6.2.1 设置页面元素的背景图片103

6.2.2 背景图的平铺104

6.2.3 背景图的位置106

6.2.4 滚动和固定的背景图110

6.3 背景颜色和背景图片的层叠112

6.4 背景属性112

6.4.1 背景属性缩写112

6.4.2 背景属性在内联元素中的使用113

6.5 利用图片设置圆角背景114

6.5.1 背景图片自适应高度114

6.5.2 背景图片自适应宽度116

6.5.3 背景图片的完全自适应117

6.6 小结120

第7章 用CSS控制超链接样式121

7.1 链接的属性详解122

7.2 链接的设置顺序与继承性122

7.2.1 使用链接的顺序123

7.2.2 链接的继承性124

7.3 丰富超链接的表现形式126

7.3.1 通过不同的链接效果显示各种状态126

7.3.2 超链接翻转效果129

7.4 小结132

第8章 列表样式133

8.1 列表的类型134

8.1.1 无序列表134

8.1.2 有序列表136

8.1.3 定义列表137

8.2 改变列表符的样式138

8.2.1 使用自带的列表符138

8.2.2 用背景图片改变列表符141

8.2.3 改变列表符的位置142

8.2.4 列表属性的简写143

8.3 小结143

第9章 用CSS美化表格144

9.1 表格的基本页面元素145

9.2 使用CSS控制表格元素148

9.2.1 设置表格的大小148

9.2.2 表格边框的分开与合并149

9.2.3 表格内的文字位置149

9.3 控制表格的边线和背景151

9.4 小结152

第10章 用CSS控制表单样式153

10.1 表单的基本元素154

10.1.1 form标签和 fieldset标签154

10.1.2 表单域的种类155

10.2 美化fieldset标签156

10.3 美化表单域158

10.3.1 美化文本框158

10.3.2 美化下拉列表159

10.3.3 美化提交按钮160

10.4 小结161

第11章 CSS滤镜的应用162

11.1 滤镜概述163

11.2 透明层次滤镜（alpha）163

11.2.1 使用参数opacity163

11.2.2 使用参数style164

11.3 颜色透明滤镜（chroma）167

11.4 模糊滤镜（blur）168

11.5 固定阴影滤镜（dropshadow）170

11.6 移动阴影滤镜（shadow）171

11.7 光晕滤镜（glow）172

11.8 灰度滤镜（gray）173

11.9 反色滤镜（invert）174

11.10 镜像滤镜（flip）175

11.11 遮罩滤镜（mask）176

11.12 x射线滤镜（x-ray）177

11.13 波纹滤镜（wave）178

11.14 小结179

第12章 浏览器兼容问题180

12.1 浏览器的种类及其兼容原则181

12.2 解决兼容问题的原理182

12.3 !important的使用182

12.4 水平居中的问题184

12.4.1 IE 6.0 中的水平居中184

12.4.2 Firefox 17.0 中的水平居中185

12.4.3 解决方法186

12.5 列表的默认显示问题186

12.5.1 列表的默认显示方式186

12.5.2 默认属性的取消187

12.6 非浮动内容和容器的问题189

12.6.1 IE 6.0中固定宽度和高度的容器和内容189

12.6.2 Firefox 17.0 中的容器与内容190

12.6.3 超出容器的内容可能出现的问题和解决方法190

12.7 使用:after伪类解决浮动的问题192

12.7.1 IE 6.0中的浮动元素和容器192

12.7.2 Firefox 17.0 中的浮动元素和容器193

12.7.3 使用:after伪类清除浮动193

12.7.4 并列浮动元素默认宽度的问题195

12.8 嵌套元素宽度和高度叠加的问题196

12.8.1 父元素和子元素均没有定义宽度和高度196

12.8.2 定义子元素宽度后的效果197

12.8.3 定义父元素宽度后的效果198

12.8.4 解决的方法198

12.9 小结204

第3篇 DIV＋CSS布局205

第13章 DIV＋CSS布局基础206

13.1 初识DIV＋CSS布局的流程207

13.2 了解盒模型209

13.2.1 div标签的盒模型示例210

13.2.2 基本盒模型213

13.2.3 边距214

13.2.4 边框219

13.2.5 补白223

13.3 块级元素与行内元素225

13.4 CSS的浮动布局227

13.4.1 两个元素的浮动应用227

13.4.2 多个元素的浮动应用230

13.4.3 清除浮动231

13.4.4 解决Firefox的计算高度问题232

13.5 CSS布局的相对定位235

13.5.1 单个元素的相对定位235

13.5.2 两个元素的相对定位238

13.6 CSS布局方式：绝对定位240

13.6.1 单个元素的绝对定位240

13.6.2 两个元素的绝对定位241

13.7 小结243

第14章 CSS页面基本排版技术244

14.1 固定宽度布局245

14.1.1 一列水平居中布局245

14.1.2 两列浮动布局248

14.1.3 三列浮动布局253

14.2 自适应宽度布局258

14.2.1 两列布局：两列自适应宽度258

14.2.2 两列布局：左列固定，右列自适应261

14.2.3 三列布局：中间列自适应263

14.3 复杂的页面排版266

14.3.1 复杂的页面排版：垂直布局266

14.3.2 复杂的页面排版：水平布局273

14.4 小结278

第4篇 整站的CSS定义技巧279

第15章 关于整站样式表的分析280

15.1 站点页面的分析281

15.1.1 规划样式表的原则281

15.1.2 规划样式表的方法281

15.1.3 实例分析282

15.2 站点二级页面的制作283

15.2.1 日志内容页面结构的规划283

15.2.2 日志内容页面CSS部分的制作284

15.2.3 日志列表页的制作287

15.3 小结289

第16章 关于标准的校验290

16.1 为什么要进行标准的校验291

16.2 怎样进行标准的校验291

16.2.1 XHTML校验的方法291

16.2.2 CSS校验的方法294

16.2.3 XHTML校验常见错误294

16.2.4 CSS校验常见错误295

16.3 实例页面的校验295

16.3.1 实例首页的校验295

16.3.2 一个二级页面的校验297

16.4 小结298

第5篇 实例制作299

第17章 使用Dreamweaver制作中文网站300

17.1 分析效果图301

17.2 制作首页的切图302

17.3 制作站点首页头部303

17.3.1 首页头部的信息和基础样式的制作303

17.3.2 首页头部的分析305

17.3.3 首页头部logo和banner部分的制作305

17.3.4 导航列表的制作309

17.4 制作首页的主体部分312

17.4.1 分析主体部分效果图312

17.4.2 制作主体部分的父元素313

17.4.3 制作主体左侧部分的样式313

17.4.4 制作主体右侧内容中关于我们的部分317

17.4.5 制作新闻中心部分319

17.4.6 制作产品介绍部分和资质荣誉部分321

17.4.7 制作合作伙伴部分323

17.5 制作首页的底部324

17.6 首页的兼容问题325

17.7 二级页面的制作326

17.8 小结329