简约图片展示页面设计-优快云博客

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

效果与目的：

网页上显示照片或者图片，加上一个标题，一段描述，提供导航切换。用CSS进行样式设置，包括图片标题、图片描述的拓扑结构和颜色设置样式，设置框架、页边距和布局样式，并设置用于导航的缩略图。

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>
  <meta http-equiv=Content-Type content="text/html; charset=gb2312">
  <link type="text/css" href="css.css" rel="stylesheet" />
  <title>一种简约的浏览图片页面</title>
</head>
<body>
<!--图片、标题和描述包含在一个div块元素内，设置id属性为content用于设置CSS样式-->
<div id="content">
	<!--h1作为导航和标题的简洁显示--> 
  <h1><a href="#">图片</a> » <a href="#">相簿: <em>佛罗伦萨, 意大利 2006</em></a> » <em>Castello Il Palagio 果园</em></h1>
	<!--图片包含在一个段落P里，更易于定位和设置样式；被包含在A锚点里，便于设置链接；为这个段落设置为photo类-->
  <p class="photo"><a href="#"><img alt="Castello Il Palagio 果园" src="images/photo.jpg " /></a></p>
	<!--图片的描述文本也放在description类型段落里-->
  <p class="description">A beautiful day for a wine-tasting and tour at <em>Castello Il Palagio</em> in Firenze, Italia.</p>
</div>
<!--导航缩略图 -->
<ul class="navigation">
  <li><a href="#"><img src="images/thumb1.jpg" alt="Thumb: Graffiti" /><br />« 涂鸦</a></li>
  <li><a href="#"><img src="images/thumb3.jpg" alt="Thumb: Ponte Vecchio" /><br />维琪奥桥 »</a></li>
</ul>
</body>
</html>

CSS代码：

/*CSS STYLE SHEET FOR [Web Site] 
	Created by [Serein_Chan]
	Email: [Serein_Chan@foxmail.com]
	Author Blog:[http://blog.youkuaiyun.com/cxwen78]
*/
/*body的样式 */
body {
  margin: 0;
  padding: 0;
  background-color: #fff;
  font: 62.5%/1.75em "Times New Roman", serif;  /*首选字体Times New Roman；serif为CSS的5种通用字体之一*/
  color: #4d4d4d;
}
/*包含图片、标题和描述的div块元素的样式，该块class属性为content*/
#content {
  margin: 0 auto 20px 20px;	/*margin设置元素的外边距属性，有四个值，依次对应上、右、下和左 */
  padding: 1em 0 0 0;	/*padding 简写属性声明元素内边距属性，有四个值，依次对应上、右、下和左 */
  width: 512px;		/*因为图片宽度只有500px，宽度值设为512px为图片有12px的边框空间*/
  background-color:#fff;
  font-size: 1.25em; 
  line-height: 1.75em;
}
/*设置标题h1的样式*/
h1 {
  margin: 0 6px;
  padding: 0 0 .5em 0;
  font-style: italic;	/* italic：斜体的字体样式*/
  font-weight: normal;	/* 设置文本的粗细*/
  font-size: 1.25em;
  line-height: 2.375em;
  color: #ccc;	 /* 字体颜色为灰色*/
}
/*设置包含在h1中的锚点a，再被锚点包含下的em(强调)样式，包括未访问和鼠标悬停两个状态时的样式*/
h1 a:link, h1 a, h1 a:hover, h1 a em, h1 a:link em,  h1 a:hover em {
  border-color: #999;	/*设置四条边框的颜色*/
  color: #999;
}
/*设置锚点链接的样式以及未访问状态链接的样式*/
a, a:link {
   /*border-bottom规定下边框的属性，3个值依次对应下边框的宽度、下边框的样式和下边框的颜色。dotted表示点状边框*/
  border-bottom: 1px dotted #960;	
  text-decoration: none;	/*text-decoration 规定添加到文本的修饰，值为none表示无修饰*/
  color: #960;
}
a:hover {
  border-bottom: 1px solid #960;	/*solid：边框为实线*/
}
h1 em {
  color: #4d4d4d;
}
/*为图片设置样式，使得图片周围有一个嵌入式的边框，然后在这个边框的周围有一个浮出式的边框*/
img {
  display: block;	 /*display 属性规定元素生成的框的类型；block说明规定为块级元素，此元素前后会带有换行符。*/
  border: 1px solid #ccc;	/*使用1px宽的实边框，颜色为#ccc*/
  border-bottom-color: #eee;	/*颜色由深至浅为#bbb，#ccc，#ddd，#eee */
  border-left-color: #ddd;			/*颜色由深至浅对应的边框为上、右、左、下*/
  border-top-color: #bbb;			/*通过上诉的边框颜色深浅变化实现图片嵌入的显示效果*/
  margin: 0 auto 5px auto;		/*图片下边框添加5px的外边距*/
}
/*设置显示图片的段落样式*/
p.photo {
  margin: 0 0 10px 0;
  float: left;		/*确保应用到包含图片的链接的外边框与图片自然的对齐，将段落和链接浮动到左侧*/
  width: 75%;	/*给段落应用75%的宽度值，避免外边框在IE浏览器内占据整个页面宽度*/
  text-align: center;
  background-color: #fff;
  line-height: 1em;
}
/*包含图片的链接样式设置，通过添加4px的补白，设置边框渐变颜色，实现浮出的外边框效果*/
p.photo 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;
}
/*设置鼠标悬停样式，变化成浅灰色背景，统一边框颜色*/
p.photo a:hover {
  border-color: #ccc;
  background-color: #eee;
}

p.description {
  clear: left;	/*clear 属性规定元素的哪一侧不允许其他浮动元素*/
}

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;	/*top属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移*/
  left: 550px;	 /*left属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移*/
}
ul.navigation li {
  display: inline;	/*此元素会被显示为内联元素，元素前后没有换行符*/
  margin: 0;
  padding: 0;
}
ul.navigation a {
  display: block;
  float: left;
  margin: 0 10px 10px 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;
  width: 80px;	/*因为缩略图大小为宽高都是75px，所以用80px的宽度值*/
}
ul.navigation a:hover {
  background-color: #eee;
  border: 1px solid #ccc;
}