核心提示：1、分析这个效果看起来很简单，实际上可能并不那么容易实现。首先是全部东西都居中显示，除了亲爱的starof这个称呼的地方。这也是难点，也是本文要重点说的地方。开始我尝试将 亲爱的starof: 和下面...
1、分析
这个效果看起来很简单，实际上可能并不那么容易实现。
首先是全部东西都居中显示，除了“亲爱的starof”这个称呼的地方。这也是难点，也是本文要重点说的地方。
开始我尝试将“ 亲爱的starof:” 和下面那段文字分别独立成两个段落，一个居左，一个居左。结果当然是不理想的，因为“亲爱的starof”部分其实并不是真正意义上的居左，而是以下面这段文字作为参考的一个居左。现在说说我的实现方法。首先全部文字都用<p>包裹，inline-block显示，然后绝对定位。具体过程如下，各位如有不同见解或实现方式欢迎指点讨论。
2、实现
第一步，代码基础框架如下
全部文字都放在一个<p>标签内。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>demo of starof</title>
<style>
.top{
margin:0 5%;
text-align:center;
}
.top span{
color:red;
}
</style>
</head>
<body>
<p class="top">
<p class="first"> <span> 亲爱的starof:</span><br/>
恭喜您获得快速升级年费资格，您仅需开通<span>4个月</span>会员，即可自动升级为尊贵的年费会员，差额部分享受<span>8折优惠</span>哦!
</p>
</p>
</body>
</html>
