CSS之简易相册

来源：互联网发布：淘宝哪家锂电池好编辑：程序博客网时间：2024/05/16 11:58
<!DOCTYPE html><html><head>   <meta charset="utf-8">    <title></title>    <style type="text/css">        *{            margin: 0;            padding:0;        }        #photo{            position: relative;            width: 748px;            height: 590px;            margin: 0 auto;            background: #333333;        }        h1{            position: absolute;            bottom: 10px;            right: 10px;            width: 10px;            height: 10px;            text-align: right;            font: normal 12px/1.5em  "宋体";             color: #FFFFFF;        }        ul{            list-style: none;            float: right;            width: 148px;            height: 590px;            list-style: none;        }        li{            float: left;            width: 54px;            height: 54px;            margin: 10px;            display: inline;            overflow: hidden;        }        li a{            display: block;            width: 50px;            height: 50px;            overflow: hidden;            border:2px solid #CCCCCC;        }        img{            display: block;            border:0 none;            margin: -150px 0 0 -80px;        }        li a:hover{            border:2px solid #000000;        }        li a:hover img{            position: absolute;            top:10px;            top:10px;            left: 10px;            margin: 0;            border:2px solid #FFFFFF;        }    </style></head><body><div id="photo"><h1>简易相册</h1><ul>    <li><a  href="#"><img src="1.jpg"></a></li>    <li><a  href="#"><img src="2.jpg"></a></li>    <li><a  href="#"><img src="3.jpg"></a></li>    <li><a  href="#"><img src="4.jpg"></a></li>    <li><a  href="#"><img src="5.jpg"></a></li>    <li><a  href="#"><img src="6.jpg"></a></li>    <li><a  href="#"><img src="7.jpg"></a></li>    <li><a  href="#"><img src="8.jpg"></a></li>    <li><a  href="#"><img src="9.jpg"></a></li></ul>   </div></body></html>
0 0