首页 > 图书中心 > HTML5+CSS3 Web前端开发与实例教程

目录

目    录

第1章  Web前端开发概述 1

1.1  Web前端开发职责 1

1.2  Web前端开发相关概念 2

1.3  Web前端开发相关技术 3

1.3.1  Web标准 3

1.3.2  HTML 4

1.3.3  CSS 4

1.3.4  JavaScript 5

1.4  Web前端开发工具 5

1.4.1  代码编辑工具:VSCode 6

1.4.2  代码运行工具:浏览器 8

1.4.3  开发者工具 9

1.4.4  人工智能辅助编程工具 10

1.5  网站设计与开发流程 11

1.6  实战案例:网页显示“社会主义核心价值观” 12

1.7  本章小结 13

第2章  HTML5基础 14

2.1  HTML5语法基础 14

2.1.1  HTML文档结构 14

2.1.2  HTML标签语法 17

2.1.3  HTML注释 18

2.2  文本控制标签 19

2.2.1  标题标签 19

2.2.2  段落标签 20

2.2.3  换行标签 20

2.2.4  文本格式化标签 21

2.2.5  特殊字符 22

2.3  图像标签 23

2.3.1  网页常用图像格式 23

2.3.2  图像标签的使用 24

2.3.3  相对路径与绝对路径 26

2.4  超链接标签 27

2.4.1  文本链接 27

2.4.2  图像链接 28

2.4.3  书签(锚点)链接 28

2.4.4  其他链接 30

2.5  列表 30

2.5.1  有序列表 31

2.5.2  无序列表 32

2.5.3  定义列表 34

2.5.4  嵌套列表 35

2.6  表格 36

2.6.1  表格结构 36

2.6.2  表格标签 37

2.7  视频和音频标签 41

2.7.1  视频标签 41

2.7.2  音频标签 42

2.8  其他标签 42

2.8.1  预格式化标签 42

2.8.2  水平线标签 43

2.8.3  行内容器标签 43

2.9  实战案例:“大学生参军网站”兵役登记页面 44

2.10  本章小结 46

第3章  HTML5页面元素和属性 47

3.1  文档结构标签 47

3.1.1  <header>标签 47

3.1.2  <footer>标签 49

3.1.3  <article>标签 50

3.1.4  <section>标签 51

3.1.5  <aside>标签 53

3.1.6  <nav>标签 53

3.1.7  <figure>和<figcaption>标签 54

3.1.8  <main>标签 55

3.2  交互元素 55

3.2.1  <progress>标签 55

3.2.2  <meter>标签 56

3.2.3  <details>标签 57

3.3  文本层次语义标签 58

3.3.1  <cite>标签 58

3.3.2  <mark>标签 59

3.3.3  <time>标签 60

3.4  全局属性 61

3.5  实战案例:“大学生参军网站”页面结构 62

3.6  本章小结 64

第4章  表单 65

4.1  表单概述 65

4.2  <form>标签 67

4.3  <input>标签 68

4.3.1  单行文本框 69

4.3.2  密码框 69

4.3.3  文件域 70

4.3.4  单选按钮和复选框 71

4.3.5  隐藏域 73

4.3.6  按钮 73

4.3.7  HTML5新增输入元素 76

4.4  <datalist>标签 78

4.5  <label>标签 79

4.6  选择列表标签 80

4.7  多行文本框标签 83

4.8  表单常用属性 84

4.9  实战案例:“大学生参军网站”网上咨询表单 86

4.10  本章小结 88

第5章  CSS3基础 89

5.1  CSS概述 89

5.2  CSS语法规则 90

5.3  CSS样式的引入方法 91

5.3.1  行内样式表 91

5.3.2  内部样式表 92

5.3.3  外部样式表 93

5.4  CSS基本选择器 94

5.4.1  标签选择器 94

5.4.2  ID选择器 95

5.4.3  类选择器 95

5.4.4  通用选择器 97

5.5  实战案例:“大学生参军网站”公共样式表制作 97

5.6  本章小结 98

第6章  CSS3修饰页面元素 99

6.1  CSS字体样式 99

6.1.1  字体粗细属性 99

6.1.2  字体风格属性 100

6.1.3  字体大小属性 101

6.1.4  字体族属性 103

6.1.5  字体属性 106

6.2  CSS文本样式 107

6.2.1  行高属性 107

6.2.2  颜色属性 109

6.2.3  文本水平对齐属性 110

6.2.4  首行缩进属性 111

6.2.5  文本修饰属性 111

6.2.6  字符间距属性 112

6.2.7  字间距属性 113

6.2.8  字母大小写属性 114

6.2.9  文本阴影效果属性 115

6.3  CSS表格样式 116

6.4  CSS表单样式 118

6.4.1  单行文本框美化 119

6.4.2  按钮美化 120

6.4.3  下拉列表美化 120

6.5  CSS列表样式 122

6.6  实战案例:“大学生参军网站”在线咨询页面 123

