首页 > web前端 > css教程 > CSS相册

CSS相册

高洛峰
发布: 2017-02-24 13:13:27
原创
1941 人浏览过

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

1

2

3

4

5

6

7

8

9

10

11

12

13

<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="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-0.jpg" />

    <img id="index2" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-1.jpg" />

    <img id="index3" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-2.jpg" />

    <img id="index4" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-3.jpg" />

    <img id="index5" src="https://img.php.cn/upload/article/000/000/013/4bf6ad50455219fb4dbd78e1710b7b78-4.jpg" />

    <img id="index6" src="https://img.php.cn/upload/article/000/000/013/e3e768bc0ad403b7acd7b90162e40116-5.jpg" />

  </dd>

</dl>

登录后复制

请原谅我的吝惜,自从谷歌相册被墙了后,博客园相册的那点空间真是捉襟见肘。上面的这个结构非常固定,大家死记硬背就好了。以后理想了便会轻松些。熟行的人一眼就会看出要使用到锚点。不知锚点为何物的人请自行google。dt里面的数字有点奇怪,是倒过来写的,很快你们就会明白了。

经常光顾我的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。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

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;

}

登录后复制

天哪,我发现我们做事太有效率了,一下子相册就整出来,点击链接就能切换图片了。明白为什么能切换图片吗?!如果我们不设置overflow:hidden,点击图片时网页其实有一个上下移动的状态发生,通过我们可以通过右边的滚动条观察到。这意味着什么呢?意味着javascript的scrollTop发生作用了。scrollTop通常为零,当其为正数时,原来可视区的东西就向下位移。如果我们固定了可视区,并不显示滚动条呢?!下面的东西怎样才能跑到上面显示??答案显然易见,scrollTop这时变成负数。具体自己测试,按逻辑是这样的。

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

 }

登录后复制

成品除了翻页栏由于图片过小显得有点大外,非常好看秀雅。由于火狐在实现打开新窗口的机制有些问题,当我们点击链接时它又跑回原来的页面寻找对应的锚点,而不是本地窗口上的锚点。不过,放心,你们做相册时肯定不会把它做在运行框中的。

  • 654321

  • CSS相册 CSS相册 CSS相册 CSS相册 CSS相册 CSS相册

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

更多CSS相册 相关文章请关注PHP中文网!


相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
javascript - framework7 调摄像头和相册
来自于 1970-01-01 08:00:00
0
0
0
objective-c - iOS相册删除最后一张照片
来自于 1970-01-01 08:00:00
0
0
0
objective-c - iOS如何将沙盒的图片放到相册中
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板