网站开发非常之旅 CSS标准网页布局开发指南2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载

网站开发非常之旅 CSS标准网页布局开发指南PDF格式电子书版下载

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

第1篇 CSS布局基础知识3

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

1.1 为什么要建立Web标准4

1.1.1 建立Web标准的目的4

1.1.2 使用Web标准的好处4

1.2 什么是Web标准5

1.3 内容、结构和表现5

1.4 两种思考方式7

1.5 Web标准的前景9

1.6 Web标准网站欣赏10

第2章 XHTML书写规范13

2.1 为什么要使用XHTML14

2.2 什么是XHTML14

2.3 XHTML语法基础16

2.3.1 XHTML页面结构16

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

2.3.3 各种元素的属性18

2.4 XHTML代码规范22

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

3.1 CSS的基础知识26

3.1.1 什么是CSS26

3.1.2 CSS的语法27

3.1.3 选择符27

3.1.4 属性29

3.1.5 伪类和伪元素29

3.1.6 颜色单位29

3.1.7 长度单位30

3.1.8 百分比值31

3.1.9 URL31

3.1.10 默认值32

3.1.11 继承性32

3.2 CSS编码规范33

3.2.1 CSS基本书写规范33

3.2.2 CSS命名参考34

3.2.3 CSS样式表书写顺序35

3.3 怎样更好地应用CSS35

3.3.1 块元素和内联元素35

3.3.2 一些CSS的实用技巧35

3.3.3 怎样调试CSS36

3.4 关于CSS的学习38

第2篇 CSS页面布局技巧43

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

4.1 DOCTYPE的选择44

4.1.1 什么是DOCTYPE44

4.1.2 选择什么样的DOCTYPE44

4.2 名字空间45

4.3 编码问题45

4.4 meta标签45

4.5 CSS的调用46

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

4.5.2 应用样式的优先级49

4.6 网页头部实例52

第5章 CSS基本布局属性55

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

5.2 元素定位基础知识57

5.2.1 块元素的默认排列57

5.2.2 内联元素的默认排列58

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

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

5.3 定位属性详解60

5.3.1 定位模式60

5.3.2 边偏移60

5.3.3 层叠定位属性60

5.4 定位属性的应用61

5.4.1 绝对定位61

5.4.2 相对定位63

5.4.3 固定定位65

5.4.4 层叠定位属性的使用65

5.5 页面的背景设定66

5.5.1 使用背景色定义背景66

5.5.2 背景图片默认使用66

5.5.3 背景图片的重复67

5.5.4 背景图片的位置68

5.5.5 背景图片的附件71

5.6 背景的综合应用72

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

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

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

5.6.4 背景属性的缩写74

5.6.5 页面文本的样式75

5.6.6 链接的样式75

5.7 布局的基础76

5.7.1 布局页面的步骤76

5.7.2 使用ID还是Class77

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

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

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

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

5.8 浮动属性82

5.8.1 浮动属性详解82

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

5.8.3 相邻的两个浮动元素83

5.8.4 相邻的多个浮动元素84

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

5.9.1 使用list-style-type属性85

5.9.2 使用list-style-position属性86

5.9.3 使用list-style-image属性87

5.9.4 list-style属性87

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

5.10.1 菜单原理88

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

5.10.3 CSS代码编写89

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

5.11.1 菜单原理93

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

5.11.3 CSS代码编写94

5.12 清除浮动97

5.12.1 清除浮动属性详解97

5.12.2 清除浮动属性的使用99

5.13 页面header部分的制作100

5.13.1 效果图的分析100

5.13.2 第一次切图101

5.13.3 第二次切图102

5.13.4 制作前的准备工作103

5.13.5 分析效果图104

5.13.6 页面结构的制作105

5.13.7 基础样式的定义105

5.13.8 banner部分样式的定义106

5.13.9 menu部分样式的定义107

5.13.10 页面全部的CSS代码109

第6章 CSS容器属性111

6.1 什么是盒模型112

6.1.1 内容与盒模型112

6.1.2 背景与盒模型113

6.2 补白属性113

6.2.1 补白属性详解113

6.2.2 百分比值的使用115

6.2.3 单侧的补白属性117

6.2.4 补白属性的简写117

6.3 边框属性119

6.3.1 边框样式119

6.3.2 边框宽度121

6.3.3 边框颜色122

6.3.4 边框的综合定义123

6.3.5 单侧边框的综合定义124

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

6.3.7 应用边框属性的实例126

