简约缩略图页面设计-优快云博客

效果与目的：

一个简约的缩略图页面，显示一些小图片，每幅图片链接到相应的图片页面。比如链接到之前的照片浏览页面，进行大图片的浏览！

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title>相片缩略图页面</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link type="text/css" href="css.css" mce_href="css.css" rel="stylesheet" /></head><body> <div id="content"> <h1><a href="/" mce_href="">图片集</a> » 相册: <em>Firenze, Italia 2006</em></h1> <ul class="thumbnails"> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb1.jpg" mce_src="images/thumb1.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb2.jpg" mce_src="images/thumb2.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb3.jpg" mce_src="images/thumb3.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb4.jpg" mce_src="images/thumb4.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb5.jpg" mce_src="images/thumb5.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb6.jpg" mce_src="images/thumb6.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb7.jpg" mce_src="images/thumb7.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb8.jpg" mce_src="images/thumb8.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb9.jpg" mce_src="images/thumb9.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb10.jpg" mce_src="images/thumb10.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb11.jpg" mce_src="images/thumb11.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb12.jpg" mce_src="images/thumb12.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb13.jpg" mce_src="images/thumb13.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb14.jpg" mce_src="images/thumb14.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb15.jpg" mce_src="images/thumb15.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb16.jpg" mce_src="images/thumb16.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb17.jpg" mce_src="images/thumb17.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb18.jpg" mce_src="images/thumb18.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb19.jpg" mce_src="images/thumb19.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb20.jpg" mce_src="images/thumb20.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb21.jpg" mce_src="images/thumb21.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb22.jpg" mce_src="images/thumb22.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb23.jpg" mce_src="images/thumb23.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb24.jpg" mce_src="images/thumb24.jpg" /></a></li> <li><a href="#" mce_href="#"><img alt="Thumb" src="images/thumb25.jpg" mce_src="images/thumb25.jpg" /></a></li> </ul> </div>  <ul class="navigation"> <li><a href="#" mce_href="#">«Previous</a></li> <li><a href="#" mce_href="#">Next»</a></li> </ul></body></html>

注意：可能是博客编辑器的原因，HTML代码显示时会莫名的添加一些属性，比如<img>标记里多出了mce_href和mce_src属性。所以在复制并使用代码的时候要相应进行修改处理。

CSS代码：

body { margin: 0; padding: 0; background-color: #fff; font: 62.5%/1.75em "Times New Roman", serif; color: #4d4d4d;}a:link, a { border-bottom: 1px dotted #960; text-decoration: none; color: #960;}a:hover { border-bottom: 1px solid #960;}h1 { margin: 0 6px; padding: 0 0 .5em 0; font-style: italic; font-weight: normal; font-size: 1.25em; line-height: 2.375em; color: #ccc;}h1 em { color: #4d4d4d;}h1 a:link, h1 a, h1 a:hover, h1 a em, h1 a:link em, h1 a:hover em { border-color: #999; color: #999;}img { display: block; margin: 0 auto 5px auto; border: 1px solid #ccc; border-bottom-color: #eee; border-left-color: #ddd; border-top-color: #bbb;}#content { margin: 0 auto 20px 20px; padding: 1em 0 0 0; width: 512px; background-color:#fff; font-size: 1.25em; line-height: 1.75em;}ul.thumbnails a { display: block; float: left; margin: 0; padding: 4px 4px 9px 4px; border: 1px solid #ccc; border-top-color: #eee; border-right-color: #ddd; border-bottom-color: #bbb; background-color: #fff; text-align: center;}ul.thumbnails a { width: 80px; margin-right: 10px; margin-bottom: 10px;}ul.thumbnails a:hover { border: 1px solid #ccc; background-color: #eee;}ul.thumbnails a { width: 80px; margin-right: 10px; margin-bottom: 10px;}ul.thumbnails { margin: 0 0 10px 0; padding: 0; float: left; text-align: center; background-color: #fff; line-height: 1em; list-style: none;}ul.thumbnails li, ul.navigation li { display: inline; margin: 0; padding: 0;}ul.navigation { margin: 0 0 10px 0; padding: 0; float: left; text-align: center; background-color: #fff; line-height: 1em; list-style: none; position: absolute; top: 58px; left: 550px;}ul.navigation li { display: inline; margin: 0; padding: 0;}ul.navigation a { display: block; float: left; margin: 0 10px 10px 0; padding: 4px 4px 6px 4px; border: 0; background-color: #fff; text-align: center; width: 80px;}ul.navigation a:hover { background-color: #eee; border: 0;}