网站制作网站制作仿6room网站图片链接效果(一)_网页设计 -网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

网页导航设计九大注意事项
 企通互联新手入门：利用DW8掌握网页代码基本格式
 网站建设时钟显示在任意指定位置
 网站制作在Dreamweaver中自动设置网页的水平线颜色
 北京网站制作下拉菜单网页特效，效果很不错而且符合Web标准
 网站建设实现CSS制作网页时绝对居中问题的总结
 网页设计简单学习CSS实现网页布局的基础知识
 北京网站建设用CSS和表格代码实现每行交替颜色的效果比较
 北京网站设计RSS 在线阅读器开发实例
 网页设计良好用户体验的网站主页需具备12个特征

品牌理念

北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!

友好连接

文章搜索

你的位置：首页 >> 网页设计 >> 网站制作网站制作仿6room网站图片链接效果(一)

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

作者：北京网站建设日期：2008-03-27 06:14:06 来源： http://www.qitongnet.com

在本人上一篇教程《彻底弄懂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>

Chinaz.com

一、实例实现功能介绍 中.国.站长站

默认情况下，一个带有一定边框的图片链接放置在网页中，图片链接左下角还有一个“+”图形，意为添加到收藏夹或者视频播放列表吧（我这里没有加入脚本，只讲界面的实现），当鼠标移到链接图片区域上面时，会出现一个半透明链接简要说明层盖在图片上面，说明层的文字前边还有一个小的网站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>

中.国站长站

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> 站.长.站

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

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>

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>

Www.Chinaz.com

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．样式 中.国.站.长.站

*{北京网站设计
    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;网站设计 www.qitongnet.com
    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;/*去除说明文字链接下划线*/

Chinaz@com

网站设计
    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/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 {大】【中】【小】

上一篇：北京网页设计网页设计中如何使用嵌套的框架集

下一篇：北京网站设计仿6room网站图片链接效果(一)

这是一个与众不同的品牌，企通互联只专注于网站建设领域！中小型企业网站建设最佳合作伙伴！网站建设咨询热线：010-65587978/77/76/75!

网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

http://www.qitongnet.com 网站建设咨询热线：010-65587978/77/76/75

相关文章

品牌理念

友好连接

文章搜索

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