纯CSS相册

2020-03-24 16:38:11

字体：大中小

来源：转载

供稿：网友

最近都在研究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="https://cdn14.x6kj.com/uploads/allimg/190809/1619415396-0.jpg" /
img id="index2" src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414I1-1.jpg" /
img id="index3" src="https://cdn14.x6kj.com/uploads/allimg/190809/161941F92-2.jpg" /
img id="index4" src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414261-3.jpg" /
img id="index5" src="https://cdn14.x6kj.com/uploads/allimg/190809/16194143Y-4.jpg" /
img id="index6" src="https://cdn14.x6kj.com/uploads/allimg/190809/16194124H-5.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="https://cdn14.x6kj.com/uploads/allimg/190809/1619415396-0.jpg"
/ img id="index2" name="index2"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414I1-1.jpg"
/ img id="index3" name="index3"
src="https://cdn14.x6kj.com/uploads/allimg/190809/161941F92-2.jpg"
/ img id="index4" name="index4"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414261-3.jpg"
/ img id="index5" name="index5"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194143Y-4.jpg"
/ img id="index6" name="index6"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194124H-5.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="https://cdn14.x6kj.com/uploads/allimg/190809/1619415396-0.jpg"
/ img id="indexb2" name="indexb2"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414I1-1.jpg"
/ img id="indexb3" name="indexb3"
src="https://cdn14.x6kj.com/uploads/allimg/190809/161941F92-2.jpg"
/ img id="indexb4" name="indexb4"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414261-3.jpg"
/ img id="indexb5" name="indexb5"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194143Y-4.jpg"
/ img id="indexb6" name="indexb6"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194124H-5.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="https://cdn14.x6kj.com/uploads/allimg/190809/1619415396-0.jpg"
/ img id="indexa2" name="indexa2"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414I1-1.jpg"
/ img id="indexa3" name="indexa3"
src="https://cdn14.x6kj.com/uploads/allimg/190809/161941F92-2.jpg"
/ img id="indexa4" name="indexa4"
src="https://cdn14.x6kj.com/uploads/allimg/190809/1619414261-3.jpg"
/ img id="indexa5" name="indexa5"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194143Y-4.jpg"
/ img id="indexa6" name="indexa6"
src="https://cdn14.x6kj.com/uploads/allimg/190809/16194124H-5.jpg"
/ /dd
/dl
成品除了翻页栏由于图片过小显得有点大外，非常好看秀雅。由于火狐在实现打开新窗口的机制有些问题，当我们点击链接时它又跑回原来的页面寻找对应的锚记，而不是本地窗口上的锚记。不过，放心，你们做相册时肯定不会把它做在运行框中的。现在除了天煞的opera外都兼容。html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：实例教程利用html5和css3打造一款创意404页面

下一篇：针对浏览器隐藏CSS之独孤九剑