6.4 边界属性127

6.4.1 边界属性127

6.4.2 单侧的边界和简写128

6.4.3 垂直方向的边界重叠129

6.4.4 水平方向的边界130

6.4.5 负的边界值131

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

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

6.5.1 子元素边界属性值为0133

6.5.2 父元素的补白属性为0134

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

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

6.7 固定大小的问题137

6.7.1 盒模型大小的计算138

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

6.8 自适应问题139

6.8.1 什么叫自适应139

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

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

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

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

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

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

6.8.8 水平自适应的原理153

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

6.9.1 框架结构分析154

6.9.2 页面结构的制作155

6.9.3 定义CSS代码156

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

6.10 header部分的进一步完善161

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

6.10.2 导航部分的完善163

6.10.3 调整后的页面效果164

6.11 页面主体结构的制作165

6.11.1 效果图的分析165

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

6.11.3 右侧分类导航部分167

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

6.12.1 3个主要结构的样式169

6.12.2 内容部分的样式171

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

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

第7章 CSS定义文本属性179

7.1 文本的缩进和对齐180

7.1.1 段首缩进180

7.1.2 段首字符下沉与大写181

7.1.3 文本的对齐181

7.1.4 图文混排183

7.2 行高与间隔184

7.2.1 行高属性详解184

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

7.2.3 间隔与空白188

7.2.4 文本的转换190

7.3 水平和垂直居中问题191

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

7.3.2 未知容器的大小而已知内容大小的水平和垂直居中问题192

7.3.3 已知容器的大小而未知内容大小的水平和垂直居中问题193

7.3.4 容器的大小和内容大小均未知的水平和垂直居中196

7.3.5 修饰图片的水平和垂直居中197

7.4 字体的综合属性198

7.4.1 字体的选择198

7.4.2 字体的大小199

7.4.3 字体的加粗201

7.4.4 字体的样式202

7.4.5 字体的变形202

7.4.6 字体属性的简写203

7.5 文本的修饰和链接204

7.5.1 文本的修饰204

7.5.2 链接属性详解206

7.5.3 使用链接的顺序208

7.5.4 链接的继承性209

7.5.5 cursor属性210

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

7.6.1 标题和签名部分211

7.6.2 menu导航部分213

7.7 main部分的完善215

7.7.1 内容部分的完善215

7.7.2 分类导航部分的完善217

7.8 footer部分的制作220

7.8.1 效果图的分析220

7.8.2 结构部分的制作221

7.8.3 页面样式的添加221

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

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

8.1 图片的修饰226

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

8.1.2 需要使用图片的情况226

8.1.3 作为背景的图片修饰227

8.1.4 修饰内容图片227

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

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

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

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

8.3 复杂圆角框的制作234

8.3.1 自适应高度235

8.3.2 自适应宽度235

8.3.3 完全自适应236

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

8.4.1 CSS圆角实现原理239

8.4.2 CSS圆角的制作240

8.5 表单的修饰243

8.5.1 表单的分类243

8.5.2 文本域的修饰245

8.5.3 文本区域的修饰245

8.5.4 按钮的修饰246

8.5.5 复选框的修饰246

8.5.6 单选按钮的修饰247

8.5.7 列表的修饰247

8.5.8 文件域的修饰247

8.5.9 图像域的修饰248

8.6 登录框的制作248

8.6.1 效果图的分析248

8.6.2 页面结构部分制作249

8.6.3 CSS部分的编写249

8.7 滚条的修饰252

8.7.1 滚条的显示253

8.7.2 滚条的修饰254

8.8 表格的修饰255

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

8.8.2 表格中的高度和宽度256

8.8.3 表格的居中问题257

8.8.4 表格的内容与高度258

8.9 分隔线的修饰258

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

8.10.1 纵向导航栏的修饰260

8.10.2 制作链接样式262

8.10.3 制作鼠标悬停效果262

8.10.4 横向导航栏265

8.11 下拉菜单的制作266

8.11.1 下拉菜单的显示效果266

8.11.2 菜单的原理266

8.11.3 制作菜单结构部分266

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

8.11.5 编写子栏目的样式268

8.11.6 隐藏子栏目269

8.11.7 制作显示效果的样式269

8.11.8 使用的脚本代码270

8.12 遮盖的问题270

第9章 浏览器及兼容问题273

9.1 浏览器介绍274

9.2 要兼容哪些浏览器274

9.3 解决兼容问题的原理275

9.4 !important的使用275

