0
点赞
收藏
分享

微信扫一扫

【网页前端】CSS进阶-综合案例3定位重构


【网页前端】CSS进阶-综合案例3定位重构_css3

🔎这里是【前端网页】,关注我学习前端不迷路
👍如果对你有帮助,给博主一个免费的点赞以示鼓励
欢迎各位🔎点赞👍评论收藏⭐️

👀专栏介绍

【前端网页】 目前主要更新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 需求说明

如图,实现沭阳到各地的列车时刻表:

【网页前端】CSS进阶-综合案例3定位重构_css_02

注意:整个列车时刻表在一个水平居中的虚框中

1.2 需求分析

【网页前端】CSS进阶-综合案例3定位重构_前端_03

1.3 代码实现

【网页前端】CSS进阶-综合案例3定位重构_前端_04


【网页前端】CSS进阶-综合案例3定位重构_css_05

2. 综合案例 2:分块展示板

2.1 需求说明

如图设计一个用于信息展示的 分块展示板

【网页前端】CSS进阶-综合案例3定位重构_css_06

【网页前端】CSS进阶-综合案例3定位重构_需求分析_07



要求:




1 、 该内容在网页中居中显示




2 、 每个小块的“预约免费学习”,正常时是图 1 ,鼠标在文字上悬停时展示图 2



2.2 需求分析

【网页前端】CSS进阶-综合案例3定位重构_java_08

【网页前端】CSS进阶-综合案例3定位重构_需求分析_09

2.3 代码实现

【网页前端】CSS进阶-综合案例3定位重构_css_10

【网页前端】CSS进阶-综合案例3定位重构_需求分析_11

【网页前端】CSS进阶-综合案例3定位重构_java_12

【网页前端】CSS进阶-综合案例3定位重构_前端_13

【网页前端】CSS进阶-综合案例3定位重构_css_14

  

3. 综合案例 3:商品广告页(主练案例)

3.1 需求说明

如图,编写生成商城的 居中 商品广告页

【网页前端】CSS进阶-综合案例3定位重构_css_15

提示:使用 table 更简单。

3.2 需求分析

【网页前端】CSS进阶-综合案例3定位重构_前端_16

【网页前端】CSS进阶-综合案例3定位重构_css_17

4. 综合案例 4:信息介绍版(主练案例)


4.1 需求说明

如图:使用 table 和 div 结合,完成以下效果

【网页前端】CSS进阶-综合案例3定位重构_前端_18


4.2 需求分析


该分析由学生自己独立完成。

举报

相关推荐

0 条评论