查看: 412|回复: 18

[活动] 【凡哥教程第三讲作业】岁月的故事(计算令贴子居中)

[复制链接]
发表于 2024-7-24 20:03 | 显示全部楼层 |阅读模式




评分

8

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-7-24 20:04 | 显示全部楼层
@花简静
交作业,静宝调上下,在哪里呢

评分

1

查看全部评分

点评
回复

使用道具

发表于 2024-7-24 21:09 | 显示全部楼层
效果完美
点评
回复

使用道具

 楼主| 发表于 2024-7-24 21:25 | 显示全部楼层

晚上好凡凡老师,谢谢鼓励
点评
回复

使用道具

发表于 2024-7-24 21:58 | 显示全部楼层
美图居中,效果好好。出手就两篇作业,给力。
点评
回复

使用道具

发表于 2024-7-24 22:14 | 显示全部楼层
雨声 发表于 2024-7-24 20:04
@花简静
交作业,静宝调上下,在哪里呢

亲爱的声妞,调哪里上下?
这一句里面:
margin: 230px 0 30px calc(50% - 990px);
230px是上,可令贴子不遮头像
0是右
30px是下:不占评分地方
calc(50% - 990px);这一串是左边。算好了令贴子居中。。


第三讲凡哥原贴描述如下:
margin 属性我们设置了四个值,
第一个是 230px,指上外边距,说的是 id="mama" 的 div 上边缘的外边距是 230px,这么设置的作用是让帖子容器的上边缘留空230个像素,以便令帖子不覆盖发帖用户的头像;
第二个值是 0,是右变的外边距,值为0才能确保最后一个值即左外边距的设置不受挤占、影响;
第三个是 30px,指下边的外边距,这样帖子和底部也拉开一定距离,不会紧贴着评分区域而导致评委评分困难;
第四个是左边的外边距,它用上了CSS的计算函数 calc(...),小括号里面的是算式,加减乘除符号两头一定要留有一个空格,然后,算式里面的 50% 指左外边距的值是 50%,但要减去 730px,这样帖子就在水平方向绝对居中。

评分

5

查看全部评分

点评
回复

使用道具

发表于 2024-7-24 22:19 | 显示全部楼层
很高兴又见着声妞来了,晚上我一直挂版没看帖子,刚空下来刷新看见你新作了
点评
回复

使用道具

发表于 2024-7-24 22:22 | 显示全部楼层
我看了凡老师教程,还云里雾里没搞清楚呢,你都已经交作业了
点评
回复

使用道具

 楼主| 发表于 2024-7-24 22:27 | 显示全部楼层
花简静 发表于 2024-7-24 22:14
亲爱的声妞,调哪里上下?
这一句里面:
margin: 230px 0 30px calc(50% - 990px);

好的似乎明白了些,抱抱静妞
点评
回复

使用道具

 楼主| 发表于 2024-7-24 22:28 | 显示全部楼层
云笛 发表于 2024-7-24 22:19
很高兴又见着声妞来了,晚上我一直挂版没看帖子,刚空下来刷新看见你新作了 ...

哈哈,见到笛宝真是开心啊,来来抱一抱
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-10 10:31

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表