css漂亮的相册

最新推荐文章于 2024-03-17 07:56:32 发布
最新推荐文章于 2024-03-17 07:56:32 发布
阅读量132 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/mengzi/archive/2009/03/30/1425132.html
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml"><head><title>经典相册效果</title>   
<meta http-equiv=content-type content="text/html; charset=GB2312">   
<style>BODY {   
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #333333; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; LINE-HEIGHT: 1.7; PADDING-TOP: 0px; FONT-FAMILY: Verdana, "??"  
}   
#info {   
BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; MARGIN-TOP: 20px; BACKGROUND: #666666; MARGIN-LEFT: auto; BORDER-LEFT: #ffffff 1px solid; WIDTH: 600px; MARGIN-RIGHT: auto; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: 450px; TEXT-ALIGN: center  
}   
H3 {   
FONT-SIZE: 12px; MARGIN: 30px 0px 0px; COLOR: #fff  
}   
SPAN {   
VISIBILITY: hidden; OVERFLOW: hidden; POSITION: absolute  
}   
UL {   
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none  
}   
LI {   
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none  
}   
A:active {   
CURSOR: pointer  
}   
A:hover {   
CURSOR: pointer  
}   
A:hover SPAN {   
VISIBILITY: visible; MARGIN-LEFT: -500px; POSITION: absolute; TOP: 90px  
}   
A:active SPAN {   
VISIBILITY: visible; MARGIN-LEFT: -500px; POSITION: absolute; TOP: 90px  
}   
#info IMG {   
BORDER-RIGHT: #ffffff 7px solid; BORDER-TOP: #ffffff 7px solid; BORDER-LEFT: #ffffff 7px solid; WIDTH: 400px; BORDER-BOTTOM: #ffffff 7px solid; HEIGHT: 280px  
}   
#zs {   
MARGIN-TOP: 20px; FLOAT: rightright; MARGIN-BOTTOM: 50px; OVERFLOW: auto; WIDTH: 140px; HEIGHT: 340px  
}   
.z {   
BORDER-RIGHT: #ffffff 1px solid; BORDER-TOP: #ffffff 1px solid; DISPLAY: block; MARGIN: 4px 0px 4px 25px; BORDER-LEFT: #ffffff 1px solid; WIDTH: 80px; COLOR: #fff; BORDER-BOTTOM: #ffffff 1px solid; HEIGHT: 56px  
}   
.b1 {   
BACKGROUND: url(jsfile/imagesa35/b1.jpg)   
}   
.b2 {   
BACKGROUND: url(jsfile/imagesa35/b2.jpg)   
}   
.b3 {   
BACKGROUND: url(jsfile/imagesa35/b3.jpg)   
}   
.b4 {   
BACKGROUND: url(jsfile/imagesa35/b4.jpg)   
}   
.b5 {   
BACKGROUND: url(jsfile/imagesa35/b5.jpg)   
}   
.b6 {   
BACKGROUND: url(jsfile/imagesa35/b6.jpg)   
}   
</style>   
</head>   
<body>   
<div id=info>   
<h3>Doorle Photo   
<div id=zs>   
<ul>   
<li><a class="b1 z" title=photo1 href="http://www.paomeng.com"    
target=_blank><span><img alt=photo1    
src="jsfile/imagesa35/a1.jpg"><br>photo1<br>www.paomeng.com</span></a>    
<li><a class="b2 z" title=photo2 href="http://www.paomeng.com"    
target=_blank><span><img alt=photo2    
src="jsfile/imagesa35/a2.jpg"><br>photo2<br>www.paomeng.com</span></a>    
<li><a class="b3 z" title=photo3 href="http://www.paomeng.com"    
target=_blank><span><img alt=photo3    
src="jsfile/imagesa35/a3.jpg"><br>photo3<br>www.paomeng.com</span></a>    
<li><a class="b4 z" title=photo4 href="http://www.paomeng.com"    
target=_blank><span><img alt=photo4    
src="jsfile/imagesa35/a4.jpg"><br>photo4<br>www.paomeng.com</span></a>    
<li><a class="b5 z" title=photo5 href="http://www.paomeng.com"    
target=_blank><span><img alt=photo5    
src="jsfile/imagesa35/a5.jpg"><br>photo5<br>www.paomeng.com</span></a>    
<li><a class="b6 z" title=photo6 href="http://www.paomeng.com"    
target=_blank><span><img alt=photo6    
src="jsfile/imagesa35/a6.jpg"><br>photo6<br>www.paomeng.com</span></a>    
<li><a class="b1 z" title=photo1 href="http://www.paomeng.com"    
target=_blank><span><img alt=photo1    
src="jsfile/imagesa35/a1.jpg"><br>photo1<br>www.paomeng.com</span></a>    
<li><a class="b2 z" title=photo2 href="http://www.paomeng.com"    
target=_blank><span><img alt=photo2    
src="jsfile/imagesa35/a2.jpg"><br>photo2<br>www.paomeng.com</span></a>    
</li></ul></div></div>   
</body></html>   

