WEB开发网
开发学院软件教学网络软件 仿6room网站图片链接效果(一) 阅读

仿6room网站图片链接效果(一)

 2009-05-30 10:50:26 来源:WEB开发网   
核心提示: 一、实例实现功能介绍默认情况下,一个带有一定边框的图片链接放置在网页中,仿6room网站图片链接效果(一)(2),图片链接左下角还有一个“+”图形,意为添加到收藏夹或者视频播放列表吧(我这里没有加入脚本,就可以随意在网页上任意地方安排它们位置,效果不会发生改变,只讲

一、实例实现功能介绍

默认情况下,一个带有一定边框的图片链接放置在网页中,图片链接左下角还有一个“+”图形,意为添加到收藏夹或者视频播放列表吧(我这里没有加入脚本,只讲界面的实现),当鼠标移到链接图片区域上面时,会出现一个半透明链接简要说明层盖在图片上面,说明层的文字前边还有一个小的网站LOGO,说明层周围还会跟着出现一条黄色的边框,同时鼠标移到左下角“+”图形上,它的颜色会发生变化,而且像这样的结构一旦做好了,就可以随意在网页上任意地方安排它们位置,效果不会发生改变。下面是实例效果截图。

实例效果截图

二、结构和样式代码

1.结构

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic1.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女(3维立体,比真人还漂亮)</span></a><em title="我要收藏"></em></div>


<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女(3维立体,比真人还漂亮)</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>

<div class="blueidea"><a href="#"><img src=http://tech.ddvip.com/2009-05/"http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女(3维立体,比真人还漂亮)</span></a><em title="我要收藏"></em></div>

上一页  1 2 3 4 5  下一页

Tags:room 网站 图片

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接