CSS+DIV网页布局技术详解2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载

CSS+DIV网页布局技术详解PDF格式电子书版下载

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

第1篇 CSS布局基础知识2

第1章 Web标准布局的本质2

1.1为什么要建立Web标准2

1.1.1建立Web标准的目的2

1.1.2使用Web标准的好处2

1.2什么是Web标准3

1.3结构和表现3

1.4两种思考方式5

1.5 Web标准的前景7

1.6 Web标准网站欣赏7

第2章 XHTML书写规范10

2.1为什么要使用XHTML10

2.2什么是XHTML10

2.3 XHTML语法基础12

2.3.1 XHTML页面结构12

2.3.2元素的书写格式和属性13

2.3.3各种元素的属性14

2.4 XHTML代码规范18

第3章 CSS基础与书写规范20

3.1 CSS的基础知识20

3.1.1什么是CSS20

3.1.2 CSS的语法21

3.1.3选择符22

3.1.4属性23

3.1.5伪类和伪元素23

3.1.6颜色单位24

3.1.7长度单位24

3.1.8百分比值25

3.1.9 URL26

3.1.10默认值26

3.1.11继承性26

3.2 CSS编码规范27

3.2.1 CSS基本书写规范27

3.2.2 CSS命名参考28

3.2.3 CSS样式表书写顺序29

3.3怎样更好地应用CSS29

3.3.1块元素和内联元素29

3.3.2 CSS的一些实用技巧30

3.3.3怎样调试CSS30

3.4关于CSS的学习33

第2篇 CSS页面布局技巧36

第4章 网页头部元素的详细定义36

4.1 DOCTYPE的选择36

4.1.1什么是DOCTYPE36

4.1.2选择什么样的DOCTYPE36

4.2名字空间37

4.3编码问题37

4.4 meta标签38

4.5 CSS的调用39

4.5.1调用样式表的几种方法39

4.5.2应用样式的优先级41

4.6网页头部实例45

第5章 CSS基本布局属性47

5.1页面的制作流程和整体分析47

5.2元素定位基础知识48

5.2.1块元素的默认排列48

5.2.2内联元素的默认排列49

5.2.3块元素和内联元素的混合默认排列49

5.2.4使用浮动属性进行定位50

5.3定位属性详解51

5.3.1定位模式51

5.3.2边偏移51

5.3.3层叠定位属性51

5.4定位属性的应用52

5.4.1绝对定位52

5.4.2相对定位54

5.4.3固定定位55

5.4.4层叠定位属性的使用55

5.5页面背景的设定57

5.5.1使用背景色定义背景57

5.5.2背景图片的默认使用57

5.5.3背景图片的重复58

5.5.4背景图片的位置59

5.5.5背景图片的附件61

5.6背景的综合应用62

5.6.1背景颜色和背景图片的层叠62

5.6.2背景图片的重复和位置的关系63

5.6.3背景属性在内联元素中的使用64

5.6.4背景属性的缩写64

5.6.5页面文本的样式65

5.6.6链接的样式66

5.7布局的基础知识67

5.7.1页面布局的步骤67

5.7.2使用id还是class67

5.7.3控制内容显示的display属性68

5.7.4控制内容显示的visibility属性69

5.7.5使用text-align属性的水平居中70

5.7.6使用margin属性的水平居中71

5.8浮动属性72

5.8.1浮动属性详解72

5.8.2相邻的浮动元素和固定元素72

5.8.3相邻的两个浮动元素74

5.8.4相邻的多个浮动元素75

5.9关于ul和li的样式详解75

5.9.1使用list-style-type属性76

5.9.2使用list-style-position属性76

5.9.3使用list-style-image属性77

5.9.4使用list-style属性78

5.10一个纵向导航菜单的制作78

5.10.1菜单原理78

5.10.2制作菜单内容和结构部分79

5.10.3CSS代码编写79

5.11一个横向导航菜单的制作83

5.11.1菜单原理83

5.11.2制作菜单内容和结构部分83

5.11.3CSS代码编写84

5.12清除浮动87

5.12.1清除浮动属性详解87

5.12.2清除浮动属性的使用88

5.13页面header部分的制作90

5.13.1效果图分析（1）90

5.13.2第一次切图90

5.13.3第二次切图91

5.13.4制作前的准备工作92

5.13.5效果图分析（2）93

5.13.6页面结构的制作93

5.13.7基础样式的定义94

5.13.8banner部分样式的定义95

5.13.9menu部分样式的定义96

5.13.10页面全部的CSS代码97

第6章 CSS容器属性99

6.1什么是盒模型99

6.1.1内容与盒模型99

6.1.2背景与盒模型100

6.2补白属性100

6.2.1补白属性详解101

