高效学习CSS布局之道 通过244个范例掌握网页样式与布局技术PDF|Epub|txt|kindle电子书版本网盘下载

高效学习CSS布局之道 通过244个范例掌握网页样式与布局技术PDF格式电子书版下载

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

第1篇 CSS布局的相关概念3

第1章 CSS的概念3

1.1什么是CSS3

1.2什么是XHTML4

1.3一个使用CSS的简单实例4

1.3.1使用CSS的代码及其显示效果4

制作一个简单的CSS使用实例4

1.3.2哪里是CSS样式5

1.4怎样将CSS应用到网页中6

1.4.1行内添加CSS样式6

一个使用行内添加CSS样式的实例6

1.4.2内嵌式调用CSS样式7

一个使用内嵌式调用CSS样式的实例7

1.4.3链接外部CSS样式8

一个链接外部CSS样式的实例8

1.5关于Web标准9

1.5.1 Web标准的概念9

1.5.2内容——信息传递的根本10

1.5.3结构——内容与表现的桥梁10

1.5.4表现——页面吸引力的灵魂11

1.6 CSS与网页布局12

1.7 CSS与脚本12

1.8 CSS与网站优化13

1.9怎样编辑CSS14

1.10 CSS网站欣赏14

第2章 XHTML基础17

2.1一个最简单的XHTML页面17

2.1.1最简单的XHTML页面的构成17

一个最简单的XHTML页面的实例17

2.1.2不显示的页面内容18

一个XHTML中不显示内容的实例18

2.1.3显示的页面内容19

一个XHTML中显示内容的实例19

2.2页面元素20

2.3元素的属性20

一个在元素中使用属性的示例20

2.4页面整体元素＜html＞与名字空间21

2.5页面头部元素22

2.5.1定义页面的标题22

一个定义页面标题的实例22

2.5.2定义页面的编码23

一个定义页面文本编码的实例23

2.5.3定义页面的样式24

一个定义页面样式的实例24

2.5.4定义页面使用的外部文件25

一个使用外部文件的实例25

2.6页面主体元素26

2.6.1区域元素26

一个使用＜div＞元素的实例26

2.6.2内容元素27

一个使用＜span＞元素的实例27

2.6.3列表元素28

一个使用列表元素的实例28

2.6.4段落元素29

一个使用段落元素的实例29

2.6.5标题元素30

一个使用标题元素的实例30

2.6.6图像元素31

一个使用图像元素的实例31

2.6.7表单元素32

一个使用表单元素的实例32

2.7 XHTML的书写规范33

第3章 CSS的语法35

3.1 CSS的基本写法35

一个使用CSS样式的实例35

3.2选择符36

3.2.1 id选择符36

一个使用id选择符的实例36

3.2.2类选择符37

一个使用类选择符的实例37

3.2.3类型选择符38

一个使用类型选择符的实例38

3.2.4伪类39

一个使用伪类选择符的实例39

3.2.5子选择符40

一个使用子选择符的实例41

3.2.6选择符分组41

一个使用选择符分组的实例42

3.2.7选择符的优先级43

一个关于选择符优先级的实例43

3.3属性44

3.4属性值44

3.4.1长度值45

3.4.2百分比值45

3.4.3颜色值45

3.4.4 URL值46

3.5默认值47

一个使用默认值的实例47

3.6继承值48

一个使用继承性的实例48

3.7应用样式的优先级49

一个关于应用样式优先级的实例49

第2篇 CSS盒模型和块元素的定位53

第4章 CSS控制元素的大小53

4.1盒模型的概念53

4.1.1块元素和内联元素53

4.1.2元素宽度的计算55

4.2元素内容的大小55

4.2.1宽度属性width55

一个使用宽度属性的实例55

4.2.2高度属性height56

一个使用height（高度）属性的实例56

4.2.3内容与宽度、高度属性的关系57

一个元素内容超出元素定义大小的实例57

4.2.4最大宽度属性max-width58

一个使用最大宽度属性的实例58

4.2.5最小宽度属性min-width59

