zoukankan      html  css  js  c++  java
  • CSS缎带效果

    1. [代码]ribbon.html     
    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    .ribbon-content {
        border: 1px solid #DDD;
        font-weight: bold;
        margin: 0 -10px;
        min-height: 30px;
        padding: 7px 31px;
        text-align: center;
        line-height: 30px;
    }
     
    .ribbon-left {
        display: block;
        border-left: 10px solid white;
        border-top: 8px solid #EEE;
        float: left;
        height: 0;
        margin-left: -10px;
        0;
    }
     
    .ribbon-right {
        display: block;
        border-right: 10px solid white;
        border-top: 8px solid #EEE;
        float: right;
        height: 0;
        margin-right: -10px;
        0;
    }
    </style>
    </head>
    <body>
    <div style="margin: 0 auto; 200px;">
        <div class="ribbon" style="background: whiteSmoke;">
            <div class="ribbon-content" style="background: whiteSmoke;">标题</div>
            <div class="ribbon-left"></div>
            <div class="ribbon-right"></div>
        </div>动漫flash:http://www.huiyi8.com/donghua/​
        <div style="background: whiteSmoke;">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
    </div>
    </body>
    </html>

  • 相关阅读:
    python RabbitMQ gRPC 实践经验
    python 数据库实践经验
    python GUI相关
    angularjs中的$watch、$digest、$apply
    css选择器优先级
    angularjs基本理解
    如何编写符合web标准的XHTML文档
    跨域问题
    如何养成良好的书写代码习惯
    ie常见兼容问题
  • 原文地址:https://www.cnblogs.com/xkzy/p/4087324.html
Copyright © 2011-2022 走看看