CSS+DIV网页样式布局实战从入门到精通PDF电子书下载

第1章 CSS入门 2

1.1CSS的概念 2

1.1.1网页中标记的概念 2

1.1.2HTM L与CSS的互补 2

1.1.3浏览器对CSS的支持 3

1.2网页设计中的CSS 3

1.2.1CSS能做什么 3

1.2.2CSS的局限性 3

1.3网站CSS赏析 4

1.3.1商务网站CSS样式赏析 4

1.3.2游戏网站CSS样式赏析 4

1.4实例——编写我的第一个CSS样式 5

1.4.1从零开始 5

1.4.2加入CSS控制 6

1.4.3控制图片 6

1.4.4CSS的注释 7

高手私房菜 7

第2章 CSS 3基本语法 10

2.1构造CSS规则 10

2.2实例1——基本CSS选择器 10

2.2.1标记选择器 11

2.2.2类别选择器 12

2.2.3ID选择器 15

2.3实例2——在HTML中使用CSS 16

2.3.1行内样式 16

2.3.2内嵌式 17

2.3.3链接式 18

2.3.4导入式 19

2.3.5各种方式的优先级 20

2.4CSS 3的声明 20

2.4.1标准声明 20

2.4.2合并多重声明 20

2.5属性值 21

2.5.1整数和实数 21

2.5.2长度值 22

2.5.3百分比值 22

2.5.4U R L 22

2.5.5颜色值 23

2.6CSS的继承 23

高手私房菜 24

第3章 手工与借助工具编写网页样式C 26

3.1实例1——手工编写&C 26

3.1.1从零开始 26

3.1.2设置标题 28

3.1.3控制图片 28

3.1.4设置正文 29

3.1.5设置整体页面 30

3.1.6对段落进行分别设置 30

3.1.7完整代码 31

3.2实例2——使用Dreamweaver编写 32

3.2.1使用Dreamweaver创建页面 32

3.2.2在Dreamweaver中新建CSS规则 34

3.2.3在Dreamweaver中编辑CSS规则 38

3.2.4为图像创建CSS规则 38

高手私房菜 40

第4章 盒子模型 42

4.1盒子的内部结构 42

4.2实例1——边框 42

4.2.1边框类型 42

4.2.2属性值的简写形式 44

4.2.3边框与背景 44

4.3实例2——内边距 45

4.4实例3——外边距 46

4.5实例4——盒子之间的关系 47

4.5.1HTML与DOM 47

4.5.2标准文档流 49

4.5.3div标记与span标记 49

4.6实例5——盒子在标准流中的定位原则 50

4.6.1行元素之间的水平margin 50

4.6.2块元素之间的竖直margin 51

4.6.3嵌套盒子之间的margin 52

4.6.4将margin设为负值 52

4.7实例6——盒子的浮动 53

4.7.1准备代码 53

4.7.2设置浮动的div 54

4.7.3改变浮动的方向 55

4.7.4全部向右浮动 56

4.7.5使用clear属性清除浮动的影响 56

4.8实例7——盒子的定位 57

4.8.1静态定位 58

4.8.2相对定位 58

4.8.3绝对定位 59

4.8.4固定定位 60

高手私房菜 60

第5章 CSS 3的高级特性 62

5.1实例1——复合选择器 62

5.1.1交集选择器 62

5.1.2并集选择器 62

5.1.3后代选择器 63

5.2实例2—— CSS的继承特性 64

5.2.1继承关系 65

5.2.2CSS继承的运用 65

5.3实例3—— CSS的层叠特性 66

高手私房菜 68

第6章 网页字体与对象尺寸 70

6.1实例1——指定字体属性 70

6.1.1font-weight属性 70

6.1.2font-variant属性 71

6.1.3font-style属性 72

6.1.4font简写属性 72

6.2实例2——字体族 73

6.2.1泛型字体族 73

6.2.2通常安装的字体 74

6.3实例3——设置字体 74

6.3.1选择字体集 74

6.3.2设置字体尺寸 75

6.3.3设置文字横向拉伸变形 76