一个使用最小宽度属性的实例59

4.2.6最大高度属性max-height60

一个使用最大高度属性的实例61

4.2.7最小高度属性min-height62

一个使用最小高度属性的实例62

4.3元素的背景63

4.3.1背景颜色属性background-color63

一个使用背景颜色属性的实例63

4.3.2背景图片属性background-image64

一个使用背景图片属性的实例64

4.3.3背景图片的重复属性background-repeat65

一个使用背景图片重复属性的实例65

4.3.4背景图片位置属性background-position66

一个使用背景图片位置属性的实例67

4.3.5背景图片滚动属性background-attachment67

一个使用背景图片滚动属性的实例68

4.3.6同时使用背景颜色和背景图片属性69

一个同时使用背景颜色和背景图片属性的实例69

4.3.7背景的综合属性background70

一个同时使用背景的综合属性的实例70

4.4元素的补白71

4.4.1顶部补白属性padding-top71

一个使用顶部补白属性的实例71

4.4.2右侧补白属性padding-right72

一个使用右侧补白属性的实例72

4.4.3底部补白属性padding-bottom73

一个使用底部补白属性的实例73

4.4.4左侧补白属性padding-left74

一个使用左侧补白属性的实例74

4.4.5综合补白属性padding75

一个使用综合补白属性的实例75

4.4.6补白与背景76

一个关于补白与背景属性的实例76

4.5元素的边框77

4.5.1顶部边框样式属性border-top-style77

一个使用顶部边框样式属性的实例78

4.5.2右侧边框样式属性border-right-style79

一个使用右侧边框样式属性的实例79

4.5.3底部边框样式属性border-bottom-style80

一个使用底部边框样式属性的实例81

4.5.4左侧边框样式属性border-left-style82

一个使用左侧边框样式属性的实例82

4.5.5顶部边框颜色属性border-top-color83

一个使用顶部边框颜色属性的实例83

4.5.6右侧边框颜色属性border- right-color84

一个使用右侧边框颜色属性的实例84

4.5.7底部边框颜色属性border-bottom-color85

一个使用底部边框颜色属性的实例85

4.5.8左侧边框颜色属性border-left-color86

一个使用左侧边框颜色属性的实例86

4.5.9顶部边框宽度属性border-top-width87

一个使用顶部边框宽度属性的实例88

4.5.10右侧边框宽度属性border-right-width89

一个使用右侧边框宽度属性的实例89

4.5.11底部边框宽度属性border-bottom-width90

一个使用底部边框宽度属性的实例90

4.5.12左侧边框宽度属性border-left-width91

一个使用左侧边框宽度属性的实例91

4.5.13边框样式属性border-style92

一个使用边框样式属性的实例92

4.5.14边框颜色属性border-color93

一个使用边框颜色属性的实例93

4.5.15边框宽度属性border-width94

一个使用边框宽度属性的实例94

4.5.16边框顶部综合属性border-top95

一个使用边框顶部综合属性的实例95

4.5.17边框右侧综合属性border-right96

一个使用边框右侧综合属性的实例96

4.5.18边框底部综合属性border-bottom97

一个使用边框底部综合属性的实例97

4.5.19边框左侧综合属性border-left98

一个使用边框左侧综合属性的实例98

4.5.20边框综合属性border99

一个使用边框综合属性的实例99

4.6元素的边界100

4.6.1顶部边界属性margin-top100

一个使用顶部边界属性的实例100

4.6.2右侧边界属性margin-right101

一个使用右侧边界属性的实例101

4.6.3底部边界属性margin-bottom102

一个使用底部边界属性的实例102

4.6.4左侧边界属性margin-left103

一个使用左侧边界属性的实例104

4.6.5边界综合属性margin104

一个使用边界综合属性的实例105

4.6.6边界与背景106

一个关于边界与背景属性的实例106

4.7 嵌套元素的大小和距离107

4.7.1父元素和子元素107

一个包含子元素和父元素的实例107

4.7.2子元素中使用边界属性，父元素中未定义大小108

