🔎这里是【前端网页】,关注我学习前端不迷路
👍如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️
👀专栏介绍
【前端网页】 目前主要更新HTML,一起学习一起进步。
👀本期介绍
本期主要介绍CSS进阶-综合案例3定位重构
文章目录
1. 综合案例 1:列车时刻表
1.1 需求说明
1.2 需求分析
1.3 代码实现
2. 综合案例 2:分块展示板
2.1 需求说明
2.2 需求分析
2.3 代码实现
3. 综合案例 3:商品广告页(主练案例)
3.1 需求说明
3.2 需求分析
4. 综合案例 4:信息介绍版(主练案例)
4.1 需求说明
4.2 需求分析
1. 综合案例 1:列车时刻表
1.1 需求说明
如图,实现沭阳到各地的列车时刻表:
注意:整个列车时刻表在一个水平居中的虚框中
1.2 需求分析
1.3 代码实现
2. 综合案例 2:分块展示板
2.1 需求说明
如图设计一个用于信息展示的 分块展示板
要求:
1 、 该内容在网页中居中显示
2 、 每个小块的“预约免费学习”,正常时是图 1 ,鼠标在文字上悬停时展示图 2
2.2 需求分析
2.3 代码实现
3. 综合案例 3:商品广告页(主练案例)
3.1 需求说明
如图,编写生成商城的 居中 商品广告页
提示:使用 table 更简单。
3.2 需求分析
4. 综合案例 4:信息介绍版(主练案例)
4.1 需求说明
如图:使用 table 和 div 结合,完成以下效果
4.2 需求分析
该分析由学生自己独立完成。