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

第1章 怎样开发设计网站 1

1.1网站开发设计需要什么 1

1.1.1需要HTML文件 1

1.1.2需要Div来布局 2

1.1.3需要CSS来定义样式 2

1.1.4需要JavaScript 3

1.2通过Dreamweaver开发Div+CSS 3

1.2.1通过Dreamweaver在HTML页面里插入Div 4

1.2.2 Dreamweaver的CSS代码支持 5

1.3一个简单的网页需要包含什么 6

1.3.1 head部分 7

1.3.2 body部分 7

1.3.3编写注释 7

第2章 HTML入门基础 9

2.1 HTML标签 9

2.1.1段落标签 9

2.1.2文本标签 10

2.1.3超链接标签 12

2.1.4图像标签 13

2.1.5表格标签 14

2.2 HTML5简介 15

2.2.1 HTML5基础 15

2.2.2向后兼容 16

2.2.3更加简化 16

2.2.4 HTML5语法中的3个要点 17

2.3新增的主体结构元素 18

2.3.1实例应用——article元素 18

2.3.2实例应用——section元素 19

2.3.3实例应用nav元素 21

2.3.4 aside元素 23

2.4新增的非主体结构元素 24

2.4.1实例应用——header元素 24

2.4.2实例应用——hgroup元素 26

2.4.3实例应用——footer元素 26

2.4.4实例应用——address元素 28

第3章 CSS样式设计基础 30

3.1初识CSS 30

3.1.1 CSS基本语法 30

3.1.2添加CSS的方法 31

3.1.3设计第一个实例 32

3.2 CSS选择器 36

3.2.1 CSS选择器概述 36

3.2.2标签选择器 37

3.2.3类选择器 37

3.2.4 ID选择器 38

3.2.5伪类选择器和伪元素 39

3.2.6群组选择器 41

3.2.7相邻选择器 43

3.2.8通用选择器 44

3.3 CSS属性和属性值 45

3.3.1 CSS属性 45

3.3.2 CSS单位 46

3.3.3设置颜色 47

第4章 使用CSS设置文本和段落样式 50

4.1字体属性 50

4.1.1字体font-family 50

4.1.2字号font-size 51

4.1.3字体风格font-style 53

4.1.4字体加粗font-weight 54

4.1.5字体变形font-variant 55

4.2段落属性 56

4.2.1单词间隔word-spacing 56

4.2.2字符间隔letter-spacing 57

4.2.3文字修饰text-decoration 58

4.2.4垂直对齐方式vertical-align 59

4.2.5文本转换text-transform 61

4.2.6水平对齐方式text-align 62

4.2.7文本缩进text-indent 63

4.2.8文本行高line-height 64

4.2.9处理空白white-space 65

4.2.10文本反排unicode-bidi、 direction 67

4.3实例应用 68

4.3.1控制文本的行高和间隔 68

4.3.2实现文本垂直居中 69

第5章 使用CSS设置图片和背景样式 71

5.1图片样式设置 71

5.1.1定义图片边框 71

5.1.2文字环绕图片 73

5.2背景样式设置 74

5.2.1设置页面背景颜色 74

5.2.2定义背景图片 76

5.2.3背景图片的重复 77

5.2.4背景关联 79

5.2.5定义背景图片的位置 81

5.3实例应用 82

5.3.1鼠标经过图片显示文字 83

5.3.2鼠标移上改变图片透明度 84

5.3.3将正方形图片显示为圆形图片 84

5.3.4多图排列展示放大特效 86

第6章 使用CSS控制列表样式 90

6.1有序列表 90

6.1.1有序列表标签〈ol〉 90

6.1.2有序列表的序号类型type 92

6.1.3有序列表的起始数值start 93

6.2无序列表 94

6.2.1无序列表标签〈ul〉 94

6.2.2无序列表的类型〈type〉 95

6.2.3目录列表标签〈dir〉 97

6.2.4定义列表标签〈dl〉 97

6.2.5菜单列表标签〈menu〉 99

6.3实例应用 99

6.3.1设计背景变换的导航栏目 100

6.3.2设计横向导航菜单 102

6.3.3竖排导航 104

6.3.4设计网页下拉菜单 108

6.3.5商品列表分类可右侧展开详细分类 111

6.3.6 CSS网页导航条 115

第7章 使用CSS设计表单样式 118

7.1表单form 118

7.1.1程序提交action 118

7.1.2表单名称name 119

7.1.3传送方法method 119

7.1.4编码方式enctype 120

7.1.5目标显示方式target 120

7.2插入表单对象 121

7.2.1文字字段text 121

7.2.2密码域password 122

7.2.3单选按钮radio 124

7.2.4复选框checkbox 125

7.2.5普通按钮button 126

7.2.6提交按钮submit 126

7.2.7重置按钮reset 127

7.2.8图像域image 129