子元素中使用边界属性，父元素未定义大小的实例108

4.7.3子元素中使用边界属性，父元素中使用补白属性109

子元素中使用边界属性，父元素中使用补白属性的实例109

第5章 CSS控制元素的定位111

5.1元素的定位111

5.1.1元素的定位属性position111

一个使用元素的定位属性的实例111

5.1.2上边偏移属性top112

一个使用上边偏移属性的实例113

5.1.3右边偏移属性right113

一个使用右边偏移属性的实例114

5.1.4下边偏移属性bottom114

一个使用下边偏移属性的实例115

5.1.5左边偏移属性left116

一个使用左边偏移属性的实例116

5.2绝对定位117

5.2.1绝对定位与父元素117

一个使用嵌套绝对定位元素的实例117

5.2.2绝对定位与相邻元素118

一个使用绝对定位与相邻元素的实例118

5.3相对定位119

5.3.1相对定位元素位置的确定119

一个在元素中使用相对定位属性的实例120

5.3.2相对定位与相邻元素121

一个使用相对定位与相邻元素的实例121

5.4定位元素的重叠122

5.4.1层叠定位属性z-index122

一个使用层叠定位属性的实例122

5.4.2简单嵌套元素中的层叠定位124

一个嵌套元素中使用层叠定位的实例124

5.4.3包含子元素的复杂层叠定位125

一个包含子元素的复杂层叠定位的实例125

5.5定位属性的优点和局限性127

5.5.1定位属性的优越性127

一个使用定位属性定位的实例127

5.5.2绝对定位属性的局限性128

一个使用绝对定位属性的实例129

5.5.3相对定位属性的局限性130

一个使用相对定位属性的实例130

第6章 CSS控制元素的布局133

6.1元素的浮动133

6.1.1元素的浮动属性float133

一个使用元素浮动属性的实例133

6.1.2浮动元素和固定元素134

一个使用浮动元素和固定元素的实例134

6.1.3两个浮动元素的显示效果135

一个使用两个浮动元素的实例136

6.1.4多个浮动元素的显示顺序137

一个使用多个浮动元素的实例137

6.2浮动的清除138

6.2.1清除浮动属性clear138

一个使用清除浮动属性的实例138

6.2.2清除浮动与固定元素140

一个清除右侧浮动的实例140

6.3内容的剪切141

6.3.1内容的剪切属性clip141

一个使用内容的剪切属性的实例141

6.3.2剪切属性与内容142

一个剪切元素中内容的实例142

6.4溢出内容的控制144

6.4.1溢出属性overflow144

一个使用溢出属性的实例144

6.4.2横向溢出属性overflow-x145

一个使用横向溢出属性的实例145

6.4.3纵向溢出属性overflow-y146

一个使用纵向溢出属性的实例146

6.4.4滚动条和边框147

一个显示边框和滚动条关系的实例147

6.5元素的显示方式148

6.5.1显示方式属性display148

一个显示方式属性的实例149

6.5.2内联块属性值的异常显示150

一个使用内联块属性值的实例151

6.5.3隐藏属性值none152

一个使用隐藏属性值的实例152

6.6元素的可视性153

6.6.1可视属性visibility153

一个使用可视属性的实例154

6.6.2可视属性与显示方式属性的关系155

一个使用可视属性与显示155

方式属性的实例155

第3篇 CSS控制元素显示效果159

第7章 CSS控制文本的显示159

7.1控制字体的显示159

7.1.1字体选择属性font-family159

一个使用字体选择属性的实例159

7.1.2字体颜色属性color160

一个使用字体颜色属性的实例161

7.1.3字体大小属性font-size162

一个使用字体大小属性的实例162

7.1.4字体样式属性font-style164

一个使用字体样式属性的实例164

7.1.5字体加粗属性font-weight166

一个使用字体加粗属性的实例166

7.1.6字体修饰属性text-decoration168

一个使用字体修饰属性的实例169

7.1.7字体下划线位置属性text-underline-position170

