zoukankan      html  css  js  c++  java
  • CSS_照片墙例子 相对定位

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>照片墙</title>
    <style type="text/css">
    body{
    background-color: #066
    }
    ul{
    /*border: 1px solid red;*/
    780px;
    margin: 20px auto;
    /*去掉前边的符号*/
    list-style-type: none;
    }

    li{
    border: 1px solid #ccc;
    padding: 10px;
    margin: 10px;
    float: left;
    background-color: #fff;
    }
    p{
    text-align: center;
    font-family: "微软雅黑","文泉驿正黑","黑体"
    }
    /*鼠标悬停时,让li向右上方偏移2px,从而实现抖动的效果*/
    li:HOVER {
    position: relative;
    left:2px;
    top:-2px;
    }
    </style>


    </head>
    <body>
    <ul>
    <li>
    <img alt="" src="../images/01.jpg">
    <p>西天取经师徒</p>
    </li>

    <li>
    <img alt="" src="../images/02.jpg">
    <p>大唐高僧唐三藏</p>
    </li>

    <li>
    <img alt="" src="../images/03.jpg">
    <p>花果山齐天大圣</p>
    </li>

    <li>
    <img alt="" src="../images/04.jpg">
    <p>高老庄天蓬元帅</p>
    </li>

    <li>
    <img alt="" src="../images/05.jpg">
    <p>流沙河卷帘大将</p>
    </li>

    <li>
    <img alt="" src="../images/06.jpg">
    <p>西海八部天龙</p>
    </li>

    </ul>
    </body>
    </html>

  • 相关阅读:
    Pascal's Triangle II
    Pascal's Triangle
    Path Sum II
    Path Sum
    plusOne
    Divide Two Integers
    64. ZigZag Conversion
    63. Swap Nodes in Pairs && Rotate List && Remove Nth Node From End of List
    62. Divide Two Integers
    61. Unique Paths && Unique Paths II
  • 原文地址:https://www.cnblogs.com/Bighua123/p/7591664.html
Copyright © 2011-2022 走看看