会员
周边
众包
新闻
博问
闪存
赞助商
Chat2DB
所有博客
当前博客
我的博客
我的园子
账号设置
会员中心
简洁模式
...
退出登录
注册
登录
.Net空间
他说风雨中,这点痛算什么,擦干泪,不要怕,至少我们还有梦!
博客园
首页
新随笔
联系
管理
订阅
CSS+DIV实现图片动态显示
<
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 #5bb9e9
;
background-color
:
#e4f6ff
;
z-index
:
999
;
/**/
/*
把信息面板提到一个较高的位置,使链接文字过长时不会与面板重叠,但这只对FF有效
*/
}
a img
{
}
{
border
:
none
;
/**/
/*
去除图片边框,默认情况下,链接内的图片在标准浏览器会出现边框
*/
display
:
block
;
position
:
absolute
;
/**/
/*
用绝对定位抽离正常文本流,不然在设计的时候考虑到不同浏览器正常显示会更麻烦
*/
top
:
5px
;
/**/
/*
这里的px是与信息面板大盒子的填充一样的
*/
left
:
5px
;
}
-->
</
style
>
</
head
>
<
body
>
<
a
href
="#"
class
="showImage"
>
雪景小屋
<
img
id
="img1"
src
="http://hiphotos.baidu.com/木合达/pic/item/30392594485a1413d21b70c9.jpg"
></
img
></
a
>
</
body
>
</
html
>
每天学习一点点!
posted @
2008-06-16 21:50
周枫
阅读(
1292
) 评论(
0
)
编辑
收藏
举报
刷新页面
返回顶部
公告