一个使用字体下划线位置属性的实例170

7.1.8小型大写字母属性font-variant171

一个使用小型大写字母属性的实例171

7.1.9转换大小写属性text-transform172

一个使用转换大小写属性的实例173

7.1.10字母间隔属性letter-spacing174

一个使用字母间隔属性的实例174

7.1.11单词间隔属性word-spacing176

一个使用单词间隔属性的实例176

7.1.12行高属性line-height177

一个使用行高属性的实例177

7.1.13字体综合属性font178

一个使用字体综合属性的实例179

7.2控制文本的显示180

7.2.1文本缩进属性text-indent180

一个使用文本缩进属性的实例180

7.2.2文本空白属性white-space181

一个使用文本空白属性的实例181

7.2.3文本溢出属性text-overflow183

一个使用文本溢出属性的实例183

7.2.4水平对齐属性text-align184

一个使用水平对齐属性的实例184

7.2.5垂直对齐属性vertical-align186

一个使用垂直对齐属性的实例186

7.2.6文本流向属性layout-flow188

一个使用文本流向属性的实例188

7.2.7文本流向属性与滚动条190

一个使用文本流向属性同时显示滚动条的实例190

7.2.8文本方向属性direction191

一个使用文本方向属性的实例191

7.2.9文本方向属性与滚动条192

一个使用文本方向属性同时显示滚动条的实例192

7.2.10文本排序属性unicode-bidi194

一个使用文本排序属性的实例194

7.2.11词内换行属性word-break195

一个使用词内换行属性的实例195

7.2.12自动折行属性word-wrap197

一个使用自动折行属性的实例197

7.2.13自动折行属性与词内换行属性的关系198

一个同时使用自动折行属性与词内换行属性的实例198

第8章 CSS控制列表元素的显示201

8.1控制列表元素的显示201

8.1.1列表符号属性list-style-type201

一个使用列表符号属性的实例202

8.1.2列表符号的混用204

一个混用列表符号的实例204

8.1.3列表图像属性list-style-image205

一个使用列表图像属性的实例205

8.1.4列表图像的显示位置206

一个显示列表图像位置的实例206

8.1.5标记位置属性list-style-position207

一个使用标记位置属性的实例207

8.1.6标记位置属性与列表高度209

一个关于标记位置属性与列表高度的实例209

8.1.7列表综合属性list-style210

一个使用列表综合属性的实例210

8.2列表元素的使用和嵌套211

8.2.1列表元素的默认属性值211

一个关于列表元素默认显示效果的实例211

8.2.2统一列表元素的边界和补白213

一个统一列表元素显示效果的实例213

8.2.3嵌套列表的默认效果214

一个使用嵌套列表的实例214

8.2.4更改默认的嵌套效果215

一个更改默认的显示标记的实例216

一个更改默认缩进格式的实例217

第9章 CSS控制表格元素的显示219

9.1控制表格元素的显示219

9.1.1表格边框合并属性border-collapse219

一个使用表格边框合并属性的实例219

9.1.2表格边框间距属性border-spacing221

一个使用表格边框间距属性的实例221

9.1.3表格标题位置属性caption-side223

一个使用表格标题位置属性的实例223

9.1.4表格布局属性table-layout225

一个使用表格布局属性的实例225

9.2单元格的制约关系228

9.2.1确定单行或列的宽度或高度228

一个同行或同列中存在不同高度或宽度的实例228

9.2.2确定多行或多列的宽度或高度230

一个确定多行或多列高度、宽度最终效果的实例230

9.2.3单元格与嵌套的＜div＞元素232

一个使用表格单元格和嵌套＜div＞元素的实例232

第10章 CSS控制其他元素的显示235

10.1控制滚动条的显示235

10.1.1滚动条3d亮边框颜色属性scrollbar-3dlight-color235

一个使用滚动条3d亮边框颜色属性的实例235

10.1.2滚动条亮边框颜色属性scrollbar-highlight-color236

一个使用滚动条亮边框颜色属性的实例237

