记录下样式小细节，做回作业~~~
作业内容均是嘎嘎！！！学到啦神马！！！定位！定位！定位！
图像映射既是鼠标放上去给予提示信息 样式完全是用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居然可以嵌套~~~汗从这才知道，好吧我记下啦！！！
<span class="outer"><span class="inner"><span class="note">GUNDAM-001</span></span></span>
2、关键的样式来哦
绝对定位，绝对的居中：浏览器你变长变短我都居中!!!
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; 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;*/ 196px; height:196px;}
总结同样的样式一起搞，.gundam-pic span { display:block;}，之后再补充不同的！！！
<a>标签width/height=200px; 196px; height:196px;
border是会占掉两个像素的,所以内层<span>的要缩小缩小缩小的~~~
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; 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不支持的边框圆角化~~~
最后，好脑袋不如赖笔头~~~做笔记做笔记！！！