7.2.9 隐藏域hidden 130

7.2.10文件域file 131

7.3菜单和列表 131

7.3.1下拉菜单 131

7.3.2列表项 133

7.4表单样式实例 134

7.4.1定义背景样式 134

7.4.2设置输入文本的样式 136

7.4.3下画横线代替文本框特效 138

7.4.4随鼠标单击换色的输入框 139

7.4.5文本框中只能输入数字 142

第8章 使用CSS设计表格样式 144

8.1创建表格 144

8.1.1表格的基本构成table、 tr、td 144

8.1.2设置表格的标题caption 145

8.2设置表格基本属性 147

8.2.1设置表格宽度width 147

8.2.2设置表格高度height 148

8.2.3设置表格对齐方式align 149

8.3设置表格的属性 151

8.3.1表格的边框宽度border 151

8.3.2表格边框颜色bordercolor 152

8.3.3设置表格阴影 153

8.3.4设置表格的渐变背景 154

8.4实例应用 156

8.4.1变换背景色的表格 156

8.4.2表格隔行换色特效 158

8.4.3 dl dt dd实现表格布局 161

8.4.4鼠标经过时改变表格行的颜色 163

8.4.5 CSS用虚线美化表格的边框 165

第9章 使用CSS定义链接样式 167

9.1链接样式设置基础 167

9.1.1光标属性cursor 167

9.1.2定义下画线样式text-decoration 169

9.1.3未访问过的链接a：link 170

9.1.4鼠标悬停时状态a：hover 171

9.1.5已访问超链接样式a：visited 172

9.1.6超链接的激活样式a：active 172

9.2实例应用 173

9.2.1不同的鼠标显示样式 173

9.2.2向链接添加不同的样式 176

9.2.3按钮式超链接 178

9.2.4翻转式超链接 180

9.2.5设计导航菜单 182

第10章 CSS中的滤镜 185

10.1滤镜概述 185

10.2动感模糊 185

10.3对颜色进行透明处理 186

10.4设置阴影 188

10.5对象的翻转 189

10.6发光效果 190

10.7 X光片效果 192

10.8波形滤镜 193

10.9遮罩效果 195

第11章 Div+CSS布局入门 196

11.1认识盒模型 196

11.2外边距 197

11.2.1上外边距margin-top 197

11.2.2右外边距margin-right 198

11.2.3下外边距 margin-bottom 199

11.2.4左外边距margin-left 201

11.3内边距 202

11.3.1上内边距padding-top 202

11.3.2右内边距padding-right 203

11.3.3下内边距padding-bottom 203

11.3.4左内边距padding-left 204

11.4边框 205

11.4.1边框样式border-style 205

11.4.2边框宽度border-width 207

11.4.3边框颜色border-color 209

11.4.4边框属性border 210

11.5 CSS布局理念 211

11.5.1将页面用Div分块 212

11.5.2设计各块的位置 212

11.5.3用CSS定位 213

第12章 用CSS定位控制网页布局 215

12.1 position定位 215

12.1.1绝对定位absolute 215

12.1.2固定定位fixed 217

12.1.3相对定位relative 219

12.2浮动定位 221

12.2.1 float属性 221

12.2.2浮动布局的新问题 223

12.2.3清除浮动clear 224

12.3定位层叠 226

12.3.1层叠顺序 226

12.3.2简单嵌套元素中的层叠定位 228

12.3.3包含子元素的复杂层叠定位 229

12.4常见布局类型 231

12.4.1一列固定宽度 231

12.4.2一列宽度自适应 232

12.4.3两列固定宽度 233

12.4.4两列宽度自适应 235

12.4.5两列右列宽度自适应 237

12.4.6三列浮动中间宽度自适应 237

12.5实例应用 240

12.5.1带有边框和边界的图像浮动于文本右侧 240

12.5.2创建水平菜单 241

第13章 移动网页设计基础CSS3 243

13.1边框 243

13.1.1圆角边框border-radius 243

13.1.2边框图片border-image 247

13.1.3边框阴影box-shadow 248

13.2背景 250

13.2.1背景图片尺寸background-size 250

13.2.2背景图片定位区域background-origin 251

13.2.3背景绘制区域background-clip 253

13.3文本 255

13.3.1文本阴影text-shadow 256

13.3.2强制换行word-wrap 256

13.3.3文本溢出text-overflow 257

13.3.4文字描边text-stroke 258

13.3.5文本填充颜色text-fill-color 259

13.4多列 261

13.4.1创建多列column-count 261

13.4.2列的宽度column-width 262

13.4.3列的间隔column-gap 263

13.4.4列的规则column-rule 264

13.5转换 266

13.5.1移动translate（） 266

13.5.2旋转rotate（） 267

13.5.3缩放scale（） 268

13.5.4扭曲skew（） 270

13.5.5矩阵matrix（） 270

13.6过渡 272