6.7  本章小结 126

第7章  CSS3高级选择器 127

7.1  组合选择器 127

7.1.1  交集选择器 127

7.1.2  并集选择器 128

7.1.3  后代选择器 129

7.1.4  子元素选择器 130

7.1.5  相邻兄弟选择器 131

7.1.6  通用兄弟选择器 132

7.2  属性选择器 133

7.3  伪类选择器 134

7.4  伪元素选择器 136

7.5  CSS三大特性 138

7.6  本章小结 141

第8章  CSS3盒子模型 142

8.1  盒子模型概述 142

8.1.1  认识盒子模型 142

8.1.2  <div>标签 144

8.2  盒子模型的相关属性 144

8.2.1  内容区域的宽度和高度 144

8.2.2  边框 145

8.2.3  内边距 152

8.2.4  外边距 153

8.3  阴影 155

8.4  box-sizing 156

8.5  背景属性 158

8.5.1  背景颜色 158

8.5.2  背景图像 158

8.5.3  图像平铺方式 158

8.5.4  背景图像位置 160

8.5.5  背景图像固定 161

8.5.6  背景图像大小 161

8.5.7  背景裁剪 163

8.5.8  背景复合属性 164

8.5.9  CSS精灵图 165

8.6  实战案例:“大学生参军网站”登录页面 166

8.7  本章小结 169

第9章  浮动与定位 170

9.1  标准文档流 170

9.2  元素的分类 171

9.2.1  块级元素、行内元素与行内块元素 171

9.2.2  元素的类型转换 172

9.3  元素的浮动 173

9.3.1  设置浮动 174

9.3.2  清除浮动 176

9.4  元素的定位 180

9.4.1  定位的概念 180

9.4.2  定位属性 181

9.4.3  静态定位 181

9.4.4  相对定位 182

9.4.5  绝对定位 183

9.4.6  固定定位 186

9.4.7  粘性定位 187

9.4.8  层叠等级属性 188

9.5  实战案例:“大学生参军网站”轮播图效果 190

9.6  本章小结 192

第10章  CSS3高级应用 193

10.1  变换 193

10.1.1  旋转 194

10.1.2  倾斜 195

10.1.3  缩放 196

10.1.4  平移 197

10.1.5  变换原点 198

10.2  过渡 200

10.3  动画 202

10.4  实战案例:“大学生参军网站”CSS3高级应用 205

10.5  本章小结 208

第11章  网页布局 209

11.1  网页布局概述 209

11.1.1  网页布局的概念 209

11.1.2  网页布局的流程 210

11.1.3  常见的网页布局方法 211

11.2  网页布局命名规范 211

11.3  常见布局的实现 212

11.3.1  单列布局 212

11.3.2  两列常规布局 214

11.3.3  三列常规布局 216

11.3.4  两列自适应等高布局 217

11.3.5  三列自适应布局 219

11.4  实战案例:“大学生参军网站”首页主体部分 223

11.5  本章小结 225

第12章  Flex布局 226

12.1  Flex布局概述 226

12.2  Flex布局相关概念 227

12.3  容器属性 227

12.3.1  display属性 228

12.3.2  flex-direction属性 228

12.3.3  flex-wrap属性 230

12.3.4  justify-content属性 232

12.3.5  align-items属性 233

12.3.6  align-content属性 235

12.4  项目属性 236

12.4.1  order属性 236

12.4.2  flex-grow属性 237

12.4.3  flex-shrink属性 239

12.4.4  flex-basis属性 240

12.4.5  flex属性 241

12.5  实战案例:“大学生参军网站”导航条 242

12.6  本章小结 244

第13章  Grid布局 245

13.1  Grid布局概述 245

13.2  Grid布局相关概念 246

13.3  容器属性 246

13.3.1  display属性 247

13.3.2  划分网格 248

13.3.3  行间隔和列间隔 252

13.3.4  项目对齐方式 253

13.4  项目属性 255

13.4.1  grid-column和grid-row属性 255

13.4.2  grid-area属性 257

13.5  实战案例:“大学生参军网站”视频展播列表 258

13.6  本章小结 260

第14章  Web前端项目综合实践——文创商城 261

14.1  项目概述 261

14.2  需求分析 262

14.3  原型设计 262

14.4  公共部分的设计与实现 265

14.4.1  重置样式 265

14.4.2  页面头部 265

14.4.3  页面底部 268

14.4.4  悬浮侧边栏 270

14.5  首页的设计与实现 271

14.5.1  甄选好物版块 271

14.5.2  国博文房版块 274

14.6  商品列表页的设计与实现 277

14.6.1  商品类型筛选 277

14.6.2  分页导航 278

14.7  商品详情页的设计与实现 279

14.8  本章小结 283

版权所有(C)2023 清华大学出版社有限公司 京ICP备10035462号 京公网安备11010802042911号

联系我们 | 网站地图 | 法律声明 | 友情链接 | 盗版举报 | 人才招聘