一.精通CSS第六章
1.图像映射
HTML:
<div class="imagemap"> <img src="images/nerdcore.jpg" width="333" height="500" alt="Some of the ClearLeft team"> <ul> <li class="rich"> <a href="" title="Richard Butter">Richard Butter</a> </li> <li class="sophie"> <a href="" title="Sophie Barrett">Sophie Barrett</a> </li> <li class="cath"> <a href="" title="Cathy Jones">Cathy Jones</a> </li> <li class="james"> <a href="" title="James Box">James Box</a> </li> <li class="paul"> <a href="" title="Paul Annett">Paul Annett</a> </li> </ul> </div>CSS:
/* 设置div的宽度和高度使其和图像尺寸匹配，同时将div的position属性设置为relative，为了让包含链接可以相对于div的边缘进行绝对定位。 */ .imagemap{ width:333px; height: 500px; position: relative; } /*基本设置*/ .imagemap ul{ padding:0; margin:0; list-style-type: none; } /* 对链接应用样式：首先绝对定位，然后设置一个单击区域的宽度和高度，最后设置一个负数作为文本压缩量，从而让它们从屏幕上消失。 */ .imagemap a{ position: absolute; display: block; width:50px; height: 60px; text-indent:-999em; } /*将每个链接定位在相应的人身上*/ .imagemap .rich a{ top:50px; left:80px; } .imagemap .sophie a{ top:80px; right:75px; } .imagemap .cath a{ top:150px; left:70px; } .imagemap .james a{ top:140px; left:145px; } .imagemap .paul a{ top:170px; right:30px; } /*设置一个白色的实线边框应用于鼠标悬停的链接*/ .imagemap a:hover, .imaegmap a:focus{ border:1px solid #fff; }2．flickr风格的图像映射
HTML:
<div class="imagemap"> <img src="images/nerdcore.jpg" width="333" height="500" alt="Some of the ClearLeft team"> <ul> <li class="rich"> <a href="" > <span class="outer"> <span class="inner"> <span class="note">Richard Butter</span> </span> </span> </a> </li> <li class="sophie"> <a href="" > <span class="outer"> <span class="inner"> <span class="note">Sophie Barrett</span> </span> </span> </a> </li> <li class="cath"> <a href="" > <span class="outer"> <span class="inner"> <span class="note">Cathy Jones</span> </span> </span> </a> </li> <li class="james"> <a href="" > <span class="outer"> <span class="inner"> <span class="note">James Box</span> </span> </span> </a> </li> <li class="paul"> <a href="" > <span class="outer"> <span class="inner"> <span class="note">Paul Annett</span> </span> </span> </a> </li> </ul> </div>CSS:
/*常规操作：将div设置为图像尺寸，相对定位为后面的锚元素绝对定位作 铺垫，同时将列表的内、外边距设置为零，去掉项目符号*/ .imagemap{ width:333px; height: 500px; position: relative; } .imagemap ul{ padding:0; margin:0; list-style-type: none; } /*对包含的锚元素绝对定位，给外部span设置深色边框，内部span设置浅 色边框，突出它们在图像中的位置。外加一些基本样式*/ .imagemap a{ position: absolute; display: block; background-image: url(images/shim.gif); text-decoration: none; border:1px solid transparent; } .imagemap a .outer{ display: block; border:1px solid #000; } .imagemap a .inner{ display: block; width:50px; height:60px; border:1px solid #fff; } /*讲锚定位到每个人身上*/ .imagemap .rich a{ top:50px; left:80px; } .imagemap .sophie a{ top:80px; right:75px; } .imagemap .cath a{ top:150px; left:70px; } .imagemap .james a{ top:140px; left:145px; } .imagemap .paul a{ top:170px; right:30px; } /*当鼠标悬停并获得焦点时将锚的边框颜色由透明改为黄色*/ .imagemap a:hover, .imagemap a:focus{ border-color: #d4d82d; } /*为了在热点翻转时显示说明，首先将说明span的内容定位到热点的下面。 因此将span的位置设置为absolute并将底部位置设置为负值，同时设置一 些宽度、内边距和背景颜色、文本居中*/ .imagemap a .note{ position: absolute; bottom:-3em; width:7em; padding:0.2em 0.5em; background-color: #ffc; text-align: center; } /*说明部分在热点下面水平居中*/ .imagemap a .note{ left:25px; margin-left: -4em; } /*接下来目标：实现交互性，默认情况下，说明隐藏；当鼠标悬停在热点 上时才显示。实现：将文本隐藏到屏幕左边之外，并在鼠标悬停时对它重 新定位。*/ .imagemap a .note{ left:-999em; } .imagemap a:hover .note, .imagemap a:focus .note{ left:25px; } /*目标：不是一直显示热点的双边框，而是只是在悬停至热点时才显示。 实现：在默认情况下将内外span的边框设置为透明的，当鼠标悬停至热点 时才显示它们的颜色。*/ .imagemap a .outer{ border:1px solid transparent; } .imagemap a .inner{ border:1px solid transparent; } .imagemap a:hover .outer, .imagemap a:focus .outer{ border-color: #000; } .imagemap a:hover .inner, .imagemap a:focus .inner{ border-color: #fff; } Result:
3.远距离翻转
HTML:
<div class="remote"> <img src="images/nerdcore.jpg" width="333" height="500" alt="Rich,Sophie,Cath,James,Paul"> <ul> <li class="rich"> <a href="" title="Richard Rutter"> <span class="hotspot"></span> <span class="link">»Richard Rutter</span> </a> </li> <li class="sophie"> <a href="" title="Sophie Barrett"> <span class="hotspot"></span> <span class="link">»Sophie Barrett</span> </a> </li> <li class="cath"> <a href="" title="Cathy Jones"> <span class="hotspot"></span> <span class="link">»Cathy Jones</span> </span> </a> </li> <li class="james"> <a href="" title="James Box"> <span class="hotspot"></span> <span class="link">»James Box</span> </a> </li> <li class="paul"> <a href="" title="Paul Annett"> <span class="hotspot"></span> <span class="link">»Paul Annett</span> </a> </li> </ul> </div>CSS:
/*设置基本样式*/ .remote{ width:333px; height: 500px; position: relative; } .remote ul{ padding: 0; margin:0; list-style-type: none; } /*首先将热点设置为绝对定位，然后指定尺寸，但是根据具体情况的不同， 尺寸在后面有所调整，也就是覆盖掉初始尺寸。然后讲锚定位到相关的人 身上。*/ .remote a .hotspot{ width:50px; height:60px; position: absolute; } .remote .rich a .hotspot{ top:50px; left:80px; } .remote .sophie a .hotspot{ top:90px; left:200px; } .remote .cath a .hotspot{ top:140px; left:55px; width:60px; height: 80px; } .remote .james a .hotspot{ top:140px; left:145px; } .remote .paul a .hotspot{ top:165px; left:245px; width:60px; height:80px; } /*将包含链接文本的span也设置为绝对定位，并设置宽度。然后将其调整至 图片的右边，外加个光标设置。*/ .remote a .link{ position: absolute; display: block; width:10em; right:-11em; cursor:pointer; } .remote .rich a .link{ top:0; } .remote .sophie a .link{ top:1.2em; } .remote .cath a .link{ top:2.4em; } .remote .james a .link{ top:3.6em; } .remote .paul a .link{ top:4.8em; } /*为了在鼠标悬停至对应人物或文本上时实现翻转效果，当鼠标悬停在父锚 上时需要在热点span上应用一个边框*/ .remote a:hover .hotspot, .remote a:focus .hotspot{ border:1px solid #fff; } /*为了在鼠标悬停至文本时改变文字颜色，当鼠标悬停在父锚上或其他方式 获得焦点时需要改变span上的样式*/ .remote a:hover .link, .remote a:focus .link{ color:#06f; } Result:
二.黄金时代：
1.被迫的事情总在我脑子里输入一个相反的信号。
2.每个人临死时都是如梦方醒。
3.唯一有意思的事就是寻找神奇。
4.这纯粹是出于幽默感。
5.不管你发明什么东西，你还是你自己。
6.就跑到大街上抄汽车牌。
7.假如真的没有诀窍，我怎会相信诀窍。
8.越是想显出自己强于他人，越是心绪纷乱。
9.写程序时是个软件诗人，作画时是个颜色诗人。
10.别人编十行，我只编一行。
11.干瘪无味的资本主义社会哪里容得下浪漫诗人。
12.真正的诗人都是捣蛋鬼。
13.任何东西都没有固定的颜色。
14.发现每次受压迫都是因为别人气不顺，并且觉得我比他高兴。
15.劳心者治人，劳力者治于人。
16.我们生活在漫漫寒夜，人生好似长途旅行。仰望夜空寻找方向，天际却无引路的明星。
