CSS+DIV实现图片动态显示
日期:2008年6月18日 作者: 查看:[大字体 中字体 小字体]-
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片动态显示</title>
<style type="text/css">
<!--
a {
position: relative;/*设置其定位方法为相对定位,等一下内部信息面板就可以相对它定位*/
display:block;/*让链接以块状呈现,这样不用点中链接文字就可以响应链接*/
}
a img{
display: none; visibility:hidden;/*初始化信息面板不显示*/
}
a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/
a:hover img {
display:block;
visibility:visible;
position: absolute;
padding:5px;
display:block;
width: 139px;/*只给出宽度,高让它随内容多少自动调整*/
left:50px;/*这是相对父级A的定位*/
top: 20px;
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一个较高的位置,使链接文字过长时不会与面板重叠,但这只对FF有效*/
}
a img {
border:none;/*去除图片边框,默认情况下,链接内的图片在标准浏览器会出现边框*/
display:block;
position: absolute;/*用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
top:5px;/*这里的px是与信息面板大盒子的填充一样的*/
left:5px;
}
-->
</style>
</head>
<body>
<a href="#" class="showImage">Photoshop打造章子怡相框<img id="img1" src="http://images.enet.com.cn/eschool/gdtup/tu6/787358127.jpg"></img></a> </body> </html>
(出处:http://www.hackhome.com/)
-
- CSS+DIV实现图片动态显示 相关文章:
- ·显示日期和时间_QQ空间时间代码
- ·如何显示输入法图标(输入法图标消失)
- ·液晶显示器原理图
- ·显示器工厂模式的进入方法集锦
- ·U盘找不到空间,u盘容量显示为0,u盘可用空间为0
- ·该网页上的问题可能使其无法正常显示或功能不正常
- ·验证码无法显示,网页无法显示验证码
- ·移动硬盘不显示盘符
- ·图片保存到数据库和从数据库读取图片并显示(c#)
- ·七段数码管显示控件的制作与应用
- CSS+DIV实现图片动态显示 相关软件
- ·液晶显示器亮点坏点修复工具 V0.1
- ·Advanced密码星号显示察看器 V1.00
- ·《杀手3:契约》所有武器所有关卡显示档
- ·DisplayX-显示器测试程序 V1.0
- ·《侠盗猎魔》所有关卡显示档
- ·《合金杀手》所有关卡显示档
- ·《地狱直升机》3D显示补丁
- ·《查理和巧克力工厂》所有关卡显示档
- ·《抢救行动3》全部关卡显示存档
- ·Close Monitor(立即关闭显示器) V1.5
- 特别声明:本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作
- 者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转
- 载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源:http://www.hackhome.com
上一篇:小章子怡 张静初写真壁纸集
下一篇:位图实现形状渐变效果的方法
精品推荐
热点TOP10
- ·Div+CSS+JS树型菜单,可刷新
- ·一款DIV+CSS导航条效果
- ·Javascript+CSS横向三级导航菜单
- ·CSS+DIV实现的滑动门菜单特效代码
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·Div+CSS基础教程(二)
- ·CSS定位:left
- ·网页设计基础:Div+CSS布局入门教程
- ·CSS文本:text-overflow
- ·DW MX 2004 CSS 属性详解
- ·CSS+DIV自适应高度布局
- ·设计一个基于CSS的网页模板
- ·用网页标准DIV+CSS创建固定宽度的网页布局
- ·CSS+DIV+JS导航菜单和Flash效果差不多
- ·站长推荐:53个CSS-不可或缺的技巧
- ·使用纯 CSS 设计3D按钮
- ·CSS定位:bottom
- ·如何使用CSS来进行网页排版
- ·DIV+CSS三行两列经典布局
- ·如何用CSS定义表格与模拟表格
特别推荐
- ·网站DIV+CSS常见错误
- ·中小网站需要DIV+CSS技术么?
- ·CSS网页布局开发常用技巧
- ·CSS+DIV打造鼠标经过背景变色
- ·提高CSS的网页渲染效率的几点技巧
- ·CSS将成为网页设计师必备知识
- ·CSS教程:关于CSS框架网页设计
- ·CSS教程:初学者实用的十则CSS技巧
- ·CSS设计网页时的一些常用规范
- ·学习掌握纯CSS布局网页
- ·CSS合理的编码与组织技巧
- ·网站变黑白色CSS一行代码实现
- ·DIV+CSS常用的网页布局代码
- ·css网页设计非常有用的解决办法
- ·CSS网站布局技巧几则总结
- ·彻底弄懂CSS盒子模式(DIV布局快速入门)
- ·CSS样式设计之CSS滤镜资料小结
- ·总结:用CSS进行网页样式设计攻略全集
- ·创建一个纯CSS的水平导航条
- ·如何用css设置网页字体
