您的位置：首页 > Web前端 > CSS

css相册小应用

2012-03-01 20:13 246 查看

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; 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:100px;

height:20px;

text-align:right;

font:normal 12px/1.5em "宋体";

color:#FFFFFF;}

ul{

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 #cccccc

}

li a:hover img{

position:absolute;

top:10px;

left:10px;

margin:0;

border:2px solid #ffffff

}

</style>

</head>

<body>

<div id="photo">

<h1>简易css相册</h1>

<ul>

<li><a href="#"><img src="images/1.jpg" ></a></li>

<li><a href="#"><img src="images/2.jpg" ></a></li>

<li><a href="#"><img src="images/3.jpg" ></a></li>

<li><a href="#"><img src="images/4.jpg" ></a></li>

<li><a href="#"><img src="images/5.jpg" ></a></li>

<li><a href="#"><img src="images/6.jpg" ></a></li>

<li><a href="#"><img src="images/7.jpg" ></a></li>

<li><a href="#"><img src="images/8.jpg" ></a></li>

<li><a href="#"><img src="images/9.jpg" ></a></li>

</ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航