为什么只学有用的相对慕课网居中对齐是上移15px,这个值是怎么得出来的?

为什么只学有用的相对慕课网居中对齐是上移15px,这个值是怎么得出来的?

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>4-1</title>
	<style type="text/css">
		p {
			background-color: #ececec;
			height: 150px;
			text-align: center;
			line-height: 150px;
		}
		.sp1 {
			color: #c9394a;
			font-size: 80px;
			font-weight: bold;
		}
		.sp2 {
			color: gray;
			font-size: 40px;
			vertical-align: 15px;
			text-decoration: underline;
			letter-spacing: 5px;
		}
		.sp3 {
			color: gray;
			font-size: 80px;
			font-weight: bold;
			font-style: oblique;
		}
	</style>
</head>
<body>
	<div>
		<p><span class="sp1">慕课网</span>&nbsp;&nbsp;<span class="sp2">只学有用的</span><span class="sp3">!</span></p>
	</div>
</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

3回答

你好同学 ,  像同学描述的情况,确实有一点不便于维护。不过我们入门阶段 ,最重要的是学习基础知识。因为代码是很灵活的 ,实现方式多种多样 。 一个效果 ,我们先鼓励大家 ,尝试各种思路去实现它。让大家能灵活使用所学知识实现效果 ,并锻炼大家的思维。等我们的基础知识掌握扎实后 ,再去考虑哪种方法更简洁 , 利于维护等。这样学习才更好哦。

同学描述的问题解决方式,可以给慕课网和只学有用的两各span都设置vertical-align: middle; ,让它们相互对齐。

祝学习愉快 ,望采纳。

好帮手慕夭夭 2019-03-28 19:32:18

你好同学 ,这里设置15px并不是计算的 ,这里只是设置了一个大概的值 , 然后效果看起来就居中了哦。

祝学习愉快 ,望采纳 。

  • 提问者 慕粉0313810 #1
    那如果以后修改了慕课网字体的大小,只学有用的就有可能不相对居中了,那程序不是不利于维护吗?
    2019-03-28 19:37:36
慕仰2255090 2019-03-28 16:33:53

你自己设置的15PX啊,你不会设置middle居中啊?

  • 提问者 慕粉0313810 #1
    你自己设置middle试一下看看是不是居中?另外,15px是视频里边设置的,我只是把代码放上来而已!
    2019-03-28 16:35:08
  • bbbboom 回复 提问者 慕粉0313810 #2
    15px这个值是老师大致估算的
    2019-03-28 19:21:43
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师