纯CSS相册


最近都在研究javascript,CSS有点生疏了。是时候拿个东西练练手。

<dl> 
 <dt> 
  <a href="#index6">6</a><a href="#index5">5</a><a href="#index4">4</a><a href="#index3">3</a><a href="#index2">2</a><a href="#index1">1</a> 
 </dt> 
 <dd> 
  <img id="index1" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg" /> 
  <img id="index2" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg" /> 
  <img id="index3" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg" /> 
  <img id="index4" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg" /> 
  <img id="index5" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg" /> 
  <img id="index6" src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg" /> 
 </dd> 
</dl> 

  请原谅我的吝惜,自从谷歌相册被墙了后,博客园相册的那点空间真是捉襟见肘。上面的这个结构非常固定,大家死记硬背就好了。以后理想了便会轻松些。熟行的人一眼就会看出要使用到锚点。不知锚点为何物的人请自行google。dt里面的数字有点奇怪,是倒过来写的,很快你们就会明白了。
 <!doctype
html>
<title>纯CSS相册 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯CSS相册 by 司徒正美" />
<meta name="description" content="纯CSS相册 by 司徒正美" />
<dl> <dt> <a href="#index6">6</a><a
href="#index5">5</a><a href="#index4">4</a><a
href="#index3">3</a><a href="#index2">2</a><a
href="#index1">1</a> </dt> <dd> <img
id="index1" name="index1"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg"
/> <img id="index2" name="index2"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg"
/> <img id="index3" name="index3"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg"
/> <img id="index4" name="index4"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg"
/> <img id="index5" name="index5"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg"
/> <img id="index6" name="index6"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg"
/> </dd>
</dl>
经常光顾我的Blog的人可能会留意到,我运行框的HTML代码很简洁,也很奇怪,与Dreamweave生成网页模板出入很大。放心,这是通过验证的HTML5代码,有没有html,head,body等标签都无所谓。

  我先给大家描绘一下相册未来的样子。相册的大小与这些图片中的一张差不多,因为我们要做出翻页效果。它有一个边框,不用想就是用dl的border 实现。它有一个翻页栏,由dt实现。图片的显示界面由dd实现,我们可以用绝对定位把翻页栏置于图片的下面。图片显示界面每次只显示一张图片,多点的部分我们可以用overflow:hidden隐去。这样一来,相册的大小(指除去边框部分)就是图片的大小加翻页栏。现在每张图片为160 x 120,翻页栏我设定为160 x 24(宽度相一致),换言之dl的width为160px,height为142px(我们要保证相册呈长方形,这符合我们的生活常识。)我们最好还能图片设置一个2px宽的黑色边框,因为我们固定了图片的大小,让超出的部分隐藏,换言之,到时右边与下边都会隐去。这样与原来的大边框并在一起时,非常有立体感,就好像图片嵌入相册中,外面有一块玻璃一样。好了,先是这么多,翻页栏的按钮销后再说,全部float:right。

 dl {/*相册*/ 
  position:relative; 
  width:160px; 
  height:142px; 
  border:10px solid #EFEFDA;/*相册边框*/ 
 } 
 dd {/*相册的内容显示区,包含相片与下面的翻页栏*/ 
  margin:0;/*去除浏览器的默认设置*/ 
  padding:0;/*去除浏览器的默认设置*/ 
  width:160px; 
  height:120px; 
  overflow:hidden;/*重点,让每次只显示一张图片*/ 
 } 
 img { 
  border:2px solid #000;/*增加立体感*/ 
 } 
 dt {/*翻页栏*/ 
  position:absolute; 
  right:0px; 
  bottom:0px; 
  /*上面三步是用于把它固定于图片下方*/ 
  width:160px; 
  height:22px; 
  background:#FBFBEA; 
 } 
 a { 
   float:right; 
 } 

 <!doctype
