zoukankan      html  css  js  c++  java
  • 用HTML,css完成的百叶窗效果,新手必看

    <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8">
      <title></title>
      <style type="text/css">
       * {
        margin: 0;
        padding: 0;
       }
       body{
        background-color: #cccccc;
        background: url(img/triangles.png) repeat;
       }
       .container{
         805px;
        height: 320px;
        overflow: hidden;
        margin: 100px auto;
        -webkit-box-shadow: 0 0 5px #000;
       }
       .container li{
        160px;
        display: block;
        position: relative;
        float: left; 
        border-left: 1px solid #888; 
        -webkit-box-shadow: 0 0 25px #000;
        -webkit-transition: all 0.5s;
       }
       
       .container ul:hover li { 40px;}
       .container ul li:hover { 640px;}
       .container li img {
        display: block;
       }
       .image_title {
        background: rgba(0, 0, 0, 0.5);
        position: absolute;
        left: 0;
        bottom: 0; 
         640px; 
       }
       .image_title a {
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 20px;
        font-size: 16px;
       }
      </style>
     </head>
     <body>
      <div class="container">
       <ul>
        <li>
         <div class="image_title">
          <a href="#">KungFu Panda</a>
         </div>
         <a href="#">
          <img src="img/img1.jpg">
         </a>
        </li>
         <li>
       <div class="image_title">
        <a href="#">Toy Story 2</a>
       </div>
       <a href="#">
        <img src="img/img2.jpg">
       </a>
       </li>
      <li>
       <div class="image_title">
        <a href="#">Wall-E</a>
       </div>
       <a href="#">
        <img src="img/img3.jpg">
       </a>
      </li>
      <li>
       <div class="image_title">
        <a href="#">Up</a>
       </div>
       <a href="#">
        <img src="img/img4.jpg">
       </a>
      </li>
      <li>
       <div class="image_title">
        <a href="#">Cars 2</a>
       </div>
       <a href="#">
        <img src="img/img5.jpg">
       </a>
      </li>
       </ul>
      </div>
     </body>
    </html>

  • 相关阅读:
    简明Python3教程 12.问题解决
    简明Python3教程 11.数据结构
    【SPOJ 694】Distinct Substrings
    【codeforces Manthan, Codefest 17 C】Helga Hufflepuff's Cup
    【CF Manthan, Codefest 17 B】Marvolo Gaunt's Ring
    【CF Manthan, Codefest 17 A】Tom Riddle's Diary
    【SPOJ 220】 PHRASES
    【POJ 3261】Milk Patterns
    【POJ 3294】Life Forms
    【POJ 1226】Substrings
  • 原文地址:https://www.cnblogs.com/tong-yao/p/10232079.html
Copyright © 2011-2022 走看看