仿6room网站图片链接效果
作者:webflash 来源:蓝色理想 发布时间:2007-06-21 13:59:00
内容摘要:在本人上一篇教程《彻底弄懂CSS盒子模式五(定位强化练习) 》有讲到一个很酷的链接面板提示的实例制作,那时主要是用到display方法来实现对象的显示和隐藏的,但是后来了解到那种方法对搜索引擎不友好,一些特别的阅读设备会读不到信息,比如盲人阅读器等等,所以今天又写了一个类似的教程,这次是用margin来实现,本实例实现方法简单但却很实用,实例做的是仿6room(著名web2.0视频网站)图片链接效果 下面请先运行代码看看最终实现的效果。
运行代码框
一、实例实现功能介绍
默认情况下,一个带有一定边框的图片链接放置在网页中,图片链接左下角还有一个“+”图形,意为添加到收藏夹或者视频播放列表吧(我这里没有加入脚本,只讲界面的实现),当鼠标移到链接图片区域上面时,会出现一个半透明链接简要说明层盖在图片上面,说明层的文字前边还有一个小的网站LOGO,说明层周围还会跟着出现一条黄色的边框,同时鼠标移到左下角“+”图形上,它的颜色会发生变化,而且像这样的结构一旦做好了,就可以随意在网页上任意地方安排它们位置,效果不会发生改变。下面是实例效果截图。
实例效果截图
二、结构和样式代码
1.结构
<div class="blueidea"><a href="#"><img src="https://img.aspxhome.com/file/UploadPic/20075/2007511165137676.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a href="#"><img src="https://img.aspxhome.com/file/UploadPic/20075/2007511165137285.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a href="#"><img src="https://img.aspxhome.com/file/UploadPic/20075/2007511165137859.jpg" alt="" /><span>CG少女(3维立体,比真人还漂亮)</span></a><em title="我要收藏"></em></div>
2.样式
*{
margin:0px;
padding:0px;
}
body {
margin:20px;
font-size: 12px;
line-height:18px;
}
.blueidea {
background-color: #CCC;
margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/
padding: 3px;/*形成边框装饰,同时等一下也方便控制其子元素位置,所以我没有用BORDER*/
height: 96px;/*与图片等高*/
width: 128px;
position: relative;
float:left;/*让三个实例横向排列*/
}
.blueidea a img {
height: 96px;
width: 128px;
border:none;
}
.blueidea a span {
margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/
margin-left:-9000px;
position: absolute;
}
.blueidea a:hover {
background-color: #FFF;/*IE7以下版本A状态伪类bug*/
}
.blueidea a:hover span {
height: 88px;
width: 128px;
position: absolute;
left: 0px;
top: 0px;
border:1px solid #F90;
padding: 10px 2px 2px 2px;/*让说明文字不要太靠上边界*/
background:#FFF url(/file/UploadPic/20075/2007511165132597.gif) no-repeat 5px 10px;/*LOGO图片定位*/
text-indent: 28px;/*文本缩进28px,避免与背景LOGO叠加*/
filter:alpha(opacity=90);/*CSS透明度滤镜*/
opacity:0.9;/*针对Mozilla浏览器CSS透明度滤镜*/
display: block;
text-decoration: none;/*去除说明文字链接下划线*/
cursor:pointer; /*让光标显示手形*/
margin:0px;/*重定位文字说明层回到正常位置*/
}
.blueidea em {
position:absolute;
left:5px;
bottom:5px;
width:25px;
height:25px;
cursor:pointer;
background:url(/file/UploadPic/20075/2007511165136842.gif) no-repeat;
}
.blueidea em:hover {
background-image:url(/file/UploadPic/20075/2007511165136195.gif) ;/*"+"图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/
}
猜你喜欢
- 很多朋友都有过制作网页的经历,如今,众多网页的设计都用到了表格。这样不仅有利于网页的维护,同时,提高了网页的观赏性。在众多网页制作风格中,细
- 我对这两种连接方式认识不够深,似乎朋友们对此也没有定论。请问哪一种更好呢?DSN是采用数据源的连接方式,其使用方法是: Conn.
- 【原文地址】New "Orcas" Language Feature: Extension Methods【原文发表日期
- ASP给图片加水印是需要组件的...常用的有aspjpeg软件和中国人自己开发的wsImage软件,可以上网搜索下载这两个软件,推荐使用咱们
- asp网站程序在国内运用很广,但是类似于im286.asp?id=20050307213811这样的url有点不利于搜索引擎的收录,也就是说
- 一、Excel环境配置 服务器端的环境配置从参考资料上看,微软系列的配置应该都行,即:1.Win9x+PWS+Office2.Wi
- 快捷键可以帮助我们有效提高效率,我们来看看网页设计软件FrontPage有哪些快捷键。相关文章:Dreamweaver快捷键大全、photo
- 如果服务器出现Raid故障,在数据基本恢复成功后,发现其中的一个Sql Server日志文件(扩展名LDF)损坏严重,我们可以通过下面的操作
- 死锁是指在某组资源中,两个或两个以上的线程在执行过程中,在争夺某一资源时而造成互相等待的现象,若无外力的作用下,它们都将无法推进下去,死时就
- Mysql Explain 详解一.语法explain < table_name >例如: explain select * f
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 14 - Periodical and Intro
- 关于SQL Server数据库的一切信息都保存在它的系统表格里。我怀疑你是否花过比较多的时间来检查系统表格,因为你总是忙于用户表格。但是,你
- 对数据库的备份是网站管理人员的必修课,那么常用的数据库备份方式有哪些呢?应如何选择?数据库备份有四种类型,分别应用于不同的场合,下面简要介绍
- 网页离不开链接,而默认链接的表现形式总是千篇一律的蓝色文字加底线,每当我们点击它时,周围会出现虚线框,表示该链接是当前的焦点,影
- 很多朋友和我讨论了一些关于网站开发到底使用哪种语言最合适,尤其是到网站一定有一定流量的时候,到底那种web语言更适合做站呢,精灵这里根据自己
- 图片外框特征参数:①dashed:虚线 ②dotted:点虚线 ③solid:实线 ④double:双线 ⑤groove:沟槽状 ⑥ridg
- 对url进行编码在服务器端我们可以使用asp中的server.urlencode,很方便实现。如:<% ss="asp之家欢
- 提叻一个代码段,要人帮助解释一下。代码如下:declare type t_indexby is ta
- 如何使用Iframe实现本页提交?例:chunfeng.html< html>< head>&n
- SQL Server 2005 和 2008 有几个关于高可用性的选项,如日志传输、副本和数据库镜像。所有这些技术都能够作为维护一个备用服务