简约相册列表页设计-优快云博客

效果与目的：

展示相册或者图册列表的简约页面。页面内的信息包含如下内容：

1、对相册的简单描述；

2、相册中的图片数；

3、相册的封面。

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="gallery.css" rel="stylesheet" /> </head> <body>  <div id="content">  <h1><em><strong>相片</strong></em></h1>  <h2><a href="#">Firenze, Italia 2006</a></h2>  <p class="thumb"><a href="#"><img alt="Thumbnail: Firenze, Italia 2006" src="images/thumb1.jpg" /><br />259 Photos</a></p>  <p>Living in Firenze, Italia {Florence, Italy} for one month. This is the highlight of my life.</p>  <h2><a href="#">Boston, Massachusetts 2006</a></h2> <p class="thumb"><a href="#"><img alt="Thumbnail: Boston, Massachusetts 2006" src="images/thumb26.jpg" /><br />38 Photos</a></p> <p>From my business trip to Boston {May 2006} when Vineet & I were working on Mass.gov.</p> <h2><a href="#">Barcelona, España 2006</a></h2> <p class="thumb"><a href="#"><img alt="Thumbnail: Barcelona, España 2006" src="images/thumb27.jpg" /><br />110 Photos</a></p> <p>My first venture into Europe & a wonderful week of great food, art, architecture, & culture.</p> </div>  <ul class="navigation"> <li><a href="#">«Previous 3 Sets </a></li> <li><a href="#">Next 3 Sets»</a></li> </ul> </body> </html>

CSS代码：

/*CSS STYLE SHEET FOR [相册列表页面] Created by [Serein_Chan] Email: [Serein_Chan@foxmail.com] Author Blog:[http://blog.youkuaiyun.com/cxwen78] */ 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; } /*设置相册列表块的样式效果*/ #content { margin: 0 auto 20px 20px; padding: 1em 0 0 0; width: 512px; /*设置宽度，以免水平占据整个区域*/ background-color:#fff; font-size: 1.25em; line-height: 1.75em; } 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; } h2 { margin: 0 0 5px 0; font-weight: normal; font-size: 1.5em; text-align: left; clear: left; } /*通过设置上下左右四个边框的不同颜色，实现相册标题在凸的框上显示的效果*/ h2 a:link, h2 a { display: block; padding: 0 5px; border: 1px solid #ccc; border-top-color: #eee; border-right-color: #ddd; border-bottom-color: #bbb; } /*鼠标悬浮在相册标题上时背景变灰，边框统一颜色，起到提示的效果*/ h2 a:hover { border-color: #ccc; background-color: #eee; } /*设置段落P和ul的内外边距*/ p, ul{ padding: 0; margin: 0 6px; } /*设置相片的样式，主要是边界的效果*/ img { display: block; margin: 0 auto 5px auto; /*下外边距留出5px显示相片数目*/ border: 1px solid #ccc; border-bottom-color: #eee; border-left-color: #ddd; border-top-color: #bbb; } /*在相册的封面和相片数目之间添加的换行*/ br { display: none; } p.thumb a { display: block; float: left; width: 80px; /*根据相册封面图大小而设置75*75 */ margin-right: 10px; margin-bottom: 10px; padding: 4px 4px 9px 4px; /*内边距的设置上左下右分别为4、4、9、4，其中实际占据的水平空间为4+4+1+1+80=90 */ border: 1px solid #ccc; border-top-color: #eee; border-right-color: #ddd; border-bottom-color: #bbb; background-color: #fff; text-align: center; } p.thumb a:hover{ border: 1px solid #ccc; background-color: #eee; } p.thumb{ margin: 0 0 10px 0; padding: 0; float: left; text-align: center; background-color: #fff; line-height: 1em; list-style: none; } /*导航的样式*/ 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; /*以父元素body为基准进行绝对定位*/ top: 58px; /*上边界离父元素body58px*/ left: 550px; /*左边界离父元素body550px*/ } 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; }