zoukankan      html  css  js  c++  java
  • CSS特效(一)

    三角形

    <!-- log -->
    <div class="tri"></div>
    
    <style>
      .tri {
         0;
        height: 0;
        border-style: solid;
        border- 100px;
        border-color: transparent;
        border-right-color: red;
      }
    </style>
    

    大盒套小盒

    两个

    <!-- log -->
    <div class="wrapper">
      <div class="content"></div>
    </div>
    
    <style>
      .wrapper {
        padding: 100px;
         100px;
        height: 100px;
        background-color: green;
      }
      .content {
         100px;
        height: 100px;
        background-color: red;
      }
    </style>
    

    四个

    <!-- log -->
    <div class="div4">
      <div class="div3">
        <div class="div2">
          <div class="div1"></div>
        </div>
      </div>
    </div>
    
    <style>
      .div1 {
         10px;
        height: 10px;
        background-color: white;
      }
    
      .div2 {
         10px;
        height: 10px;
        padding: 10px;
        background-color: green;
      }
    
      .div3 {
         30px;
        height: 30px;
        padding: 10px;
        background-color: white;
      }
    
      .div4 {
         50px;
        height: 50px;
        padding: 10px;
        background-color: green;
      }
    </style>
    

    广告牌居中

    <!-- log -->
    <button id="banner-btn">点我显示居中</button>
    <div class="banner"></div>
    
    <style>
      .banner {
        display: none;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
        background-color: red;
         100px;
        height: 100px;
        z-index: 9999;
      }
    </style>
    <script>
      $('#banner-btn').click(function () {
        $('.banner').toggle()
      })
    </script>
    
  • 相关阅读:
    算法竞赛入门经典训练指南——UVA 11300 preading the Wealth
    hiho一下 第148周
    ajax总结及案例
    Spring事务
    Struts2拦截器介绍
    Struts2的拦截器----Dog实例
    Struts2文件的下载
    Struts2文件的上传
    Struts2类型转换
    Struts2 属性驱动、模型驱动、异常机制
  • 原文地址:https://www.cnblogs.com/oceans/p/13511108.html
Copyright © 2011-2022 走看看