相册列表页面设计与实现-优快云博客

本文链接：https://blog.youkuaiyun.com/cxwen78/article/details/6583411

效果与目的：

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

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>
	<!--id为content的DIV块展示相册列表和每个相册的相关信息-->
  <div id="content">
	<!--h1显示标题，字体效果为斜体、加粗，其他效果由CSS添加-->
    <h1><em><strong>相片</strong></em></h1>

	<!--h2显示相册的标题，其中标题添加了锚点链接，可以链接进入指定相册-->
    <h2><a href="#">Firenze, Italia 2006</a></h2>
	<!--P段落展示包含链接的相册的封面图片和相册的相片数目，其中插入了换行br-->
    <p class="thumb"><a href="#"><img alt="Thumbnail: Firenze, Italia 2006" src="images/thumb1.jpg" /><br />259 Photos</a></p>
	<!--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属于块级元素，用来显示页面的导航-->
  <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;
}