css图像映射
上次提到王伟找我问问题,嗯,他还留了两个问题给我,一个是tab切换,我直接给他jqueryui的tab链接了,另一个就是带图片的map映射,今天晚上花了大量的时间做了一下。本来很早就做出来了的,但我试着让它更丰富了一些,自己借着这个例子试了一下css3的box-shadow、border-radius、opacity属性,还加了个箭头,这个因为一个小知识点不知道花了我很长时间,箭头的图片一直加载不了,后来google知道是因为background:url(image.gif)加载的是css所在文件的文件夹路径,比如文件目录是
/root
-----images/arrow.gif
-----css/style.css
-----index.htm
你得到的是style.css所在的文件路径,那你应该使用background:url(../images/image.gif)来加载图片。
再记下css3的box-shadow用法:
box-shadow有六个可设值:img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色 }
参考资料:w3school 帕兰印象 css3.info
另外记一下下次要详细总结的概念:position的用法。还有今天晚上做这个demo的时候看到豆瓣读书的书籍的detail-iframe用的是display:none,记得《精通css》上讲出于为视力障碍使用读屏软件的访客考虑,是不推荐这种用法的,应该用绝对定位加上left负值来隐藏它们,我在例子里面用的就是这个方法。也许是出于自己还不知道的方面考虑的吧,下次找个时间发个豆邮问一下克军老师。
这是今天晚上的DEMO。