13.7动画 273

13.7.1@keyframes规则声明动画 273

13.7.2 animation使用动画 275

13.8用户界面 277

13.8.1 box sizing 277

13.8.2 resize 278

13.8.3 outline offset 280

13.9实例应用 281

13.9.1鼠标放上去显示全部内容 281

13.9.2美观的图片排列 283

第14章 CSS与JavaScript应用 285

14.1 JavaScript概述 285

14.1.1 JavaScript简介 285

14.1.2 JavaScript放置位置 286

14.2 JavaScript基本语法 287

14.2.1变量 287

14.2.2数据类型 288

14.2.3表达式和运算符 288

14.2.4函数 290

14.2.5注释 290

14.3 JavaScript程序语句 290

14.3.1 if…else语句 291

14.3.2 for语句 291

14.3.3 switch语句 292

14.3.4 while循环 293

14.3.5 break语句 294

14.3.6 continue语句 295

14.4 JavaScript的事件 295

14.4.1 onClick事件 295

14.4.2 onChange事件 295

14.4.3 onSelect事件 297

14.4.4 onFocus事件 299

14.4.5 onLoad事件 300

14.4.6 onUnload事件 301

14.4.7 onBlur事件 302

14.4.8 onMouseOver事件 303

14.4.9 onMouseOut事件 304

14.4.10 onDblClick事件 305

14.4.11其他常用事件 307

14.5浏览器的内部对象 309

14.5.1 navigator对象 309

14.5.2 document对象 310

14.5.3 windows对象 311

14.5.4 location对象 313

14.5.5 history对象 314

14.6实例应用 315

14.6.1显示当前时间 315

14.6.2当鼠标指针经过图像时图像震动效果 318

14.6.3自动切换图像 320

第15章 企业网站设计 322

15.1企业网站设计概述 322

15.1.1企业网站分类 322

15.1.2企业网站主要功能栏目 324

15.2网站内容分析 326

15.3 HTML结构设计 326

15.4方案设计 329

15.5定义整体样式 331

15.6制作页面顶部 333

15.6.1页面顶部的结构 333

15.6.2定义页面顶部的样式 333

15.7制作左侧导航 335

15.7.1制作左侧导航部分的结构 335

15.7.2定义左侧导航的样式 335

15.8制作联系我们部分 337

15.8.1联系我们部分的结构 337

15.8.2定义联系我们内容的样式 337

15.9制作企业介绍部分 338

15.9.1制作企业介绍部分结构 338

15.9.2定义企业介绍部分的样式 338

15.10制作图片展示和新闻动态 339

15.10.1制作页面结构 339

15.10.2定义页面样式 340

15.11制作订购部分 340

15.11.1制作页面结构 340

15.11.2定义样式 342

15.12制作底部部分 342

15.13网站的上传 343

第16章 移动网站设计 346

16.1移动网站设计概述 346

16.1.1什么是移动网站设计 346

16.1.2移动网站设计的原则 347

16.1.3怎样开始移动网页设计 349

16.2移动网站设计的注意事项 350

16.3制作网站页面 352

16.3.1网页HTML整体结构 352

16.3.2新建手机网页 355

16.3.3新建CSS样式表 357

16.3.4制作header部分 358

16.3.5制作about部分 359

16.3.6制作工程案例部分 360

16.3.7制作设计师部分 362

16.3.8制作联系我们部分 364

16.3.9制作底部部分 366

16.4维护网站 366

16.5网站的推广 367

16.5.1登录搜索引擎 367

16.5.2交换广告条 368

16.5.3登录网址导航站点 368

16.5.4通过BBS宣传 369

16.5.5聊天工具推广网站 369

16.5.6使用博客推广 370

16.5.7使用传统方式推广 371

附录 CSS浏览器兼容性与常见技巧解答 372

问题1上下margin重合 372

问题2 margin加倍的问题 373

问题3浮动IE产生的双倍距离 373

问题4超链接访问后hover样式不出现 373

问题5 IE6对png的透明度支持问题 374

问题6行内元素上下margin及padding不拉开元素间距 374

问题7浮动背景 375

问题8如何正确对齐文本 375

问题9超链接访问过后hover样式就不出现的问题 375

问题10 list-style-image无法准确定位的问题 375

问题11如何垂直居中文本 376

问题12为什么无法定义lpx左右高度的容器 376

问题13怎样使一个层垂直居中于浏览器中 376

问题14能给某部分内容加边框吗 377

问题15如何去掉下画线 377

问题16如何垂直居中文本 377

问题17如何让Div横向排列 378

问题18怎样设置滚动条颜色 378

问题19字体大小定义不同 378

问题20 innerText在IE中能正常工作，但在FireFox中却不行 378

问题21 ul和ol列表缩进问题 379

问题22 IE与宽度和高度的问题 379

问题23 Div浮动，IE文本产生3px的bug 379