Div+CSS网页样式与布局从入门到精通2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载

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需要JavaScript3

1.2通过Dreamweaver开发Div+CSS3

1.2.1通过Dreamweaver在HTML页面里插入Div4

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初识CSS30

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-family50

4.1.2字号font-size51

4.1.3字体风格font-style53

4.1.4字体加粗font-weight54

4.1.5字体变形font-variant55

4.2段落属性56

4.2.1单词间隔word-spacing56

4.2.2字符间隔letter-spacing57

4.2.3文字修饰text-decoration58

4.2.4垂直对齐方式vertical-align59

4.2.5文本转换text-transform61

4.2.6水平对齐方式text-align62

4.2.7文本缩进text-indent63

4.2.8文本行高line-height64

4.2.9处理空白white-space65

4.2.10文本反排unicode-bidi、 direction67

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有序列表的序号类型type92

6.1.3有序列表的起始数值start93

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表单form118

7.1.1程序提交action118

7.1.2表单名称name119

7.1.3传送方法method119

7.1.4编码方式enctype120

7.1.5目标显示方式target120

7.2插入表单对象121

7.2.1文字字段text121

7.2.2密码域password122

7.2.3单选按钮radio124

7.2.4复选框checkbox125

7.2.5普通按钮button126

7.2.6提交按钮submit126

7.2.7重置按钮reset127

7.2.8图像域image129

7.2.9 隐藏域hidden130

7.2.10文件域file131

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、td144

8.1.2设置表格的标题caption145

8.2设置表格基本属性147

8.2.1设置表格宽度width147

8.2.2设置表格高度height148

8.2.3设置表格对齐方式align149

8.3设置表格的属性151

8.3.1表格的边框宽度border151

8.3.2表格边框颜色bordercolor152

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光标属性cursor167

9.1.2定义下画线样式text-decoration169

9.1.3未访问过的链接a：link170

9.1.4鼠标悬停时状态a：hover171

9.1.5已访问超链接样式a：visited172

9.1.6超链接的激活样式a：active172

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-top197

11.2.2右外边距margin-right198

11.2.3下外边距 margin-bottom199

11.2.4左外边距margin-left201

11.3内边距202

11.3.1上内边距padding-top202

11.3.2右内边距padding-right203

11.3.3下内边距padding-bottom203

11.3.4左内边距padding-left204

11.4边框205

11.4.1边框样式border-style205

11.4.2边框宽度border-width207

11.4.3边框颜色border-color209

11.4.4边框属性border210

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绝对定位absolute215

12.1.2固定定位fixed217

12.1.3相对定位relative219

12.2浮动定位221

12.2.1 float属性221

12.2.2浮动布局的新问题223

12.2.3清除浮动clear224

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章 移动网页设计基础CSS3243

13.1边框243

13.1.1圆角边框border-radius243

13.1.2边框图片border-image247

13.1.3边框阴影box-shadow248

13.2背景250

13.2.1背景图片尺寸background-size250

13.2.2背景图片定位区域background-origin251

13.2.3背景绘制区域background-clip253

13.3文本255

13.3.1文本阴影text-shadow256

13.3.2强制换行word-wrap256

13.3.3文本溢出text-overflow257

13.3.4文字描边text-stroke258

13.3.5文本填充颜色text-fill-color259

13.4多列261

13.4.1创建多列column-count261

13.4.2列的宽度column-width262

13.4.3列的间隔column-gap263

13.4.4列的规则column-rule264

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 sizing277

13.8.2 resize278

13.8.3 outline offset280

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的bug379