6.2.2百分比值的使用102

6.2.3单侧的补白属性103

6.2.4补白属性的简写104

6.3边框属性106

6.3.1边框样式106

6.3.2边框宽度107

6.3.3边框颜色108

6.3.4边框的综合定义110

6.3.5单侧边框的综合定义111

6.3.6一个有用的表格边框属性112

6.3.7应用边框属性的实例112

6.4边界属性113

6.4.1整体边界属性114

6.4.2单侧的边界和简写115

6.4.3垂直方向的边界重叠116

6.4.4水平方向的边界116

6.4.5负的边界值117

6.4.6在内联元素中使用边界属性118

6.5父元素与子元素之间的距离119

6.5.1子元素边界属性值为0119

6.5.2父元素的补白属性为0120

6.5.3父元素含有padding属性同时子元素含有margin属性121

6.6嵌套的元素中使用负边界122

6.7固定大小的问题123

6.7.1盒模型大小的计算123

6.7.2使用overflow属性固定长度和宽度124

6.8自适应问题125

6.8.1什么叫自适应125

6.8.2独立元素的高度自适应125

6.8.3利用背景色的两列自适应127

6.8.4左右均能自适应的两列布局129

6.8.5三列布局中有两列内容固定131

6.8.6三列布局中有一列内容固定133

6.8.7三列布局中高度都不确定的情况136

6.8.8水平自适应的原理138

6.9制作一个简单的页面框架140

6.9.1框架结构分析140

6.9.2页面结构的制作141

6.9.3定义CSS代码141

6.9.4页面最终效果及注意的问题145

6.10header部分的进一步完善146

6.10.1标题及签名部分的完善146

6.10.2导航部分的完善147

6.10.3调整后的页面效果149

6.11页面主体结构的制作149

6.11.1效果图分析149

6.11.2主体大表格和内容部分150

6.11.3右侧分类导航部分152

6.12页面主体部分CSS的编写154

6.12.1 3个主要结构的样式154

6.12.2内容部分的样式155

6.12.3导航列表部分的CSS编写157

6.12.4主体部分最后的显示效果和CSS代码160

第7章 CSS定义文本属性163

7.1文本的缩进和对齐163

7.1.1段首缩进163

7.1.2段首字符的下沉与大写164

7.1.3文本的对齐165

7.1.4图文混排166

7.2行高与间隔167

7.2.1行高属性详解167

7.2.2利用行高属性使文本垂直居中170

7.2.3间隔与空白171

7.2.4文本的转换173

7.3水平和垂直居中问题174

7.3.1已知容器大小和内容大小时的水平和垂直居中问题174

7.3.2未知容器大小、已知内容大小时的水平和垂直居中问题175

7.3.3已知容器大小、未知内容大小时的水平和垂直居中问题176

7.3.4容器大小及内容大小均未知时的水平和垂直居中问题178

7.3.5修饰图片的水平和垂直居中问题180

7.4字体的综合属性180

7.4.1字体的选择180

7.4.2字体的大小181

7.4.3字体的加粗183

7.4.4字体的样式184

7.4.5字体的变形185

7.4.6字体属性的简写185

7.5文本的修饰和链接186

7.5.1文本的修饰187

7.5.2链接属性详解188

7.5.3使用链接的顺序190

7.5.4链接的继承性191

7.5.5 cursor属性192

7.6完成页面header部分的制作193

7.6.1标题和签名部分193

7.6.2 menu导航部分194

7.7 main部分的完善197

7.7.1内容部分的完善197

7.7.2分类导航部分的完善198

7.8 footer部分的制作202

7.8.1效果图分析202

7.8.2结构部分的制作202

7.8.3页面样式的添加202

7.9页面在IE浏览器中的显示效果205

第8章 元素的修饰和CSS常见应用206

8.1图片的修饰206

8.1.1网页中常用的图片格式206

8.1.2需要使用图片的情况207

8.1.3作为背景的图片修饰207

8.1.4修饰内容图片207

8.2使用图片制作简单圆角框209

8.2.1单色或者单线圆角框自适应高度209

8.2.2单色或者单线圆角框自适应宽度211

8.2.3单色或者单线圆角框完全自适应212

8.3复杂圆角框的制作214

8.3.1自适应高度215

8.3.2自适应宽度216

8.3.3完全自适应216

8.4用CSS制作代替图片的圆角219

8.4.1 CSS圆角实现原理219

8.4.2 CSS圆角的制作220

8.5表单的修饰223

8.5.1表单的分类223

8.5.2文本域的修饰224

8.5.3文本区域的修饰225

8.5.4按钮的修饰226

8.5.5复选框的修饰226

8.5.6单选按钮的修饰226

8.5.7列表的修饰227