转载于:https://www.cnblogs.com/mengzi/archive/2009/03/30/1425132.html

weixin_30359021
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Java+SpringBoot+Vue网络相册设计与实现（源码+文档+部署+讲解）
qq_33638415的博客
03-09 862
网络相册设计与实现的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品，体验高科技时代带给人们的方便，同时也能让用户体会到与以往常规产品不同的体验风格。与安卓，iOS相比较起来，网络相册设计与实现在流畅性，续航能力，等方方面面都有着很大的优势。这就意味着网络相册设计与实现的设计可以比其他系统更为出色的能力，可以更高效的完成最新的相册分享、公告信息等功能。
【阿里云高校计划】Day3 智能电子相册
qq_42759591的博客
06-06 329
今天主要讲调阿里表情识别和环境识别接口来判断图片的环境与表情。后端是用springboot实现的，前端用vue渲染的。用的是mvc架构。附上阿里智能电子相册demo地址https://github.com/aliyun/alibabacloud-viapi-demo/tree/master。目前不知道哪里还有问题，运行不了，先插眼。 下边为目录结构图，data存放json数据，img存放上传的图片，log存日志。 Application：启动的入口函数， ● common：一般就是存放公共的类或者常量，或
Thinkphp/Laravel+vue个人相册图片管理系统84ds3
QQ3166678367的博客
03-17 1045
主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。利用这些技术结合实际需求开发了具有系统首页，个人中心，用户管理，相册分类管理，相册信息管理，系统管理等功能的系统，最后对系统进行相应的测试，测试系统有无存在问题以及测试用户权限来优化系统，最后系统达到预期目标。整个的系统的开发运用php技术，vue.js框架，以及MySQL数据库技术的大力支持下同步完成该系统的开发，实现了智能化电子相册的信息化，使管理者在操作思路清晰且更加方便，用户也可以体验到更加优秀的智能化电子相册，内容目标如下。
html 3D立体多形态旋转音乐相册 | 2022都结束了，还不快给女神制作一个特殊的纪念相册
在下马农的碎碎念
01-10 6040
2022最炫纪念相册 3D立体旋转相册 音乐相册 旋转相册 2023新年相册 纪念相册模板 纪念相册制作 纪念相册设计 纪念相册DIY 相册代码html 2023新年快乐 新年祝福 新年礼物 好看的HTML 旋转相册 最好的礼物
HTML5+CSS3 漂亮的个性相册
07-31
HTML5+CSS3 漂亮的个性相册，HTML5+CSS3 漂亮的个性相册.zip 解 压 密 码 [www.0html.com]
一个简单漂亮的CSS相册代码
weixin_33716154的博客
08-26 1884
代码简介： 用CSS制作一个ImageView，类似一个相册浏览的功能，重点研究一下层与布局。 代码内容： View Code <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns...
css相册效果特效代码
03-20
css相册效果是一款可全屏查看，css3动画展现，支持键盘方向键翻页，效果优美简洁。
相册_相册CSS_
09-30
相册点击切换查看相片，可以添加镜面和相片
设计漂亮的纯CSS相册
05-12
内容索引:脚本资源,CSS特效,CSS相册　一款设计精美的纯CSS相册，没有用任何的Javascript代码，关注CSS前端设计的朋友们一定要参考一下哦，绝色清新的界面，鼠标点击相册中的缩略图，右侧会显示出对应的大图片以及...
纯CSS打造相册效果项目完整源码
06-15
代码为博客实例代码：http://blog.csdn.net/lmj623565791/article/details/30993277 有问题请博客留言
纯CSS3相册效果网页特效
11-17
纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效 纯CSS3相册效果网页特效
python电子相册源码
05-11
本资源是基于Python tkinter的电子相册源码，可以直接运行，有需要的朋友可以下载一下。
基于ssm+Vue的个性化电子相册设计（源码+部署说明+系统介绍+数据库）.zip
06-09
基于SSM+Vue的个性化电子相册设计是一款用于个人或企业展示照片的软件系统。该系统采用前后端分离的开发模式，前端使用Vue框架进行开发，后端使用Spring+SpringMVC框架进行开发。 该系统的主要功能包括： 1. 用户管理：管理员可以添加、删除、修改用户信息。 2. 相册管理：管理员可以添加、删除、修改相册信息。 3. 照片上传：用户可以将照片上传到系统中，并设置相册和标签等信息。 4. 照片浏览：用户可以在系统中浏览已上传的照片，并可以按照时间、标签等方式进行筛选。 5. 评论管理：用户可以在照片下方发表评论，其他用户可以查看和回复评论。 6. 报表统计：系统提供多种报表统计方法，帮助管理员了解相册的使用情况。 该系统的数据库采用MySQL数据库，包含用户表、相册表、照片表和评论表等四个表。其中，用户表存储用户的基本信息，相册表存储相册的基本信息，照片表存储照片的基本信息，评论表存储评论的信息。 该系统的部署方式为将前端代码打包成静态文件，然后通过Nginx反向代理到后端服务器上运行。同时，需要在后端服务器上安装Java环境和相关依赖库，如Spring、MyBatis等。
CSS实现3D相册
一个鮕娘的博客
07-29 3084
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
用vue实现一个相册网页_vue做一个图片上传预览的组件，附vue-router基础用法
weixin_34779845的博客
12-29 883
7-4更新 =>已将本次项目上传至　githulb/lonhon 欢迎大家下载，以后做的新东西也都会更新在上面。之前发了一篇关于自己看待前端组件化的文章，但是由于学习和实践的业务逻辑差异，所以自己练习的一些demo逻辑比较简单，打算用vue重构现在公司做的项目，所以在一些小的功能页面上使用vue来做的，现在写的这个是项目中用户反馈功能而来的，收获还是挺多的。收获：dom操作=>数...
简单css相册切换
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
02-16 415
简单的一段代码，即可实现。 &lt;div class="pic-box"&gt; &lt;div class="pic-list"&gt; &lt;img src="1.jpg" alt="" id="pic1"&gt; &lt;img src="2.jpg&quot
html个性相册,个性相册名
weixin_39962341的博客
06-16 102
像泡泡一样色彩斑斓 ⊙//别拿你的高姿态来对我つ゛_你说的厮守不后悔◇呐人妆 出来の漂亮谁谋杀了莪的幸福─╄OvЁ专属味道白色最透彻的浓艳ゝ′ 以Ｓαò為主多余了那些温柔追溯从前灵感メ总在上厕所时冒出来淡场不分手°德恋爱ζ你是我唯一不变的执著﹏无所谓世界的黑白 ╮°找不到线索假如光还唱歌＃你是我唯一执着的执着╭◇你说的誓言如同谎言花花世界，多么熟悉也会变德陌生人前一张脸 人后一张脸~在你转身那刻▽...
arm电子相册项目——项目要求篇（描述功能）
诸葛一帆丶的博客
08-30 5326
《arm电子相册项目——项目要求篇（描述功能）》 工具：keil4 , arm开发板（Mini2451）（s3c2451） , 串口线 功能：显示照片（自动切换 / 手动切换 / 暂停切换 / 可设置） 显示时钟（精确显示 / 可设置） 进度：准备篇——项目要求（基本功能->提高功能） 三大块：时钟 / 相册 / 系统 时钟 基本功能： 1.时间运行准
htmlcss表白相册
最新发布
04-09
HTML和CSS表白相册是一种利用网页技术来制作的浪漫表白方式。通过HTML和CSS的结合，可以创建一个具有独特风格和交互效果的相册，用于表达对某人的爱意。 在制作HTML和CSS表白相册时，可以使用HTML来构建页面的结构...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值