9.5 水平居中的问题276

9.5.1 IE 6.0中的水平居中277

9.5.2 FIREFOX 2.0中的水平居中277

9.5.3 解决方法278

9.6 非浮动内容和容器的问题278

9.6.1 IE 6.0中固定宽度和高度的容器和内容278

9.6.2 FIREFOX 2.0中的容器与内容278

9.6.3 可能出现的问题和解决方法279

9.7 使用：after伪类解决浮动的问题280

9.7.1 IE 6.0中的浮动元素和容器280

9.7.2 FIREFOX 2.0中的浮动元素和容器281

9.7.3 使用：after伪类清除浮动281

9.7.4 并列浮动元素默认宽度的问题282

9.8 嵌套元素宽度和高度叠加的问题283

9.8.1 父元素和子元素均没有定义宽度和高度283

9.8.2 定义子元素的宽度后的效果284

9.8.3 定义父元素宽度后的效果284

9.8.4 解决的方法285

9.9 子元素负边界的问题286

9.9.1 IE 6.0中子元素的负边界287

9.9.2 FIREFOX 2.0中子元素的负边界287

9.9.3 解决方法287

9.10 列表的默认显示问题288

9.10.1 列表的默认显示方式288

9.10.2 默认属性的取消289

9.11 IE 6.0中的问题290

9.11.1 浮动元素的双边距和零边距问题290

9.11.2 浮动列表的问题294

9.11.3 图片的间隙问题295

9.12 IE 7.0中的问题295

9.12.1 内容和容器的显示方式不同296

9.12.2 支持！important的声明296

9.12.3 嵌套的问题297

9.12.4 浮动子元素的问题298

9.12.5 和IE 6.0相同的问题299

9.13 兼容问题实例299

9.13.1 纵向导航菜单的兼容299

9.13.2 横向导航菜单的兼容303

9.13.3 自适应高度的兼容305

9.13.4 实例制作中的兼容问题307

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

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

10.1 站点页面分析316

10.1.1 规划样式表的原则316

10.1.2 规划样式表的方法316

10.1.3 实例分析317

10.2 站点二级页面的制作318

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

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

10.2.3 日志列表页面的制作322

第11章 关于标准的校验325

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

11.2 怎样进行标准的校验326

11.2.1 XHTML校验的方法326

11.2.2 CSS校验的方法328

11.2.3 XHTML校验常见错误329

11.2.4 CSS校验常见错误330

11.3 实例页面的校验330

11.3.1 实例首页的校验330

11.3.2 一个二级页面的校验332

第4篇 实例制作337

第12章 一个英文网站的制作337

12.1 分析效果图338

12.2 切图339

12.2.1 制作首页的切图340

12.2.2 二级页面的切图341

12.3 制作站点首页头部341

12.3.1 首页头部的信息和基础样式的制作342

12.3.2 首页头部的分析343

12.3.3 首页头部结构的制作343

12.3.4 首页头部CSS代码的编写344

12.4 制作首页的主体部分346

12.4.1 分析主体部分效果图346

12.4.2 制作主体左侧部分的结构347

12.4.3 制作主体左侧部分的样式348

12.4.4 制作主体中间部分的结构351

12.4.5 制作主体中间部分的样式352

12.4.6 制作主体右侧部分的结构354

12.4.7 制作主体右侧部分的样式355

12.5 制作首页的底部357

12.6 首页的兼容问题358

12.7 二级页面的制作359

12.7.1 分析二级页面的效果图359

12.7.2 制作二级页面中间内容部分的结构360

12.7.3 制作二级页面中间内容部分的样式361

12.7.4 制作二级页面右侧部分的结构363

12.7.5 制作二级页面右侧部分的样式363

第13章 使用Dreamweaver制作中文网站365

13.1 分析效果图366

13.2 切图367

13.3 制作站点首页头部369

13.3.1 首页头部的信息和基础样式的制作369

13.3.2 首页头部的分析371

13.3.3 首页头部logo和banner部分的制作372

13.3.4 导航列表的制作375

13.4 制作首页的主体部分378

13.4.1 分析主体部分效果图378

13.4.2 制作主体部分的父元素378

13.4.3 制作主体左侧部分的样式379

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

13.4.5 制作今日新闻部分385

13.4.6 制作点拨和时评的部分387

13.4.7 制作合作伙伴部分389

13.5 制作首页的底部390

13.6 首页的兼容问题391

13.7 二级页面的制作392

附录A CSS标记速查395