一个CSS相册 BY子鼠

代码和CSS不是最优的。有相当大的优化空间。

另外,在现实中,我想也不会有人用这个东西来作相册,我想实现的只是CSS和HTML在一起到底能作什么。 玩呗! 挑战无处不在!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>子鼠的CSS相册v2.0</title>

<style>

body{ margin:0; padding:0; font-size:12px; background: #333333; line-height:1.7; font-family:Verdana, "宋体"; overflow:hidden }

#info{ width:600px; background: #666666; margin-left:auto; margin-right:auto; text-align:center; border:1px solid #FFFFFF; height:400px; margin-top:20px;}

h3{ margin:20px 0 0 0; color:#CC0000; font-size:12px;color:#FFF}

ul,li{ list-style:none; margin:0; padding:0;}

a:active,a:hover{ cursor:pointer}

#info #zs img{ width:400px; height:280px; border:7px solid #FFF;}

#zs{ height:360px; overflow: hidden; text-align:left; float:left; width:450px; margin-top:20px}

#zs ul{ margin:0 0 0 30px;}

#zs span{ display:block}

#zs a{ display:inline}

#nav{ padding-right:10px;width:135px; height:350px; overflow:auto; padding:0; text-align:left; float:left;}

#nav a{ display:block}

.z{ width:80px; height:56px;display:block; border:1px solid #FFFFFF; margin:4px 0 4px 25px;color:#FFF}

.b1{ background:url(http://www.zishu.cn/images/b1.jpg)}

.b2{ background:url(http://www.zishu.cn/images/b2.jpg)}

.b3{ background:url(http://www.zishu.cn/images/b3.jpg)}

.b4{ background:url(http://www.zishu.cn/images/b4.jpg)}

.b5{ background:url(http://www.zishu.cn/images/b5.jpg)}

.b6{ background:url(http://www.zishu.cn/images/b6.jpg)}

#zs li{ display:block; height:400px;}

</style>

</head>

<body>

<div id="info">

<h3>子鼠的CSS相册v2.0</h3>

<div id="zs">

<ul>

<li><a name="z1" id="z1"></a><img src="http://www.zishu.cn/images/a1.jpg" alt="照片1" /><br />

这是照片1

<span><a href="http://www.zishu.cn" target="_blank">www.zishu.cn</a></span></li>

<li><a name="z2" id="z2"></a><img src="http://www.zishu.cn/images/a2.jpg" alt="照片2" /><br />

这是照片2

<span><a href="http://www.zishu.cn" target="_blank">www.zishu.cn</a></span></li>

<li><a name="z3" id="z3"></a><img src="http://www.zishu.cn/images/a3.jpg" alt="照片3" /><br />

这是照片3

<span><a href="http://www.zishu.cn" target="_blank">www.zishu.cn</a></span></li>

<li><a name="z4" id="z4"></a><img src="http://www.zishu.cn/images/a4.jpg" alt="照片4" /><br />

这是照片4

<span><a href="http://www.zishu.cn" target="_blank">www.zishu.cn</a></span></li>

<li><a name="z5" id="z5"></a><img src="http://www.zishu.cn/images/a5.jpg" alt="照片5" /><br />

这是照片5

<span><a href="http://www.zishu.cn" target="_blank">www.zishu.cn</a></span></li>

<li><a name="z6" id="z6"></a><img src="http://www.zishu.cn/images/a6.jpg" alt="照片6" /><br />

这是照片6

<span><a href="http://www.zishu.cn" target="_blank">www.zishu.cn</a></span></li>

<li><a name="z7" id="z7"></a><img src="http://www.zishu.cn/images/a1.jpg" alt="照片1" /><br />

这是照片1

<span><a href="http://www.zishu.cn" target="_blank">www.zishu.cn</a></span></li>

<li><a name="z8" id="z8"></a><img src="http://www.zishu.cn/images/a2.jpg" alt="照片2" /><br />

这是照片2

<span><a href="http://www.zishu.cn" target="_blank">www.zishu.cn</a></span></li>

</ul>

</div>

<div id="nav">

<a href="#z1" class="b1 z" title="照片1"></a>

<a href="#z2" class="b2 z" title="照片2"></a>

<a href="#z3" class="b3 z" title="照片3"></a>

<a href="#z4" class="b4 z" title="照片4"></a>

<a href="#z5" class="b5 z" title="照片5"></a>

<a href="#z6" class="b6 z" title="照片6"></a>

<a href="#z7" class="b1 z" title="照片1"></a>

<a href="#z8" class="b2 z" title="照片2"></a>

</div>

</div>

</body>

</html>

提示:你可以先修改部分代码再运行。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏SAP最佳业务实践

SAP S/4HANA最佳业务实践:Order-to-Cash订单到收款-2客户360度视图

Details of the Object Page Customer -360°View客户360度视图 –Header 概览 –Contacts 合同 –S...

25711
来自专栏小狼的世界

超越按钮,拥抱触摸界面

苹果iPhone手机的发布,可以说带来了一个全新的“触摸”时代。现如今,就连小孩子都能够非常自然的使用一些触摸设备,手机、iPad等等。父母们一定很惊奇孩子们能...

622
来自专栏GIS讲堂

Arcgis for Javascript实现两个地图的联动

今天在看天地图的时候,有一个多时相的地图显示功能,感觉很好玩,作为技术控的我晚上十点下班到家便是快十一点了,本来应该是睡觉了,但是,激动地心情不能平静,哎,算了...

832
来自专栏镁客网

「产品」黑豆智能吉他,替你珍惜每分每秒

1444
来自专栏无原型不设计

从iOS 11看怎样设计APP图标

苹果WWDC2017开发者大会已经尘埃落定,除了新产品的发布,iOS 11也正式亮相。新系统中,地图、App Store、时钟、相机、联系人等等原生应用都换了...

2963
来自专栏无原型不设计

网页设计排版中哪些元素最重要?

有一些网页设计新手会认为,在设计网页的时候最重要的应该是如何添加一些具有吸引力的内容,所以他们只把大量的精力放在内容的设计上。在我看来,内容质量的好坏确实是能...

3184
来自专栏埋名

将HTML5缩写成h5究竟合不合理?

HTML5说起来很麻烦,因此业界很多前端、产品都讲html5简写成h5,包括许多大公司例如bat都是这样说。虽然现在互联网圈开口闭口就谈H5,

602
来自专栏无原型不设计

慢工出细活,Facebook点赞按钮设计中的门道

一年前,Facebook点赞按钮发布更新。一年后的今天,Facebook小小的点赞按钮因为Ted刚发布的一段演讲掀起波澜。设计一个像FB点赞按钮那么小的东西很...

2857
来自专栏理论坞

设计工具 ps、Ai和 Sketch 对比评测:各有所长

新入门的设计师肯定很好奇,Photoshop、Illustrator 和 Sketch 三款软件到底哪个好?我到底从哪里开始学?今天我们这里将给你一个好的说法。

1074
来自专栏BestSDK

每天220亿人使用的一个小功能,Facebook点赞按钮的设计门道

一年前,Facebook点赞按钮发布更新。一年后的今天,Facebook小小的点赞按钮因为Ted刚发布的一段演讲掀起波澜。设计一个像FB点赞按钮那么小的东西很难...

3205

扫码关注云+社区