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

网站建设HTML：对话框插件thickbox使用技巧
 网站制作HEAD元素使用集锦
 网站建设方法汇总禁止查看网页源代码全攻略
 网站建设有潜力好网站必须具备的八个规则
 网站设计网页自动转向代码
 北京网站制作怎么让按钮更容易被点击
 北京网页设计网页设计基本配色参考色谱——低沉
 网站建设DIV与Table布局在大型网站的可用性比较
 网站建设本地检验网页是否符合标准的几种方法
 北京网页设计网站设计的思考（九）

品牌理念

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

友好连接

文章搜索

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

北京网站制作网站设计仿6room网站图片链接效果(二)

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

三、分析实现方法

此实例效果一定会用到层的叠加和相对、绝对定位，而且要应用CSS透明度滤镜，这是应该首先会想到的。它的原理是让两个层完美吻合的叠加，一个层默认时隐藏掉，用鼠标事件触发显示，另外左下角的“+”图形默认情况没有隐藏掉，要把它独立出来处理。网站建设
1．默认情况下，如果里面的大图片没有下载完，会有一块灰色的色块，图形下载完了，在图片四周会有灰色的边界，所以在这里组织一个有3px填充的大盒子，内容区块大小与图片大小相等，加上灰色的背景，设置其定位方式为相对定位，等一下其内部元素就可以以它为参考进行绝对定位，所以用到下面样式：

Www_Chinaz_com

.blueidea {网站制作
    background-color: #CCC;北京网站制作
    margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/网站建设
    padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/网站建设
    height: 96px;/*与图片等高*/企通互联
    width: 128px;网站建设
    position: relative;北京网站制作
    float:left;/*让三个实例横向排列*/企通互联
} Www~Chinaz~com

2．限定图片大小，并不显示边框，用到下面样式：

Www_Chinaz_com

.blueidea a img {北京网站设计北京网站设计
    height: 96px;北京网站制作
    width: 128px;北京网页设计
    border:none;网页设计
}

Chinaz_com

3．组织文字说明图层，让其大小比下层稍小（因为我安排了1px的边框），在这个盒子内，让其上边有一定填充（不要用边界，因为我们等一下要用到半透明效果，这个效果是覆盖下面整个区域的），让文字说明不会靠着上边，再让文字缩进一段距离，主要是为了方便等一下对LOGO做背景精确定位到文字说明前，文字不会与LOGO重叠在一起。（在做的时候可以多次精细调节，直至达到满意为止）。接着为这一图层加上个半透明滤镜效果，并重新给出一个margin值，等一下我们要用这种方法来初始化说明图层移出可视区域。用到下面样式： Www@Chinaz@com

.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;/*重定位文字说明层回到正常位置*/ 站长.站企通互联
}

网站设计中.国站长站

4．隐藏说明图层，这里用到margin无限大负值来把元素移出可视区域，我们把这一步放在后面做，不然一开始把它移出去了，你怎么在做的过程中看文字说明层是否与下一层吻合好，是吧。这里用到样式： www.qitongnet.com

Chinaz

.blueidea a span {网页设计
    margin-top:-9000px;/*初始化对象不可见, 企通互联这里不用display: none,因为display: none对搜索引擎不友好*/网站建设
    margin-left:-9000px;北京网站制作
    position: absolute;北京网站制作
} 中国站.长站

5．定位“+”图形，这里我们要注意一点是，不要把它也安排在<a></a>内，因为测试表明它是可以独立响应的，不是与文字说明层一起响应的。这里我用到背景的变换效果，但是这个效果只能在像FF这样的标准浏览器中生效，这是因为IE7以下版本A状态伪类bug缘故，当然IE7是支持的了，IE现在已逐渐向标准靠拢了，这可是标准网页设计者的福音。这里用到样式：中国.站.长站

.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

6．解决IE7以下版本A状态伪类bug，加入一条如下样式：中国.站.长站

.blueidea a:hover {网站建设
background-color: #FFF;/*IE7以下版本A状态伪类bug*/北京网页设计
}

中国站.长站

四、不足 中国站.长.站

此实例的不足是图片左下角的“+”图形变换效果在IE7以下版本浏览器中失效，本人还没有想到较好的解决办法，因为我的要求是：只能纯CSS实现，尽量少用样式代码，同时保证做出来的实例不随它在网页中出现位置的变化而改变，这样“+”元素一定会用到绝对定位，同时其父级采用相对定位，而且要让这种背景变换效果在IE7以下版本生效，只能用A标签，现在问题是父元素内已出现一次A了，那么在样式控制时又会出现样式的继承作用，从而导致效果变乱，如果你能有更好的实现方法一定要记得写出来与大家分享哦。

