html5设计状态布局,HTML5+CSS3网页设计与布局模式项目教程

任务1搭建Web前端开发环境1

1.1任务导入1

1.2任务目标1

1.3核心知识2

1.3.1网页访问机制2

1.3.2浏览器市场份额3

1.3.3浏览器内核及渲染过程3

1.3.4PHP Web服务器组件4

1.3.5Web服务器启动失败原因分析4

1.3.6移动前端开发环境网络拓扑结构5

1.3.7WebStorm优势5

1.3.8EMMET语法5

1.4任务实施7

1.4.1操作系统版本及位数识别7

1.4.2Chrome浏览器7

1.4.3搭建Web服务器10

1.4.4WebStorm13

1.4.5移动端测试环境18

1.5强化训练18

任务2编写网页模板19

2.1任务导入19

2.2任务目标20

2.3核心知识20

2.3.1Web标准20

2.3.2Web项目结构21

2.3.3通用规范21

2.3.4HTML规范23

2.3.5CSS命名规范24

2.3.6JS规范31

2.3.7图像规范32

2.3.8DOCTYPE(文档类型)32

2.3.9meta32

2.3.10favicon33

2.3.11CSS概述34

2.3.12CSS语法34

2.3.13CSS存在方式35

2.3.14CSS继承与优先级规则36

2.3.15CSS3新增功能37

2.3.16CSS3选择器类型37

2.3.17链接JS39

2.3.18HTML页面模板40

2.4任务实施41

2.4.1建立项目41

2.4.2编写HTML文件41

2.4.3编写CSS样式43

2.4.4编写JS脚本49

2.4.5浏览器测试49

2.5强化训练50

任务3文本排版51

3.1任务导入51

3.2任务目标52

3.3核心知识52

3.3.1元素默认样式属性值52

3.3.2浏览器默认样式53

3.3.3字体属性55

3.3.4字族(fontfamily)55

3.3.5字体大小(fontsize)59

3.3.6字体变形(fontvariant)60

3.3.7字体样式(fontstyle)60

3.3.8字体粗细(fontweight)61

3.3.9字体属性(font)61

3.3.10文本属性(text)64

3.3.11文本颜色(color)64

3.3.12颜色模式65

3.3.13上标(sup)下标(sub)66

3.3.14文本效果(textdecoration)66

3.3.15字母间距(letterspacing)67

3.3.16单词间距(wordspacing)67

3.3.17空白(whitespace)67

3.3.18文本换行(wordwrap)68

3.3.19文本换行(wordbreak)69

3.3.20文本缩进(textindent)69

3.3.21文本对齐(textalign)70

3.3.22垂直对齐(verticalalign)70

3.3.23文本阴影(textshadow)71

3.3.24溢出文本(textoverflow)73

3.3.25文字方向(direction)74

3.3.26行高(lineheight)75

3.4任务实施76

3.4.1建立项目76

3.4.2编写HTML文件77

3.4.3编写CSS样式78

3.4.4浏览器测试79

3.5强化训练80

任务4Web字体图标81

4.1任务导入81

4.2任务目标82

4.3核心知识82

4.3.1Sprite图标的缺陷82

4.3.2字体图标83

4.3.3Font Awesome83

4.3.4Glyphicons83

4.3.5CSS content属性84

4.3.6字体图标定义84

4.3.7字体图标用法87

4.4任务实施87

4.4.1建立项目87

4.4.2编写HTML文件88

4.4.3编写CSS样式88

4.4.4浏览器测试90

4.5强化训练90

任务5图片排版91

5.1任务导入91

5.2任务目标92

5.3核心知识92

5.3.1图片来源92

5.3.2图像质量评价92

5.3.3img标记94

5.3.4网页图片4大格式95

5.3.5figure与figcaption97

5.3.6CSS控制图片大小97

5.3.7CSS图片左右对齐98

5.3.8CSS图片居中对齐98

5.3.9CSS响应式图片98

5.3.10CSS图像风格样式99

5.3.11叠加式图片标题排版99

5.3.12CSS精灵图101

5.3.13图片阴影(boxshadow)103

5.3.14CSS3的圆角(borderradius)103

5.4任务实施104

5.4.1建立项目104

5.4.2编写HTML文件105

5.4.3编写CSS样式107

5.4.4浏览器测试109

5.5强化训练110

任务6列表排版111

6.1任务导入111

6.2任务目标112

6.3核心知识112

6.3.1HTML列表类型112

6.3.2嵌套列表113

6.3.3列表HTML结构113

6.3.4liststyletype属性114

6.3.5liststyleimage属性114

6.3.6liststyleposition属性115

6.3.7列表默认样式115

6.3.8自定义列表符号116

6.4任务实施117

6.4.1建立项目117

6.4.2编写HTML文件117

6.4.3编写CSS样式120

6.4.4浏览器测试121

6.5强化训练122任务7表格排版123

7.1任务导入123

7.2任务目标124

7.3核心知识124

7.3.1表格HTML结构124

7.3.2表格的层次结构125

7.3.3行合并和列合并126

7.3.4表格删除和隐藏128

7.3.5边框(border)128

7.3.6表格边框合并与分离130

7.3.7表格对齐131

7.3.8条纹表格131

7.3.9悬停表格131

7.4任务实施131

7.4.1建立项目131

7.4.2编写HTML文件132

7.4.3编写CSS样式133

7.4.4浏览器测试135

7.5强化训练136

任务8表单排版137

8.1任务导入137

8.2任务目标138

8.3核心知识138

8.3.1表单工作原理138

8.3.2form标签138

8.3.3文本框(input)139

8.3.4文本域(textarea)143

8.3.5选择框(select)143

8.3.6按钮144

