网页设计武月清95课件讲解.pptxVIP

《网页设计》

主讲人：武月清

01

目录

CONTENT

03

02

04

情景导入

从实际问题出发

05

HTML5语义化标签

用正确的标签做正确的事

CSS布局技术

Flexbox实现自适应布局

兼容适配方案

解决浏览器显示差异

思政融入

技术自信与文化自信

01

PART

从实际问题出发，理解HTML5与CSS3的重要性

情景导入

真实场景

实训室里键盘声此起彼伏，小S正为导航栏在不同浏览器上的显示差异抓狂。Chrome中完美呈现的导航，在Safari中却错位变形。

这个问题困扰了无数前端开发者，也是学习HTML5与CSS3的绝佳切入点。

技术导师武哥搬来示教仪：记住，写代码就像搭乐高！

他演示用语义化标签搭建结构，让代码像乐高积木一样模块化、标准化。

这个

标签就像北斗导航的坐标系，能让屏幕阅读器看懂网站结构。

02

PART

用正确的标签做正确的事

HTML5语义化标签

语义化标签

常用语义化标签

页眉

导航

主体

文章

区块

页脚

03

PART

Flexbox实现自适应布局

CSS布局技术

Flexbox布局原理

1

Flex容器

设置display:flex的元素成为Flex容器，其子元素自动成为Flex项目

2

主轴与交叉轴

主轴（mainaxis）是Flex项目排列的主要方向，交叉轴（crossaxis）垂直于主轴

3

Flex项目

容器内