css图像映射

记录下样式小细节，做回作业~~~

作业内容均是嘎嘎！！！学到啦神马！！！定位！定位！定位！

图像映射既是鼠标放上去给予提示信息 样式完全是用hover属性；效果如图：

代码：

<!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>GUNDAM-CSS图片映像</title>
<style type="text/css">
* { margin:0;padding:0; }
body { font:11px Verdana, Geneva, sans-serif; background:#444;}
ul{ list-style:none;}
img{ display:block;}

.gundam-pic{ border:1px solid black; padding:5px; background:white; width:650px; height:450px; position:absolute; top:50%; left:50%; margin:-225px 0 0 -325px;}

.gundam-pic ul{ position:absolute; top:0; left:0;}
.gundam-pic a{ display:block; width:200px; height:200px; /*border:1px solid #FF9;*/ position:absolute; text-decoration:none; color:black;text-indent:-9999px; background: url(images/bg.gif) no-repeat;}
.gundam-pic .ga a {top:18px;left:61px;}
.gundam-pic .gb a {top:228px;left:162px;}
.gundam-pic .gc a {top:60px;left:395px;}

.gundam-pic span { display:block;}
.gundam-pic .outer { /*border:1px solid black;*/}
.gundam-pic .inner { /*border:1px solid white;*/ width:196px; height:196px;}

.gundam-pic a:hover {border:2px solid #FF9;}
.gundam-pic a:hover .note{ text-indent:0;background:#FFC url(images/note.gif) repeat-x; padding:5px; text-align:center; border-bottom:1px solid black;border-left:1px solid black; float:right;}
.gundam-pic a:hover .outer{ border:1px solid black;}
.gundam-pic a:hover .inner{ border:1px solid white;}
</style>
</head>
<body>
<div class="gundam-pic"><img src="images/gundam-pic.png" alt="gundam"/>
  <ul>
    <li class="ga"><a href="#"><span class="outer"><span class="inner"><span class="note">GUNDAM-001</span></span></span></a></li>
    <li class="gb"><a href="#"><span class="outer"><span class="inner"><span class="note">GUNDAM-002</span></span></span></a></li>
    <li class="gc"><a href="#"><span class="outer"><span class="inner"><span class="note">GUNDAM-003</span></span></span></a></li>
  </ul>
</div>
</body>
</html>

1、先看html中，行内元素span居然可以嵌套~~~汗从这才知道，好吧我记下啦！！！

GUNDAM-001

2、关键的样式来哦

绝对定位，绝对的居中：浏览器你变长变短我都居中!!!

width:650px; height:450px; position:absolute; top:50%; left:50%; margin:-225px 0 0 -325px;

/*这里是注释内容*/ ！！！红的背景图可是起了很大作用哦，么有这张图IE是不会有hover时间的，那是因为这是定位的的内容是是空的，只有两个border框，没有图文字也text-indent:-9999px; 甩到一边去啦；

所以这里加个透明的背景图还搞定万恶IE！！！！

.gundam-pic a{ display:block; width:200px; height:200px; /*border:1px solid #FF9;*/ position:absolute; text-decoration:none;

color:black;text-indent:-9999px; background: url(images/bg.gif) no-repeat;}

3、小细节

.gundam-pic span { display:block;}
.gundam-pic .outer { /*border:1px solid black;*/}
.gundam-pic .inner { /*border:1px solid white;*/ width:196px; height:196px;}

总结同样的样式一起搞，.gundam-pic span { display:block;}，之后再补充不同的！！！

<a>标签width/height=200px; width:196px; height:196px;

border是会占掉两个像素的,所以内层的要缩小缩小缩小的~~~

4、重头hover

.gundam-pic a:hover {border:2px solid #FF9;}
.gundam-pic a:hover .note{ text-indent:0;background:#FFC url(images/note.gif) repeat-x; padding:5px; text-align:center; border-bottom:1px solid black;border-left:1px solid black; float:right;}

<a>hover,不仅可以hover<a>元素的样式，包含在<a>里的元素也可享受这中特殊待遇哦~~~

这里把被甩出去的文字又给拽回来啦~~~text-indent:0;好厉害哦！！！

绝对定位也很拽的，让你在呆着就给我老实在哪呆着！！！

float:left;position:absolute; left:60px; bottom:-30px;

z-index:100;是防止藏头漏尾~~~

5、就说一点点~~~

.gundam-pic a{ display:block; width:200px; height:200px; /*border:1px solid #FF9;*/ position:absolute; text-decoration:none; color:black;text-indent:-9999px; background: url(images/bg.gif) no-repeat;-moz-border-radius-topright:8px;
    -moz-border-radius-bottomleft:8px;
    /*-webkit-border-radius:8px;*/
    -webkit-border-top-right-radius:8px;
    -webkit-border-bottom-left-radius:8px;
}

IE不支持的边框圆角化~~~

最后，好脑袋不如赖笔头~~~做笔记做笔记！！！

posted @ 2012-09-15 01:42 laugh 阅读(1359) 评论(0) 编辑收藏举报

刷新页面返回顶部

laugh

css图像映射

公告