8.5.8文件域的修饰227

8.5.9图像域的修饰228

8.6登录框的制作228

8.6.1效果图分析228

8.6.2页面结构部分制作229

8.6.3 CSS部分的编写229

8.7滚动条的修饰232

8.7.1滚动条的显示232

8.7.2滚动条的修饰234

8.8表格的修饰235

8.8.1控制表格的边线和背景235

8.8.2表格的高度和宽度236

8.8.3表格的居中问题236

8.8.4表格的内容与高度237

8.9分隔线的修饰238

8.10关于导航栏的制作和修饰239

8.10.1纵向导航栏的修饰240

8.10.2制作链接样式241

8.10.3制作鼠标悬停效果241

8.10.4横向导航栏244

8.11下拉菜单的制作244

8.11.1下拉菜单的显示效果244

8.11.2菜单的原理245

8.11.3制作菜单结构部分245

8.11.4编写主导航部分的样式246

8.11.5编写子栏目的样式247

8.11.6隐藏子栏目247

8.11.7制作显示效果的样式248

8.11.8使用的脚本代码248

8.12遮盖的问题249

第3篇 整站的CSS定义技巧252

第9章 DIV+CSS布局基础252

9.1初识DIV+CSS布局的流程252

9.2了解盒模型254

9.2.1div标签的盒模型示例254

9.2.2基本盒模型258

9.2.3边距258

9.2.4补白262

9.2.5边框264

9.3页面元素的布局268

9.3.1块级元素与行内元素268

9.3.2 CSS布局方式：常规流270

第10章 关于整站样式表的分析272

10.1站点页面的分析272

10.1.1规划样式表的原则272

10.1.2规划样式表的方法272

10.1.3实例的分析273

10.2站点二级页面的制作274

10.2.1日志内容页面结构的规划274

10.2.2日志内容页面CSS部分的制作275

10.2.3日志列表页的制作278

第11章 关于标准的校验281

11.1为什么要进行标准的校验281

11.2怎样进行标准的校验281

11.2.1 XHTML校验的方法281

11.2.2 CSS校验的方法284

11.2.3 XHTML校验常见错误285

11.2.4 CSS校验常见错误285

11.3实例页面的校验285

11.3.1实例首页的校验286

11.3.2一个二级页面的校验287

第4篇 DIV+CSS布局实例290

第12章 DIV+CSS页面布局设计290

12.1页面布局的准备290

12.1.1效果图的制作290

12.1.2框架的规划291

12.1.3布局图片的分离与制作295

12.2页面的制作296

12.2.1框架代码的编写296

12.2.2内容代码的编写298

12.2.3 CSS代码的编写299

第13章 新闻系统的页面布局304

13.1新闻系统的页面分析304

13.2新闻系统首页的设计304

13.2.1效果图的设计304

13.2.2框架的规划305

13.2.3布局图片的分离与制作308

13.2.4框架代码的编写309

13.2.5内容代码的编写310

13.2.6 CSS代码的编写311

13.2.7预览效果及微调315

13.3新闻系统栏目页面的设计315

13.3.1效果图的设计315

13.3.2框架的规划315

13.3.3布局图片的分离与制作320

13.3.4框架代码的编写320

13.3.5内容代码的编写322

13.3.6 CSS代码的编写323

13.3.7预览效果及微调323

13.4新闻系统列表页的设计324

13.4.1效果图的设计324

13.4.2框架的规划325

13.4.3布局图片的分离与制作325

13.4.4框架代码的编写326

13.4.5内容代码的编写326

13.4.6 CSS代码的编写327

13.4.7预览效果及微调327

13.5新闻系统内容页的设计327

13.5.1效果图的设计327

13.5.2框架的规划327

13.5.3布局图片的分离与制作329

13.5.4框架代码的编写329

13.5.5内容代码的编写330

13.5.6 CSS代码的编写330

13.5.7预览效果及微调330

第14章 微博系统的页面布局331

14.1微博系统的页面分析331

14.2微博系统个人首页的设计331

14.2.1效果图的设计331

14.2.2框架的规划332

14.2.3布局图片的分离与制作335

14.2.4框架代码的编写336

14.2.5内容代码的编写339

14.2.6 CSS代码的编写340

14.2.7预览效果及微调342

14.3微博系统相册列表页的设计343

14.3.1效果图的设计343

14.3.2框架的规划344

14.3.3布局图片的分离与制作344

14.3.4框架代码的编写344

14.3.5 CSS代码的编写345

14.3.6预览效果及微调346

14.4微博系统相册幻灯页的设计346

14.4.1效果图的设计346

14.4.2源代码分析346

14.4.3布局图片的分离与制作348

14.5微博系统日志详情页的设计349

