纯CSS相册1

jhlovett

浏览: 613791 次
性别:
来自: 卡哇伊

最近访客更多访客>>

vcmasm

成长的菜鸟

zaweze

wwwxxxttt

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

DIV+CSS+XHTML+XML

CSS IE HTML5 浏览器 JavaScript

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

请原谅我的吝惜，自从谷歌相册被墙了后，博客园相册的那点空间真是捉襟见肘。上面的这个结构非常固定，大家死记硬背就好了。以后理想了便会轻松些。熟行的人一眼就会看出要使用到锚点。不知锚点为何物的人请自行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。

 
<!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水平菜单那样实现就行了。为了好看，我们加上半透明效果与悬浮效果。

 
<!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);  /*IE下设置透明度的写法-->0为全透明，100为不透明*/
    opacity:.7;  /*非IE设置透明度的写法(w3c标准透明度就是opacity)--0为全透明，10为不透明*/
  }
  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外都兼容。

分享到：

CSS样式中字体大小，建议font-size使用em | 花点时间搞清top、postop、scrolltop、sc ...

2009-09-30 23:01
浏览 1493
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

纯CSS相册1

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

纯CSS相册1

评论

发表评论

相关推荐

A Link 链接的rel、target属性详解

td中的nowrap

CSS样式中字体大小，建议font-size使用em

css a 链接状态

border-collapse:collapse 的使用

CSS中 clear.both 的理解

图片和文本框在TD中垂直居中

HTML<base>标签在showModalDialog中的应用

HTML文档中Meta的作用

MARQUREE标签

酷酷的分页按钮效果

CSS十八般绝技与选择器的优先级

CSS使DIV层绝对居中【水平和垂直】

WEB标准

CSS+DIV+HTML杂(三)

CSS+DIV+HTML杂(二)

CSS+DIV+HTML杂(一)

最近访客更多访客>>