8.3.7HTML5表单结构144

8.3.8表单控件大小145

8.4任务实施146

8.4.1建立项目146

8.4.2编写HTML文件147

8.4.3编写CSS样式150

8.4.4编写JS脚本154

8.4.5浏览器测试155

8.5强化训练156

任务9按钮157

9.1任务导入157

9.2任务目标157

9.3核心知识158

9.3.1button标签与属性158

9.3.2按钮基础样式159

9.3.3原始按钮外观160

9.3.4按钮大小160

9.3.5按钮状态161

9.3.6CSS3渐变Gradient162

9.3.7阴影(boxshadow)165

9.3.8圆角(borderradius)166

9.4任务实施167

9.4.1建立项目167

9.4.2编写HTML文件167

9.4.3编写CSS样式168

9.4.4浏览器测试170

9.5强化训练171

任务10选项卡Tab172

10.1任务导入172

10.2任务目标173

10.3核心知识174

10.3.1选项卡HTML模型174

10.3.2重置无序列表ul属性174

10.3.3浮动定位(float)175

10.3.4绝对定位(absolute)175

10.3.5选项卡切换原理175

10.4任务实施176

10.4.1建立项目176

10.4.2编写HTML文件176

10.4.3编写CSS样式178

10.4.4编写JS脚本181

10.4.5浏览器测试181

10.5强化训练182

任务11轮播图排版183

11.1任务导入183

11.2任务目标184

11.3核心知识184

11.3.1轮播图结构模型184

11.3.2轮播图HTML结构185

11.3.3轮播的JS实现186

11.4任务实施186

11.4.1建立项目186

11.4.2编写HTML文件187

11.4.3编写CSS样式189

11.4.4编写JS脚本192

11.4.5浏览器测试194

11.5强化训练194

任务12下拉菜单195

12.1任务导入195

12.2任务目标195

12.3核心知识196

12.3.1全局导航196

12.3.2多级下拉菜单结构196

12.3.3导航菜单层次结构196

12.3.4inlinkeblock197

12.3.5元素垂直居中198

12.3.6boxshadow的理解198

12.3.7绘制三角形图标198

12.3.8超链接201

12.3.9绝对地址和相对地址203

12.3.10链接目标target204

12.4任务实施204

12.4.1建立项目204

12.4.2编写HTML文件204

12.4.3编写CSS样式207

12.4.4浏览器测试215

12.5强化训练215

任务13浮动布局216

13.1任务导入216

13.2任务目标217

13.3核心知识217

13.3.1盒子模型217

13.3.2内边距(padding)219

13.3.3外边距(margin)219

13.3.4boxsizing222

13.3.5显示类型(display)222

13.3.6嵌套(div)222

13.3.7id与class223

13.3.8标准文档流224

13.3.9浮动(float)224

13.3.10清除(clear)226

13.3.11溢出(overflow)228

13.3.12内联框架(iframe)228

13.4任务实施229

13.4.1建立项目229

13.4.2编写HTML文件229

13.4.3编写CSS样式231

13.4.4浏览器测试233

13.5强化训练234

任务14流式布局235

14.1任务导入235

14.2任务目标236

14.3核心知识236

14.3.1固定宽度布局236

14.3.2流式布局236

14.4任务实施237

14.4.1建立项目237

14.4.2编写HTML文件237

14.4.3编写CSS样式239

14.4.4浏览器测试241

14.5强化训练242

任务15弹性布局243

15.1任务导入243

15.2任务目标243

15.3核心知识244

15.3.1弹性布局244

15.3.2弹性布局存在的问题244

15.4任务实施244

15.4.1建立项目244

15.4.2编写HTML文件245

15.4.3编写CSS样式247

15.4.4浏览器测试249

15.5强化训练249

任务16定位布局250

16.1任务导入250

16.2任务目标251

16.3核心知识251

16.3.1定位(positioning)251

16.3.2相对定位(relative)251

16.3.3绝对定位(absolute)252

16.3.4固定定位(fixed)253

16.3.5深度(zindex)253

16.3.6包含块253

16.4任务实施253

16.4.1建立项目253

16.4.2编写HTML文件254

16.4.3编写CSS样式258

16.4.4浏览器测试260

16.5强化训练261

任务17CSS3多列布局262

17.1任务导入262

17.2任务目标263

17.3核心知识263

17.3.1多列布局原理263

17.3.2属性(columns)263

17.3.3列宽度(columnwidth)264

17.3.4列数(columncount)264

17.3.5列间距(columngap)264

17.3.6columnrule264

17.3.7columnspan265

17.3.8浏览器前缀265

17.4任务实施266

17.4.1建立项目266

17.4.2编写HTML文件266

17.4.3编写CSS样式267

17.4.4浏览器测试269

17.5强化训练270

任务18响应式页面排版271

18.1任务导入271

18.2任务目标271

18.3核心知识272

18.3.1响应式布局概述272

18.3.2响应式布局关键技术272

18.3.3响应式布局技巧275

18.3.4Viewport定义276

18.3.5响应式设计流程276

18.4任务实施277

18.4.1建立项目277

18.4.2编写HTML文件278

18.4.3编写CSS样式280

18.4.4浏览器测试285

18.5强化训练286

任务19前端框架Bootstrap288

19.1任务导入288

19.2任务目标289

19.3核心知识289

19.3.1Query289

19.3.2Bootstrap289

19.3.3CDN290

19.3.4Bootstrap网络系统290

19.3.5Bootstrap媒体查询291

19.4任务实施293

19.4.1下载Bootstrap293

19.4.2建立项目295

19.4.3编写HTML文件295

19.4.4编写CSS样式301

19.4.5浏览器测试302

19.5强化训练303

参考文献304