10.1.3滚动条滑块颜色属性scrollbar-face-color238

一个使用滚动条滑块颜色属性的实例238

10.1.4滚动条箭头颜色属性scrollbar-arrow-color239

一个使用滚动条箭头颜色属性的实例239

10.1.5滚动条阴影颜色属性scrollbar-shadow-color240

一个使用滚动条阴影颜色属性的实例240

10.1.6滚动条暗部阴影颜色属性scrollbar-darkshadow-color241

一个使用滚动条暗部阴影颜色属性的实例241

10.1.7滚动条拖动区颜色属性scrollbar-track-color242

一个使用滚动条拖动区颜色属性的实例243

10.1.8滚动条基准色属性scrollbar-base-color244

一个使用滚动条基准色属性的实例244

10.1.9定义滚动条的颜色245

一个定义滚动条颜色的实例245

10.2控制光标的显示246

一个使用光标控制属性的实例247

10.3控制打印的显示249

10.3.1对象后插入分页符号属性page-break-after249

一个使用对象后插入分页符号属性的实例250

10.3.2对象前插入分页符号属性page-break-before250

一个使用对象前插入分页符号属性的实例251

10.4控制元素的缩放252

一个关于元素缩放属性的实例252

10.5 控制链接的显示254

10.5.1定义链接未访问的显示效果254

一个使用：link伪类的实例254

10.5.2定义链接鼠标悬停的显示效果255

一个使用：hover伪类的实例255

10.5.3定义链接激活的显示效果256

一个使用：active伪类的实例256

10.5.4定义链接访问后的显示效果257

一个使用：visited伪类的实例257

10.5.5定义链接效果的顺序258

一个使用4个伪类同时定义链接效果的实例258

10.6添加辅助内容260

一个关于添加辅助内容属性的实例261

第11章 CSS滤镜263

11.1 CSS静态滤镜263

11.1.1颜色渐变滤镜Gradient263

一个使用颜色渐变滤镜的实例264

11.1.2插入图片滤镜AlphaImageLoader265

一个使用插入图片滤镜的实例266

11.1.3透明度滤镜Alpha267

一个使用不透明度滤镜的实例268

11.1.4模糊滤镜Blur270

一个使用模糊滤镜的实例271

11.1.5色彩处理滤镜BasicImage272

一个使用色彩处理滤镜的实例272

11.1.6颜色滤镜Chroma274

一个使用颜色滤镜的实例275

11.1.7阴影滤镜Shadow276

一个使用阴影滤镜的实例276

11.1.8下拉阴影滤镜DropShadow278

一个使用下拉阴影滤镜的实例278

11.1.9浮雕滤镜Emboss279

一个使用浮雕滤镜的实例279

11.1.10浮雕纹理滤镜Engrave280

一个使用浮雕纹理滤镜的实例281

11.1.11发光滤镜Glow282

一个使用发光滤镜的实例282

11.1.12遮罩滤镜MaskFilter283

一个使用遮罩滤镜的实例284

11.1.13矩阵滤镜Matrix285

一个使用矩阵滤镜的实例286

11.1.14运动模糊滤镜MotionBlur288

一个使用运动模糊滤镜的实例288

11.1.15波浪滤镜Wave289

一个使用波浪滤镜的实例290

11.1.16灰度滤镜Gray292

一个使用灰度滤镜的实例292

11.2 CSS动态滤镜293

11.2.1滑动门滤镜Barn293

一个使用滑动门滤镜的实例294

11.2.2渐隐滤镜Fade295

一个使用渐隐滤镜的实例296

11.2.3百叶窗滤镜Blinds297

一个使用百叶窗滤镜的实例298

11.2.4对角扩张滤镜Inset299

一个使用对角扩张滤镜的实例300

11.2.5放射状擦除滤镜（RadialWipe）301

一个使用放射状擦除滤镜的实例302

11.2.6抽离滤镜Slide303

一个使用抽离滤镜的实例304

11.2.7锯齿覆盖滤镜Strips305

