仿淘宝的付款提示效果

来自:http://www.cnblogs.com/Aphex/p/3238300.html

通过css实现。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>

        <style type="text/css">
            
            .success{background:#efffe2;border:1px solid #97b482}
            .error{background:#fff2f2;border:1px solid #ff8080}
            .prompt .status{padding-left:125px;font-weight:bold;font-size:18px;background:url(http://url.cn/GyBhAI) no-repeat 0 0;height:32px;line-height:28px}
            .success .status{background-position:87px 0}
            .error .status{background-position:87px -62px}
            .prompt .status em{margin:0 5px;font-family:tahoma;font-style:normal;font-weight:normal}
            .prompt em{color:#F60}
            .content{width:960px;margin:0 auto}
            
        </style>

    </head>
    <body>
        
        
        <div class="content">
        
            <div class="prompt error">
                <p class="status">您已成功付款<em>355.00</em>元!</p>
            </div>
            
            <div class="prompt success" style="margin-top: 10px">
                <p class="status">您已成功付款<em>355.00</em>元!</p>
            </div>

        </div>

    </body>
</html>
仿淘宝提示html页面
原文地址:https://www.cnblogs.com/gmth/p/3238463.html