相关文章
北京网站建设Dreamweaver 实现多分辨率层定位
网站设计解决图层的精确定位问题
北京网站建设IE地址栏显示网站图标三步走
网站建设首次完整小型站点架构的心得体会
网站制作Photoshop鼠绘魔幻风格自然风景画
企通互联技巧：应该如何合理的应用CSS整体布局声明
北京网页设计技巧总结：CSS提高网页的维护更新效率
网站设计网页中的小三角用DIV+CSS的做法与使用
网站建设图片在显示一定的时间后消失
北京网站制作网页设计三部曲之一:要素分析
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网页设计 >> 网站设计北京网站设计仿6room网站图片链接效果(一)
网站设计北京网站设计仿6room网站图片链接效果(一)
在本人上一篇教程《彻底弄懂CSS盒子模式五(定位强化练习) 》有讲到一个很酷的链接面板提示的实例制作，那时主要是用到display方法来实现对象的显示和隐藏的，但是后来了解到那种方法对搜索引擎不友好，一些特别的阅读设备会读不到信息，比如盲人阅读器等等，所以今天又写了一个类似的教程，这次是用margin来实现，本实例实现方法简单但却很实用，实例做的是仿6room(著名web2.0视频网站)图片链接效果，下面请先运行代码看看最终实现的效果。北京网站制作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">网站建设
<html xmlns="http://www.w3.org/1999/xhtml">北京网站设计
<head>北京网站设计
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />企通互联
<title>仿6room图片链接效果--唐国辉</title>网站设计
<style type="text/css">北京网站制作
<!--北京网站设计
*{网页设计
margin:0px;网站制作
padding:0px;北京网站制作
}网站制作
body {网站设计
margin:20px;
Www~Chinaz~com
网站建设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(http://www.hsptc.com/cssImg/blueidea.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(http://www.hsptc.com/cssImg/blueidea1.gif) no-repeat; Chinaz~com 企通互联
}网站建设
.blueidea em:hover { 网站建设
background-image:url(http://www.hsptc.com/cssImg/blueidea2.gif) ;/*"+"图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/北京网页设计
}网站制作
-->北京网站制作
</style>企通互联
</head>
[中国站长站]
<body>网页设计
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic1.jpg" alt="" /><span> 80万网民追捧全球最性感女主播</span></a><em title="我要收藏"></em></div> Www.Chinaz.com
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div> Chinaz
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>
中国站.长.站
</body>企通互联
</html>
一、实例实现功能介绍 中.国.站长站
默认情况下，一个带有一定边框的图片链接放置在网页中，图片链接左下角还有一个“+”图形，意为添加到收藏夹或者视频播放列表吧（我这里没有加入脚本，只讲界面的实现），当鼠标移到链接图片区域上面时，会出现一个半透明链接简要说明层盖在图片上面，说明层的文字前边还有一个小的网站LOGO，说明层周围还会跟着出现一条黄色的边框，同时鼠标移到左下角“+”图形上，它的颜色会发生变化，而且像这样的结构一旦做好了，就可以随意在网页上任意地方安排它们位置，效果不会发生改变。下面是实例效果截图。
中国站.长.站
Chinaz.com
实例效果截图 中.国.站.长. 网站制作站
二、结构和样式代码 Chinaz_com
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> Chinaz_com <div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div> Chinaz@com
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div> 站长.站
<div class="blueidea"><a href="#"><img src="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://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.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(http://www.hsptc.com/cssImg/blueidea.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(http://www.hsptc.com/cssImg/blueidea1.gif) no-repeat;网页设计
}北京网站建设
.blueidea em:hover { 北京网站制作
background-image:url(http://www.hsptc.com/cssImg/blueidea2.gif) ;/*"+"图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/网站设计
} Chinaz@com
<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> [中国站长站] <div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div> Chinaz@com
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div> 站长.站
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div>
Chinaz.com
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div> Chinaz@com
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div> 中.国.站长站
2．样式 中.国.站.长.站
*{企通互联 Chinaz@com
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(http://www.hsptc.com/cssImg/blueidea.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(http://www.hsptc.com/cssImg/blueidea1.gif) no-repeat; 网页设计网站制作
}北京网站建设
.blueidea em:hover { 网站设计
background-image:url(http://www.hsptc.com/cssImg/blueidea2.gif) ;/*"+"图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/网站设计
} 中国站长_站,为中文网站提供动力
Www~Chinaz~com
<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> 中国站长_站,为中文网站提供动力
<div class="blueidea"><a href="#"><img src="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://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div> [中国站长站]
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div> Www@Chinaz@com
Www_Chinaz_com
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic2.jpg" alt="" /><span>根据韩寒作品改编电视剧《三重门》</span></a><em title="我要收藏"></em></div>
<div class="blueidea"><a href="#"><img src="http://www.hsptc.com/cssImg/pic3.jpg" alt="" /><span>CG少女（3维立体,比真人还漂亮）</span></a><em title="我要收藏"></em></div> Chinaz_com
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;网页设计
}网站设计 www.qitongnet.com
.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(http://www.hsptc.com/cssImg/blueidea.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(http://www.hsptc.com/cssImg/blueidea1.gif) no-repeat;网站设计
}网站设计
.blueidea em:hover { 北京网站制作
background-image:url(http://www.hsptc.com/cssImg/blueidea2.gif) ;/*"+"图片鼠标滑过背景变换,只有标准浏览器起作用,IE7以下版本BUG*/北京网页设计
} 中国站长_站,为中文网站提供动力