zoukankan      html  css  js  c++  java
  • 仿淘宝的付款提示效果

    来自: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页面
  • 相关阅读:
    bootstrap
    移动视口,以及适配
    CSS线性渐变
    css之什么是bfc
    css 深入进阶之定位和浮动三栏布局
    webpack 4 技术点记录
    jQuery的学习总结
    jQuery 知识大全
    JS高级进阶
    正则
  • 原文地址:https://www.cnblogs.com/gmth/p/3238463.html
Copyright © 2011-2022 走看看