html>
<title>纯CSS相册 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯CSS相册 by 司徒正美" />
<meta name="description" content="纯CSS相册 by 司徒正美" />
<style type="text/css"> dl {/*相册*/ position:relative;
width:160px; height:142px; border:10px solid #EFEFDA;/*相册边框*/ } dd
{/*相册的内容显示区,包含相片与下面的翻页栏*/ margin:0;/*去除浏览器的默认设置*/
padding:0;/*去除浏览器的默认设置*/ width:160px; height:120px;
overflow:hidden;/*重点,让每次只显示一张图片*/ } img { border:2px solid
#000;/*增加立体感*/ } dt {/*翻页栏*/ position:absolute; right:0px; bottom:0px;
/*上面三步是用于把它固定于图片下方*/ width:160px; height:22px; background:#FBFBEA; } a
{ float:right; } </style>
<dl> <dt> <a href="#indexb6">6</a><a
href="#indexb5">5</a><a href="#indexb4">4</a><a
href="#indexb3">3</a><a href="#indexb2">2</a><a
href="#indexb1">1</a> </dt> <dd> <img
id="indexb1" name="indexb1"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg"
/> <img id="indexb2" name="indexb2"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg"
/> <img id="indexb3" name="indexb3"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg"
/> <img id="indexb4" name="indexb4"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg"
/> <img id="indexb5" name="indexb5"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg"
/> <img id="indexb6" name="indexb6"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg"
/> </dd>
</dl>
天哪,我发现我们做事太有效率了,一下子相册就整出来,点击链接就能切换图片了。明白为什么能切换图片吗?!如果我们不设置 overflow:hidden,点击图片时网页其实有一个上下移动的状态发生,通过我们可以通过右边的滚动条观察到。这意味着什么呢?意味着 javascript的scrollTop发生作用了。scrollTop通常为零,当其为正数时,原来可视区的东西就向下位移。如果我们固定了可视区,并不显示滚动条呢?!下面的东西怎样才能跑到上面显示??答案显然易见,scrollTop这时变成负数。具体自己测试,按逻辑是这样的。

  我们再来看链接,float:right有个副作用,就是让最左一个跑到右边那几个的右边,因此我们的数字就要倒着写。最后收尾部分很简单,按实现ul水平菜单那样实现就行了。为了好看,我们加上半透明效果与悬浮效果。

 a { 
  display:block;/*让其拥有盒子模型*/ 
  float:right; 
  margin:2px;/*错开格子*/ 
  width:18px;/*呈正方形*/ 
  height:18px; 
  text-align:center;/*居中显示*/ 
  color:#fff;/*默认是蓝色,所以一定要重写*/ 
  text-decoration:none;/*消除下划线*/ 
  background:#666; 
  filter:alpha(opacity=70); 
  opacity:.7; 
 } 
 a:hover { 
  background:#000 
 } 

 <!doctype
html>
<title>纯CSS相册 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯CSS相册 by 司徒正美" />
<meta name="description" content="纯CSS相册 by 司徒正美" />
<style type="text/css"> dl {/*相册*/ position:relative;
width:160px; height:142px; border:10px solid #EFEFDA;/*相册边框*/ } dd
{/*相册的内容显示区,包含相片与下面的翻页栏*/ margin:0;/*去除浏览器的默认设置*/
padding:0;/*去除浏览器的默认设置*/ width:160px; height:120px;
overflow:hidden;/*重点,让每次只显示一张图片*/ } img { border:2px solid
#000;/*增加立体感*/ } dt {/*翻页栏*/ position:absolute; right:0px; bottom:0px;
/*上面三步是用于把它固定于图片下方*/ width:160px; height:22px; background:#FBFBEA; } a
{ display:block;/*让其拥有盒子模型*/ float:right; margin:2px;/*错开格子*/
width:18px;/*呈正方形*/ height:18px; text-align:center;/*居中显示*/
color:#fff;/*默认是蓝色,所以一定要重写*/ text-decoration:none;/*消除下划线*/
background:#666; filter:alpha(opacity=70); opacity:.7; } a:hover {
background:#000 } </style>
<dl> <dt> <a href="#indexa6">6</a><a
href="#indexa5">5</a><a href="#indexa4">4</a><a
href="#indexa3">3</a><a href="#indexa2">2</a><a
href="#indexa1">1</a> </dt> <dd> <img
id="indexa1" name="indexa1"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_001.jpg"
/> <img id="indexa2" name="indexa2"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_002.jpg"
/> <img id="indexa3" name="indexa3"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_003.jpg"
/> <img id="indexa4" name="indexa4"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_004.jpg"
/> <img id="indexa5" name="indexa5"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_005.jpg"
/> <img id="indexa6" name="indexa6"
src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_006.jpg"
/> </dd>
</dl>
成品除了翻页栏由于图片过小显得有点大外,非常好看秀雅。由于火狐在实现打开新窗口的机制有些问题,当我们点击链接时它又跑回原来的页面寻找对应的锚记,而不是本地窗口上的锚记。不过,放心,你们做相册时肯定不会把它做在运行框中的。

  现在除了天煞的opera外都兼容。



相关阅读:
jQuery 学习第五课 Ajax 使用说明
HTML表单标记教程(2):
IE和Firefox在JavaScript应用中的兼容性探讨
javascript参数传址与传值
MySQL索引分析和优化
javascript select 改变字的颜色
js 获取键盘值用法(兼容IE及Firefox)
Javascript动态创建 style 节点
jquery.ui.progressbar 中文文档
SQL2008中 阻止保存要求重新创建表的更改 的解决方法
更优雅的事件触发兼容
在Oracle数据库中使用超过2G的内存
在SAN上创建SQL Server群集
HTML表格标记教程(25):行的垂直对齐属性VALIGN
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4