6.3.4设置字体尺寸是否统 76

6.4实例4——设置对象尺寸 76

6.4.1对象宽度设定 77

6.4.2对象高度设定 77

6.4.3对象尺寸范围设定 78

6.4.4文本行高控制 78

6.4.5垂直对齐方式 79

高手私房菜 80

第7章 网页文本与段落设计 82

7.1实例1——添加文本 82

7.1.1普通文本 82

7.1.2特殊文字符号 82

7.2实例2——文本排版 83

7.2.1段落标记P与换行标记br 84

7.2.2标题标记h 1～h6 84

7.2.3文本水平居中标记center 85

7.3实例3——网页特殊字符 85

7.4实例4——文本的应用 87

高手私房菜 88

第8章 文本样式 90

8.1长度单位 90

8.2实例1——颜色定义 90

8.3实例2——准备页面 91

8.4实例3——设置文字的字体 92

8.5实例4——设置文字的倾斜效果 93

8.6实例5——设置文字的加粗效果 93

8.7实例6——英文字母大小写转换 93

8.8实例7——控制文字的大小 94

8.9实例8——文字的装饰效果 95

8.10实例9——设置段落首行缩进 95

8.11实例10——设置字词间距 96

8.12实例11——设置段落内部的文字行高 96

8.13实例12——设置段落之间的距离 97

8.14实例13——控制文本的水平位置 97

8.15实例14——设置文字与背景的颜色 98

8.16实例15——设置段落的垂直对齐方式 99

高手私房菜 100

第9章 文本颜色与效果 102

9.1实例1——文本颜色 102

9.1.1定义颜色值 102

9.1.2有效使用颜色 103

9.2实例2——特殊文本效果 104

9.2.1text-decoration属性 104

9.2.2text-transform属性 105

9.3实例3——控制文本间距 107

9.3.1letter-spacing属性 107

9.3.2word-spacing属性 108

9.3.3white-spacing属性 109

9.3.4line-height属性 111

高手私房菜 112

第10章 背景颜色与图像 114

10.1实例1——设置背景颜色 114

10.2实例2——设置背景图像 115

10.3实例3——设置背景图像平铺 116

10.4实例4——设置背景图像位置 117

10.5实例5——设置背景图片位置固定 119

10.6实例6——设置标题的图像替换 119

10.7实例7——使用滑动门技术的标题 120

高手私房菜 122

第11章 图像效果 124

11.1实例1——设置图片边框 124

11.1.1基本属性 124

11.1.2为不同的边框分别设置样式 125

11.2实例2——图片缩放 126

11.3实例3——图文混排 127

11.3.1文字环绕 127

11.3.2设置图片与文字的间距 128

11.4实例4——八大行星科普网页 129

11.5实例5——设置图片与文字的对齐方式 134

11.5.1横向对齐方式 134

11.5.2纵向对齐方式 135

高手私房菜 136

第12章 网页表格 138

12.1实例1——创建表格 138

12.2实例2——控制表格 139

12.2.1表格中的标记 139

12.2.2表格的边框 141

12.2.3表格宽度的确定 141

12.2.4其他与表格相关的标记 142

12.3实例3——表格操作 144

12.3.1合并单元格 144

12.3.2设置对齐方式 145

12.3.3用cellpadding属性和cellspacing属性设定距离 146

12.4实例4——鼠标指针经过时整行变色提示的表格 147

12.4.1搭建HTML结构 147

12.4.2在Firefox和IE9中实现鼠标指针经过时整行变色 149

12.4.3在IE6中实现鼠标指针经过时整行变色 149

12.5实例5——制作计算机报价表 150

高手私房菜 152

第13章 链接与项目列表 154

13.1实例1——丰富的链接特效 154

13.1.1动态超链接 154

13.1.2按钮式超链接 155

13.1.3CSS控制鼠标指针 156

13.1.4浮雕背景超链接 158

13.1.5让下画线动起来 159

13.2实例2——项目列表 160

13.2.1列表的符号 160

13.2.2图片符号 161

13.2.3建立有序列表 162

