帮助了 AmazingCounters.com 位小伙伴

display: inline-block 的神奇效果

先上要实现的效果图:

方案一:来自卢兄:

<!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>
View Code

 

posted on 2015-09-24 11:29  云的旋律  阅读(491)  评论(0编辑  收藏  举报

导航

前端攻城狮分享群