为什么只学有用的相对慕课网居中对齐是上移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> <span class="sp2">只学有用的</span><span class="sp3">!</span></p>
</div>
</body>
</html>7
收起
正在回答
3回答
你好同学 , 像同学描述的情况,确实有一点不便于维护。不过我们入门阶段 ,最重要的是学习基础知识。因为代码是很灵活的 ,实现方式多种多样 。 一个效果 ,我们先鼓励大家 ,尝试各种思路去实现它。让大家能灵活使用所学知识实现效果 ,并锻炼大家的思维。等我们的基础知识掌握扎实后 ,再去考虑哪种方法更简洁 , 利于维护等。这样学习才更好哦。
同学描述的问题解决方式,可以给慕课网和只学有用的两各span都设置vertical-align: middle; ,让它们相互对齐。
祝学习愉快 ,望采纳。
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星