一个使用锯齿覆盖滤镜的实例306

11.2.8擦地板滤镜Zigzag307

一个使用擦地板滤镜的实例308

11.2.9风车滤镜Wheel309

一个使用风车滤镜的实例310

11.2.10随机线条滤镜RandomBars311

一个使用随机线条滤镜的实例312

11.2.11国际象棋滤镜CheckerBoard313

一个使用国际象棋滤镜的实例314

11.2.12滚动渐隐滤镜GradientWipe315

一个使用滚动渐隐滤镜的实例316

11.2.13特殊形状滤镜Iris317

一个使用特殊形状滤镜的实例318

11.2.14随机溶解滤镜RandomDissolve319

一个使用随机溶解滤镜的实例320

11.2.15 矩形螺旋滤镜Spiral321

一个使用矩形螺旋滤镜的实例322

11.2.16伸缩变形滤镜Stretch323

一个使用伸缩变形滤镜的实例324

11.2.17彩色拼缀滤镜Pixelate325

一个使用彩色拼缀滤镜的实例326

11.2.18动态综合滤镜RevealTrans327

一个使用动态综合滤镜的实例328

第4篇 CSS页面布局的方法333

第12章 居中问题333

12.1水平居中333

12.1.1使用水平居中属性定义水平居中333

一个使用水平居中属性定义水平居中的实例333

12.1.2使用边界属性定义水平居中335

一个使用边界属性定义水平居中的实例335

12.2垂直居中337

12.2.1使用垂直居中属性存在的问题337

一个使用垂直居中属性定义垂直居中的实例337

12.2.2使用边界属性定义垂直居中存在的问题338

一个使用边界属性定义垂直居中的实例338

12.2.3容器和内容大小固定的垂直居中340

一个使用父元素的补白属性定义垂直居中的实例340

一个使用子元素的边界属性定义垂直居中的实例341

一个使用子元素的定位属性定义垂直居中的实例342

12.2.4内容大小固定的垂直居中343

一个使用子元素的定位属性和边界属性定义垂直居中的实例343

12.2.5容器大小固定的垂直居中344

一个使用子元素的定位属性和边界属性定义垂直居中的实例345

12.2.6容器和内容大小均不固定的垂直居中346

一个使用子元素的定位属性和边界属性定义垂直居中的实例347

第13章 CSS布局构架的建立349

13.1页面构架的解析349

13.1.1页面板块的划分349

13.1.2页面板块位置的规划351

13.2页面板块位置的确定351

13.2.1制作页面XHTML部分352

13.2.2定义＜body＞元素的CSS样式352

13.2.3确定main部分的位置353

13.2.4确定header部分的位置353

13.2.5确定nav部分的位置354

13.2.6确定content部分的位置354

13.2.7确定sidebar部分的位置355

13.2.8确定footer部分的位置356

13.2.9关于确定板块位置属性的一点说明357

13.3分栏布局的实现357

13.3.1横向分栏的实现原理和方法357

一个实现横向分栏的实例357

13.3.2纵向分栏的原理359

13.3.3绝对定位纵向分栏的实现方法359

一个使用绝对定位实现纵向分栏的实例360

13.3.4浮动属性纵向分栏的实现方法362

一个使用浮动属性实现纵向分栏的实例362

13.3.5分栏中的宽度问题365

一个在分栏结构中，子元素的宽度之和大于父元素宽度的实例365

13.3.6分栏中的高度问题367

一个在分栏结构中定义元素高度的实例367

13.3.7分栏中的浮动问题370

一个在分栏结构中使用浮动元素的实例370

13.3.8制作三分栏结构的页面372

一个三分栏结构页面的实际制作实例372

第14章 CSS布局中的自适应问题375

14.1水平自适应375

14.1.1使用百分比值的水平自适应375

使用百分比值定义水平自适应的实例375

14.1.2使用绝对定位的水平自适应376

一个使用绝对定位定义水平自适应的实例377

14.2垂直自适应378

14.2.1独立元素的垂直自适应378

一个独立元素垂直自适应的实例378