站.长站

源码下载：demo.rar Www^Chinaz^com

Chinaz_com

此实例效果一定会用到层的叠加和相对、绝对定位，而且要应用CSS透明度滤镜，这是应该首先会想到的。它的原理是让两个层完美吻合的叠加，一个层默认时隐藏掉，用鼠标事件触发显示，另外左下角的“+”图形默认情况没有隐藏掉，要把它独立出来处理。北京网站建设
1．默认情况下，如果里面的大图片没有下载完，会有一块灰色的色块，图形下载完了，在图片四周会有灰色的边界，所以在这里组织一个有3px填充的大盒子，内容区块大小与图片大小相等，加上灰色的背景，设置其定位方式为相对定位，等一下其内部元素就可以以它为参考进行绝对定位，所以用到下面样式：中国站.长.站

.blueidea {网站设计
    background-color: #CCC;网站建设
    margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/网站制作
    padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/网站建设
    height: 96px;/*与图片等高*/北京网站制作
    width: 128px;北京网站设计
    position: relative;网站建设
    float:left;/*让三个实例横向排列*/北京网站建设
}

Www.Chinaz.com

2．限定图片大小，并不显示边框，用到下面样式： Chinaz_com

.blueidea a img {北京网页设计
    height: 96px;网站制作
    width: 128px;网页设计
    border:none;北京网站设计
} Chinaz.com

Chinaz~com

.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;/*重定位文字说明层回到正常位置*/网站制作
} 中国.站长站

4．隐藏说明图层，这里用到margin无限大负值来把元素移出可视区域，我们把这一步放在后面做，不然一开始把它移出去了，你怎么在做的过程中看文字说明层是否与下一层吻合好，是吧。这里用到样式：

Www_Chinaz_com

.blueidea a span {网站制作
    margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/北京网站建设
    margin-left:-9000px;北京网站设计
    position: absolute;网站制作
}

中国站.长.站

.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*/企通互联
} 中国站.长站

6．解决IE7以下版本A状态伪类bug，加入一条如下样式： Chinaz_com

.blueidea a:hover {北京网站建设
background-color: #FFF;/*IE7以下版本A状态伪类bug*/网页设计
}

Www~Chinaz~com

四、不足 中国.站.长站

源码下载：demo.rar Chinaz~com

Chinaz^com

.blueidea {网站设计
    background-color: #CCC;北京网站建设
    margin:5px;/*因为我一共做了三个实例,等一下排列使它们不会靠在一起*/北京网站制作
    padding: 3px;/*形成边框装饰，同时等一下也方便控制其子元素位置,所以我没有用BORDER*/网站建设
    height: 96px;/*与图片等高*/北京网页设计
    width: 128px;企通互联
    position: relative;网站制作
    float:left;/*让三个实例横向排列*/北京网站制作
}

中国站长_站,为中文网站提供动力

2．限定图片大小，并不显示边框，用到下面样式：

Chinaz^com

.blueidea a img {网站设计
    height: 96px;企通互联
    width: 128px;北京网站设计
    border:none;网站设计
} Www@Chinaz@com

中国.站.长站

.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;/*重定位文字说明层回到正常位置*/北京网页设计
}

中国站长_站,为中文网站提供动力

4．隐藏说明图层，这里用到margin无限大负值来把元素移出可视区域，我们把这一步放在后面做，不然一开始把它移出去了，你怎么在做的过程中看文字说明层是否与下一层吻合好，是吧。这里用到样式：中.国.站长站

.blueidea a span {网站设计
    margin-top:-9000px;/*初始化对象不可见,这里不用display: none,因为display: none对搜索引擎不友好*/北京网站设计
    margin-left:-9000px;北京网页设计
    position: absolute;北京网站制作
}

Www_Chinaz_com

中.国.站长站

.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*/北京网站建设
} 中国站长_站,为中文网站提供动力

6．解决IE7以下版本A状态伪类bug，加入一条如下样式：站长.站

.blueidea a:hover {北京网站制作
background-color: #FFF;/*IE7以下版本A状态伪类bug*/网站设计
} Www@Chinaz@com

四、不足 Chinaz^com

源码下载：demo.rar Chinaz~com

北京网站制作

字体：【大】【中】【小】

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

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

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

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

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

相关文章

品牌理念

友好连接

文章搜索

北京网站制作网站设计仿6room网站图片链接效果(二)