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

简介: 本期主要介绍CSS进阶-综合案例3定位重构
+关注继续查看

1. 综合案例 1:列车时刻表


1.1 需求说明


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

image.png

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

1.2 需求分析


image.png

1.3 代码实现


image.png

image.png

image.png

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


2.1 需求说明


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

image.png

要求:

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

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

2.2 需求分析


image.png

image.png

相关文章
|
18天前
|
前端开发
CSS中的盒子模型与定位
CSS中的盒子模型与定位
53 0
|
1月前
|
前端开发
css按钮定位在div底部
css按钮定位在div底部
22 0
|
1月前
|
前端开发
css之图片下方定位遮掩层
css之图片下方定位遮掩层
24 0
|
1月前
|
前端开发 容器
HTML&CSS Day06 CSS定位布局
HTML&CSS Day06 CSS定位布局
42 0
|
1月前
|
前端开发
css定位有几种?
css定位有几种?
|
1月前
|
前端开发
CSS 中有五种常见的定位方式--详解
CSS 中有五种常见的定位方式--详解
|
2月前
CSS-浮动、定位
CSS-浮动、定位
36 0
|
2月前
|
前端开发 容器
CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动
CSS3 属性选择器 伪类选择器 盒模型 圆角 阴影 CSS定位和浮动
|
2月前
|
前端开发 流计算
CSS标准(5)-定位体系
CSS标准(5)-定位体系
33 0
|
2月前
|
前端开发
【前端|CSS系列第3篇】CSS盒模型、浮动及定位
CSS盒模型是用来描述HTML元素在页面中所占空间的模型。每个元素都被看作是一个矩形的盒子,包含内容区域、内边距、边框和外边距四个部分。理解盒模型对于控制元素的大小、边距和布局非常重要。