14.2.2其中一列内容固定的两列垂直自适应380

一个背景不能自适应的实例380

14.2.3两列内容都不固定的垂直自适应383

一个两列内容都不固定的自适应实例383

14.2.4三列中两列固定的垂直自适应385

一个实现三列中右两列固定的垂直自适应实例385

14.2.5三列中一列固定的垂直自适应386

一个三列中一列固定的垂直自适应实例386

14.2.6三列内容均不固定的垂直自适应388

一个实现三列内容均不固定的垂直自适应的实例388

14.2.7利用背景图片的垂直自适应389

一个利用背景图片实现垂直自适应的实例389

第15章 CSS布局中的兼容问题391

15.1兼容问题的由来391

15.1.1常用的浏览器介绍391

15.1.2浏览器显示的差异392

一个关于浏览器显示差异的实例392

15.2兼容问题的解决393

15.2.1使用兼容的属性和结构393

解决浏览器兼容问题的实例393

15.2.2使用CSS hack394

15.3元素嵌套的兼容问题395

15.3.1嵌套兼容问题的显示效果395

一个嵌套元素中子元素超出父元素的实例395

15.3.2嵌套兼容问题的解决方法396

15.4浮动元素的兼容问题397

15.4.1浮动子元素兼容问题的显示效果397

一个嵌套元素中子元素为浮动元素的实例397

15.4.2浮动子元素兼容问题的解决方法398

15.5子元素负边界的兼容问题400

15.5.1子元素负边界兼容问题的显示效果400

一个子元素中使用负边界的实例400

15.5.2子元素负边界兼容问题的解决方法401

15.6显示距离的兼容问题402

15.6.1只定义子元素边界的显示效果402

一个只定义子元素边界的实例403

一个在父元素中定义了大小，同时在子元素中定义了边界的实例404

15.6.2同时定义边界和补白的显不效果405

一个同时定义边界和补白属性的实例405

15.6.3显示距离兼容问题的解决方法407

15.7兼容IE 7.0的问题407

15.7.1使用CSS hack的问题407

一个在IE6.0、 IE7.0中无法兼容的实例407

15.7.2嵌套元素的差异408

第5篇 CSS布局实战411

第16章 在Dreamweaver中使用CSS411

16.1 Dreamweaver简介411

16.1.1 Dreamweaver的界面与菜单411

16.1.2 CSS面板412

16.2制作独立的CSS文件413

16.2.1创建和保存CSS文件413

16.2.2使用CSS面板添加样式414

16.2.3使用CSS面板编辑样式415

16.2.4使用CSS面板添加样式的问题416

16.2.5在Dreamweaver中直接编写CSS416

16.3将CSS文件应用到网页中417

16.3.1建立和规划站点的文件417

16.3.2新建站点418

16.3.3新建XHTML文件并添加内容420

16.3.4在XHTML中使用样式421

第17章 个人博客页面的制作423

17.1效果图的规划和切分423

17.1.1页面结构的规划423

17.1.2图片内容的制作424

17.2规划并建立站点425

17.3制作页面头部内容426

17.3.1建立和关联CSS文件426

17.3.2修改页面头部标签426

17.3.3定义页面的综合属性427

17.3.4定义常见元素的初始属性429

17.3.5制作页面头部的结构431

17.3.6定义页面头部两个父元素的样式431

17.3.7定义页面头部内容的样式433

17.4制作页面导航内容436

17.4.1制作页面导航的结构437

17.4.2定义页面导航的样式437

17.5制作页面主体内容442

17.5.1制作页面主体的结构442

17.5.2定义页面主体内容的样式443

17.6制作日志内容446

17.6.1制作日志内容的结构446

17.6.2定义日志内容的样式446

17.7制作侧栏内容449

17.7.1制作侧栏的结构449

17.7.2定义侧栏的通用样式451

17.7.3定义侧栏的独立样式454

17.8制作页面底部内容456

17.8.1制作页面底部内容的结构456

17.8.2定义页面底部内容的样式457