先上要实现的效果图：
方案一：来自卢兄：
<!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>