在本人上一篇教程《彻底弄懂CSS盒子模式五(定位强化练习) 》有讲到一个很酷的链接面板提示的实例制作，那时主要是用到display方法来实现对象的显示和隐藏的，但是后来了解到那种方法对搜索引擎不友好，一些特别的阅读设备会读不到信息，比如盲人阅读器等等，所以今天又写了一个类似的教程，这次是用margin来实现，本实例实现方法简单但却很实用，实例做的是仿6room(著名web2.0视频网站)图片链接效果，下面请先运行代码看看最终实现的效果。
运行代码框
[Ctrl A 全部选择 提示：你可先修改部分代码，再按运行]
一、实例实现功能介绍
默认情况下，一个带有一定边框的图片链接放置在网页中，图片链接左下角还有一个“ ”图形，意为添加到收藏夹或者视频播放列表吧（我这里没有加入脚本，只讲界面的实现），当鼠标移到链接图片区域上面时，会出现一个半透明链接简要说明层盖在图片上面，说明层的文字前边还有一个小的网站LOGO，说明层周围还会跟着出现一条黄色的边框，同时鼠标移到左下角“ ”图形上，它的颜色会发生变化，而且像这样的结构一旦做好了，就可以随意在网页上任意地方安排它们位置，效果不会发生改变。下面是实例效果截图。
实例效果截图
二、结构和样式代码
1．结构
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic1.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