14.5.1效果图的设计349

14.5.2框架的规划349

14.5.3框架代码的编写351

14.5.4 CSS代码的编写352

14.5.5预览效果及微调353

14.6微博系统微频道（广场）的设计353

14.6.1效果图的设计353

14.6.2框架的规划353

14.6.3框架代码的编写354

14.6.4内容代码的编写356

14.6.5 CSS代码的编写356

14.6.6预览效果及微调358

第15章 论坛系统的页面布局359

15.1论坛系统的页面分析359

15.2论坛系统首页的设计359

15.2.1效果图的设计359

15.2.2框架的规划359

15.2.3布局图片的分离与制作363

15.2.4框架代码的编写363

15.2.5内容代码的编写365

15.2.6 CSS代码的编写366

15.2.7预览效果及微调369

15.3论坛系统栏目页的设计369

15.3.1效果图的设计369

15.3.2框架的规划369

15.3.3布局图片的分离与制作371

15.3.4框架代码的编写371

15.3.5内容代码的编写372

15.3.6 CSS代码的编写373

15.3.7预览效果及微调374

15.4论坛系统版块页的设计374

15.4.1效果图的设计374

15.4.2框架的规划375

15.4.3布局图片的分离与制作377

15.4.4框架代码的编写377

15.4.5内容代码的编写379

15.4.6 CSS代码的编写380

15.4.7预览效果及微调381

15.5论坛系统内容页的设计381

15.5.1效果图的设计381

15.5.2框架的规划383

15.5.3布局图片的分离与制作384

15.5.4框架代码的编写384

15.5.5内容代码的编写386

15.5.6 CSS代码的编写387

15.5.7预览效果及微调388

第16章 商城系统的页面布局389

16.1商城系统的页面分析389

16.2商城系统首页的设计389

16.2.1效果图的设计389

16.2.2框架的规划389

16.2.3布局图片的分离与制作398

16.2.4框架代码的编写399

16.2.5内容代码的编写405

16.2.6 CSS代码的编写408

16.2.7预览效果及微调411

附录A CSS标记速查412

A.1字体属性412

A.1.1设置字体——font-family412

A.1.2设置字号——font-size412

A.1.3字体风格——font-style412

A.1.4设置加粗字体——font-weight413

A.1.5小型的大写字母——font-variant413

A.1.6复合属性：字体——font413

A.2颜色及背景属性413

A.2.1颜色属性设置——color413

A.2.2背景颜色——background-color414

A.2.3背景图像——background-image414

A.2.4背景重复——background-repeat415

A.2.5背景附件——background-attachment415

A.2.6背景位置——-background-position415

A.2.7复合属性：背景——background415

A.3文本属性416

A.3.1单词间隔——word-spacing416

A.3.2字符间隔——letter-spacing416

A.3.3文字修饰——text-decoration416

A.3.4纵向排列——vertical-align416

A.3.5文本转换——text-transform417

A.3.6文本排列——text-align417

A.3.7文本缩进——text-indent417

A.3.8文本行高——line-height417

A.3.9处理空白——white-space417

A.3.10文本反排——unicode-bidi与direction418

A.4边距与填充属性418

A.4.1顶端边距——margin-top418

A.4.2其他边距——margin-bottom、margin-left、margin-right419

A.4.3复合属性：边距——margin419

A.4.4顶端填充——padding-top419

A.4.5其他填充——padding-bottom、padding-left、padding-right419

A.4.6复合属性：填充——padding419

A.5边框属性419

A.5.1边框样式——border-style420

A.5.2边框宽度——border-width421

A.5.3边框颜色——border-color421

A.5.4边框属性——border421

A.6定位及尺寸属性422

A.6.1定位方式——position422

A.6.2元素位置——top、right、bottom、left422

A.6.3层叠顺序——z-index423

A.6.4浮动属性——float423

A.6.5清除属性——clear423

A.6.6可视区域——clip423

A.6.7设定大小——width、height423

A.6.8超出范围——overflow424

A.6.9可见属性——visibility424

A.7列表属性424

A.7.1列表符号——list-style-type424

A.7.2图像符号——list-style-image425

A.7.3列表缩进——list-style-position425

A.7.4复合属性：列表——list-style425

A.8光标属性——cursor425

A.9滤镜属性426

A.9.1不透明度——alpha426

A.9.2动感模糊——blur426

A.9.3对颜色进行透明处理——chroma427

A.9.4设置阴影——dropShadow427

A.9.5对象的翻转——flipH、fliPV427

A.9.6发光效果——glow427

A.9.7灰度处理——gray427

A.9.8反相——invert428

A.9.9X光片效果——Xray428

A.9.10遮罩效果——mask428

A.9.11波形滤镜——wave428