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

相关文章

来自专栏菩提树下的杨过

MSDN官方的ASP.Net异步页面的经典示例代码

示例1.演示异步获取一个网址的内容,处理后显示在OutPut这一Label上 using System; using System.Web; using S...

2115
来自专栏阿炬.NET

c# datetime 格式化

2946
来自专栏c#开发者

C# : row-clickable GridView and get and set gridview rows using JavaScript

Complete C# code: ---------------- using System; using System.ComponentModel; ...

3126
来自专栏吴伟祥

Java Calendar 类的时间操作 原

Calendar 的 month 从 0 开始,也就是全年 12 个月由 0 ~ 11 进行表示。

863
来自专栏C/C++基础

C#获取系统当前时间

ystem.DateTime currentTime=new System.DateTime(); 1.1 取当前年月日时分秒 currentTime=Sy...

1273
来自专栏听雨堂

想修改CSS

      下载了一个“通用”的CSS文件,本来想偷懒的,结果发现有问题,就是它用的颜色是变量定义的,无法识别。我又找不到在哪里可以定义。 BODY{     ...

22010
来自专栏海说

Java应用中常见的JDBC连接字符串(SQLite、MySQL、Oracle、Sybase、SQLServer、DB2)

Java应用中常见的JDBC连接字符串 Java应用中连接数据库是不可或缺的,于是便整理一些可能用到的JDBC的jar包及其相匹配的URL,以备日后查阅。 1)...

2940
来自专栏互联网开发者交流社区

WinForm之窗体应用程序

2023
来自专栏成长道路

JDBC动态SQL语句连接orcale数据库的工具类

import java.sql.Connection; import java.sql.DriverManager; import java.sql.P...

2650
来自专栏跟着阿笨一起玩NET

[C#]工具类—FTP上传下载

  不错的文章:http://www.cnblogs.com/greatverve/archive/2012/03/03/csharp-ftp.html

1531

扫码关注云+社区