仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 680|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 带来一篇CSS的“弹出式”图象扫瞄器

[复制链接]
乐观 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:22:31 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
凡是和我讨论客户段效率的全是脑子有问题的,影响的全是图片和Flash,所以我一直建议一个提交按钮就不要用图片带代替了。
CSS的”弹出式“图象扫瞄器

转自DynamicDrive,纯CSS的,道理就是在a标志内里放两张图片,一张年夜图,一张小图,一般情形下小图可见,年夜图埋没,a:hover就显现年夜图了
以下是援用片断:
<styletype="text/css">

.thumbnail{
position:relative;
z-index:0;
}

.thumbnail:hover{
background-color:transparent;
z-index:50;
}

.thumbnailspan{/*CSSforenlargedimage*/
position:absolute;
background-color:lightyellow;
padding:5px;
left:-1000px;
border:1pxdashedgray;
visibility:hidden;
color:black;
text-decoration:none;
}

.thumbnailspanimg{/*CSSforenlargedimage*/
border-width:0;
padding:2px;
}

.thumbnail:hoverspan{/*CSSforenlargedimageonhover*/
visibility:visible;
top:0;
left:60px;/*positionwhereenlargedimageshouldoffsethorizontally*/

}

</style>
<aclass="thumbnail"href="#thumb">.thumbnail{position:relative;z-index:0;}.thumbnail:hover{background-color:transparent;z-index:50;}.thumbnailspan{/*CSSforenlargedimage*/position:absolute;background-color:lightyellow;padding:5px;left:-1000px;border:1pxdashedgray;visibility:hidden;color:black;text-decoration:none;}.thumbnailspanimg{/*CSSforenlargedimage*/border-width:0;padding:2px;}.thumbnail:hoverspan{/*CSSforenlargedimageonhover*/visibility:visible;top:0;left:60px;/*positionwhereenlargedimageshouldoffsethorizontally*/}</style><aclass="thumbnail"href="#thumb"><br/>Soreal,itsunreal.Orisit?</span></a>
运转代码复制代码另存代码</p>
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。
不帅 该用户已被删除
沙发
发表于 2015-1-18 06:30:16 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
admin 该用户已被删除
板凳
发表于 2015-1-31 15:57:48 | 只看该作者
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
柔情似水 该用户已被删除
地板
发表于 2015-2-6 21:44:47 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
谁可相欹 该用户已被删除
5#
发表于 2015-2-19 00:04:45 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心,坚持不懈的决心。在自己无法解决某些问题时,就需要虚心请教别人.
愤怒的大鸟 该用户已被删除
6#
发表于 2015-3-6 11:59:41 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
飘灵儿 该用户已被删除
7#
发表于 2015-3-13 01:09:34 | 只看该作者
HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器)
透明 该用户已被删除
8#
发表于 2015-3-20 09:23:28 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-23 07:47

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表