css制作一款相册

这个是看了鬼佬的一篇文章之后参考他的代码写的,终于感觉到鬼佬的创意了.而同时感觉我们缺少的只是创意,而并不是技术,也许这个就是国家之间的差异吧.

body{
	font:12px Georgia, 'Times New Roman', Times, serif;
	text-align:center;
	background:#9c9a9c;
}
img{
        border:0;
	}
h1{
        background:#638AAD;
	font-size:14px;
	color:#fff;
	font-weight:bold;
	padding:5px 0;
	}
#one{
        margin:10px  auto;
	list-style:none;
	background:url(../images/photo_06.jpg) no-repeat;
	width:595px;
	height:300px;
	overflow:auto;
	}
#one li{
        float:left;
	display:block;
	border-right:1px solid #000;
	}
a{
        display:block;
	text-decoration:none;
	cursor:default;
	margin:0;
	}
#one a:link,#one a:visited{
        width:30px;
	height:300px;
	overflow:hidden;

 }
#one a:link img{
        width:30px;
	height:300px;
	border:0;
}
#one a:hover{
        width:436px;
	height:300px;
		  }
#one a:hover img{
        width:436px;
}
#two{
        margin:10px auto;
	width:436px;
	height:425px;
	list-style:none;
	background:url(../images/photo_07.jpg);
	display:block;
}
#two li{
        display:block;
	border-bottom:1px solid #000;
	margin-top:0 !important;
	margin-top:-3px;
		 }
#two a:link,#two a:visited{
        width:436px;
	height:30px;
	overflow:hidden;
		 }
#two a:link img{
	width:436px;
        height:30px;
	display:inline;
		 }
#two a:hover{
        height:300px;
	width:436px;
		 }
#two a:hover img{
        height:300px;
}
#back{
        margin:10px auto;
}
#back a{
        width:40px;
	cursor:pointer;
	padding:5px 0;
	margin: 0 0 0 480px !important;
	margin:0;
}
#back a:link,#back a:visited{
        background:#dedfce;
	color:#4b648c;
		}
#back a:hover{
	   color:#cc3300;
}

列型
<ul id="one">
<li><a href="#"><img src="../images/photo_01.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_02.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_04.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_05.jpg" alt="" /></a></li>
</ul>

树型
<ul id="two">
<li><a href="#"><img src="../images/photo_01.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_02.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_03.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_04.jpg" alt="" /></a></li>
<li><a href="#"><img src="../images/photo_05.jpg" alt="" /></a></li>
</ul>

从代码中可以看到,主要是a在起作用.

不过这里还有一个问题,就是树型在ie下有bug的,不知道为什么每张图片之间总是有那么几个象素的空隙,因此在看图片的时候可以看到横向和竖向都有滚动条,想了很久,还是解决不了.

原始状态和鼠标经过的状态

原始的个站转移了