一个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 条评论
登录 后参与评论

相关文章

来自专栏CreateAMind

李飞飞CS231n机器视觉课程-全部视频ppt及中文翻译资源大全

http://vision.stanford.edu/teaching/cs231n/syllabus.html 官方站点资源如下,视频课程ppt都有

902
来自专栏目标检测和深度学习

教你做惊艳的学术PPT!!!

大学老师在日常教学中,需要制作大量的PPT课件。虽然这些老师都是各自专业的精英,但是对于制作好看的PPT课件而言,有时候却心有余而力不足。

862
来自专栏生信宝典

生信宝典之傻瓜式 (二) 如何快速查找指定基因的调控网络

我是谁?我在哪儿?我在查什么? 在信息爆炸的时代,相信很多小伙伴在查文章时会因信息量太大而抓狂。今天带来一款设计简洁、功能全面的基因功能查询工具,助你事半功倍,...

1866
来自专栏中国白客联盟

【免费】渗透测试室内一对一培训-工具篇更新

https://pan.baidu.com/s/1i5tEFQk910b_UNXk_N-ADw 密码:fu5s

823
来自专栏逸鹏说道

00.Web大前端时代之:HTML5+CSS3入门系列~Bug反馈文章

感谢广大网友的热心提醒,现已发现如下错误: 感谢 “ ”对画布笔记系列的反馈(QQ:350223285) ? 这个是失误,strokeStyle和stroke对...

2429
来自专栏我分享我快乐

w3c官网解读——js基础教程_js输出

帮0基础的你分析w3c官网的javascript基础教程及小案例,让喜欢javascript的朋友可以爱上他并能拥抱他!

673
来自专栏Bug生活2048

Python自学之路-前期准备

继上一篇「Python自学之路-序」之后,决定开始零基础学习Python了,今天花了点时间去系统的了解下Python,同时也找了一些相关的教程,这里分享给大家。

821
来自专栏ionic3+

【开发指南】(五)ionic3开发技术基础

首先要区分angularjs和angular,前者一般指代angular1,后者是angular2+,它将angular1技术栈推倒重来,使用typescrip...

723
来自专栏编程微刊

前端css实现最基本的时间轴

1382
来自专栏我分享我快乐

w3c官网解读——js基础教程_js对象

帮0基础的你分析w3c官网的javascript基础教程及小案例,让喜欢javascript的朋友可以爱上他并能拥抱他!

892

扫码关注云+社区