13.2.4建立无序列表 163

13.2.5网页列表的应用 164

高手私房菜 166

第14章 导航菜单 168

14.1实例1——简单的导航菜单 168

14.1.1竖直导航菜单 168

14.1.2横竖自由转换菜单 170

14.2实例2——水平导航菜单 171

14.2.1自适应的斜角水平菜单 171

14.2.2应用滑动门技术的玻璃效果菜单 174

14.2.3会跳起的多彩菜单 176

14.3实例3——竖直排列的导航菜单 180

14.3.1双竖线菜单 180

14.3.2双斜角横线菜单 181

14.3.3立体菜单 183

14.3.4箭头菜单 184

14.3.5带说明信息的菜单 186

14.4实例4——下拉菜单 187

高手私房菜 190

第15章 固定宽度布局 192

15.1 CSS排版观念 192

15.1.1MSN的首页 192

15.1.2Hao123的首页 193

15.1.3Yahoo的首页 193

15.2实例1——单列布局 194

15.2.1放置第一个圆角框 194

15.2.2设置圆角框的CSS样式 195

15.2.3放置其他圆角框 197

15.3实例2—— “1-2-1”固定宽度布局 198

15.3.1准备工作 199

15.3.2绝对定位法 200

15.3.3浮动法 201

15.4实例3—— “1-3-1”固定宽度布局 202

15.5实例4——魔术布局 205

15.5.1魔术布局设计 205

15.5.2制作魔术布局 207

15.5.3修正缺陷 211

高手私房菜 212

第16章 变宽度布局 214

16.1实例1——“1-2-1”变宽度网页布局 214

16.1.1 “1-2-1”等比例变宽布局 214

16.1.2“1-2-1”单列变宽布局 215

16.2实例2—— “1-3-1”变宽度网页布局 216

16.2.1“1-3-1”三列宽度等比例布局 216

16.2.2“1-3-1”单侧列宽度固定的变宽布局 216

16.2.3“1-3-1”中间列宽度固定的变宽布局 220

16.2.4“1-3-1” 双侧列宽度固定的变宽布局 224

16.2.5“1-3-1”中列和侧列宽度固定的变宽布局 228

16.3实例3——分列布局背景颜色问题 232

16.3.1设置固定宽度布局的列背景色 233

16.3.2设置特殊宽度变化布局的列背景色 234

16.3.3设置单列宽度变化布局的列背景色 235

16.3.4设置多列等比例宽度变化布局的列背景色 237

高私房菜 238

第17章 制作商务类型网页 240

17.1设计整体结构 240

17.1.1设计分析 240

17.1.2排版架构 240

17.2整体设置 241

17.3设置页头 242

17.4设置中间部分 242

17.4.1产品展示 242

17.4.2新闻中心 243

17.4.3促销产品 245

17.5页脚部分 245

高手私房菜 246

第18章 制作时尚科技类型网页 248

18.1整体布局 248

18.1.1设计分析 248

18.1.2排版架构 248

18.2设计模块组成 248

18.2.1导航区 249

18.2.2Banner区 250

18.2.3资讯区 250

18.2.4页脚 251

18.3设置链接 252

高手私房菜 252

第19章 制作在线购物类型网页 254

19.1整体布局 254

19.1.1设计分析 254

19.1.2排版架构 254

19.2设计模块组成 254

19.2.1导航 254

19.2.2Banner 255

19.2.3产品类别 256

19.2.4页脚 256

19.3设置链接 256

高手私房菜 256

第20章 制作娱乐休闲类型网页 258

20.1设置网页背景 258

20.2整体布局 258

20.2.1设 计分析 258

20.2.2排版架构 258

20.3设计模块组成 259

20.3.1注册 259

20.3.2导航 260

20.3.3预告 261

20.3.4新片 262

20.3.5页脚 263

20.4设置链接 264

高手私房菜 264

第21章 制作适合手机浏览的网页 266

21.1整体布局 266

21.1.1设计分析 266

21.1.2排版架构 266

21.2设计导航菜单 266

21.3设置模块内容 267

高手私房菜 268