初学CSS样式让一行显示两行文字及删除线颜色改变的探索（第一次写博客求指点）

突然看到一段这样的样式，也是因为正在学网页设计，所以突发奇想，想用网页设计也做出这样的效果。
在我首先拿到图的时候，想了想最难的地方可能就是如何让两行文字在一行显示。

第一个想到的是用定义上下标的形式

用<sub>和<sup>定义它的上下标，达到效果。在具体实现的时候发现有一个距离问题

然后我用了margin-left:-90px;强行修改外边距（萌新的操作）
也算是达到了想要的效果吧，但是看起来太分散。

第二次继续尝试，抛弃了这种方式，改用div的形式。

首先定义了三个div用display把他们转为行内块级元素

<div class="div_bj">祝贺</div>
<div class="div_bj"><span class="div_x">张馒头廖花卷</span></div>
<div class="div_bj">鼠年<span class="sp_kl">
<span style="color:#000000;">大吉</span>
</span></div>

.div_x{
     position:relative;
  bottom:7px;
  font-size:15px;
  width:55px;
  height:20px;
  display:inline-block;
  margin-top:10px;
  }

就这样用了css的position：relative;属性，定义了div的相对位置。这次看起来就紧凑的多了。

第三次打算用table的形式

主要代码如下：

<table width="315" height="40px">
<tr>
<td width="75" rowspan="2">
<p style="font-size:36px;">祝贺</p></td>
<td width="51" height="20px" valign="bottom">张馒头</td>
<tr>
<td height="20px" valign="top">廖花卷</td>
</tr>
</table>

用合并表格进行控制显示的效果

这种方式虽然我用valign设置了对齐方式，但是看起来还是有一丢丢间隙。设置了表格的宽度，发现还是会被内容给撑开，暂时没有想到更好的方法。

最后再说一下删除线改变颜色

在实践的过程中，我想仅用color改变删除线的颜色，发现改的时候整体都会被改掉，借鉴了百度资料

<span class="sp_kl">
<span style="color:#000000;">大吉</span>
</span>

.sp_kl{
  text-decoration:line-through;
  color:red;
}

使用了text-decoration属性定义了文本修饰，单独设置了删除线的属性。

总结：

目前我只想到这三种方式达到预览的效果，三种方式都是自己瞎拼凑的，不过这也算是练习了自己学过的知识，收益还是颇大。
我不知道在正式网页设计的时候怎么达成这种行的合并，本人小白，期待各位大牛指点指点。