先上要实现的效果图：
方案一：来自卢兄：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap { width: 960px; margin:0 auto; text-align: center; font-size: 14px; line-height: 1.41; }
.dear { color: #f00; text-align: left; }
em { color: #f00; font-style: normal; }
.btn {display: inline-block;*display: inline;*zoom:1;width: 150px;line-height: 40px;color:#fff;background-color: #f00;text-align: center;text-decoration: none;border-radius: 3px;}
</style>
</head>
<body>
<div class="wrap">
<p class="dear">亲爱的:</p>
<p class="content">恭喜您，您仅需开通<em>4个月</em>会员，想休息休息，差额享受<em>8折优惠</em></p>
<a class="btn" href="javascript:;">立即升级</a>
<p class="now">已有<em>23919</em>人享此优惠</p>
</div>
</body>
</html>
效果图：
方案二：来自王胖兄:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.out{width: 90%;padding: 0.5%;border: solid 5px green}
.in{display: inline-block}
.gray{color:#666666}
.red{color: red}
.tc{text-align: center}
.tl{text-align: left;}
.btn {display: inline-block;*display: inline;*zoom:1;width: 150px;line-height: 40px;color:#fff;background-color: #f00;text-align: center;text-decoration: none;border-radius: 3px;}
</style>
</head>
<body>
<div class="out tc">
<div class="in tl">
<p class="red">亲爱的蓝色月光:</p>
<p class="gray ">恭喜您获得快速升级年费资格，您仅需开通<span class="red">4个月</span>会员，即可自动升级为尊贵的年费会员，差额部分享受<span class="red">8折优惠</span>哦!</p>
<p class="tc"><a href="#" CLASS="btn">立即升级</a></p>
</div>
</div>
</body>
</html>
效果图：
当然还有方案三：来自这个问题的原作者：http://www.cnblogs.com/starof/p/4832947.html
当然方案四：lz还没有实现，不过贴出来 作为反面教材给大家吧：
<!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>
<div class="top">
<div style="float: left"><span>亲爱的starof:</span></div>
<div style="clear: both"></div>
<p class="first">
恭喜您获得快速升级年费资格，您仅需开通<span>4个月</span>会员，即可自动升级为尊贵的年费会员，差额部分享受<span>8折优惠</span>哦!
</p>
<div>
<button>亲爱的</button>
</div>
</div>
</body>
</html>
时间： 2024-12-20 13:16:12