网站用户体验整合设计-体验css+div之图像替换 1.徽标图像替换

体验css+div之图像替换 1.徽标图像替换

Post by 张美工, 2008-10-30, Views:

建立徽标需要三个元素：
+徽标图像   +标记    +CSS
　　因为徽标的位置是固定的，将它保存为一个具有透明度的简单GIF，其颜色与它覆盖的照片部分相似。对于
尽可能使用H1建立徽标。这是因为站点的名称几乎总是整个页面标记结构中最高等级的元素。因此，使用以下标记：
　　<h1>本文来源CSS Mastery Advanced Web Standards Solutions精通CSS</h1>
　　注意，h1中重复了徽标图像中的文本。对于那些在关闭样式的情况下进行浏览的用户（禁用样式的用户、移动设备用户），这是一个替代措施：而且，这通常可以帮助搜索引擎进行分类，因为在决定页面的关键词分类时常常重点考虑h1标签中的文本。
　　这个h1的样式有点儿复杂。它以徽标图像作为背景，使用top和left属性在页面上对徽标进行绝对定位，并且使用text-indent将备用文本推到页面的可显示区域之外：
h1 {
margin:0;
position:absolute;
top:20px;
left:46px;
z-index:3;
width:126px;
height:87px;
background:url(../img/logo.gif)no-repeat;
text-indent:-9000px;
}
　　设置的宽度与徽标图像的宽度相同，并且使用z-index值3确保徽标出现在其他元素上面。由于图像中的透明度，这里（以及这个实例研究的其他地方）使用phark图像替换方法，而不是Gilder/Levin方法或者其他图像替换方法。
　　代码编写到这里已经可以用了。但是，我们再做一点儿改进以满足一种常见的易用性需求。相当一部分网络用户期望站点的徽标是一个返回主页的链接。为了实现这种效果，只需向标记中添加一个锚标签：
<h1><a href="/">Tuscany Luxury Resorts</a></h1>
然后，在样式表中添加以下代码：
h1 a{
     display:block;
     height:87px;
     background:url(../img/logo.gif)no-repeat;
}
　　注意，这里重复了高度和背景图像。现在可以从h1中删除高度，因为这个重复是不必要的，但是背景图像需要重复以避免当用户鼠标经过徽标时发生闪烁（这在IE中常常发生）。

相关文章：　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
# Dreamweaver的超级技巧汇总(6)
# Dreamweaver的超级技巧汇总(5)
# Dreamweaver的超级技巧汇总(4)
# Dreamweaver的超级技巧汇总(３)
# Dreamweaver的超级技巧汇总(2)
# Dreamweaver的超级技巧汇总(1)
# 在线QQ MSN TEL交谈工具代码
# 方便使用的一些小简短input\form代码
# VSS使用手册
# JS表单判断函数代码大全 (三)
# JS表单判断函数代码大全 (二)
# JS表单判断函数代码大全

# I E和火狐的css兼容性问题归总

# 体验css+div 之　CSS hack:区分IE6，IE7，firefox

# 体验css+div 之兼容标准XHTML的浮动层特效实现

# 因为编码差异导致IE6不能正常解析CSS文件

# 商业网站响应用户需求重视与Firefox兼容

# frameset 的属性
# frameset元素属性详解、浮动框架的制作、超链接与框架的制作

# 体验css+div 之 SEO

# 40个网页常用小代码

# div+css样式几个小精华

# 网站用户体验--CSS常用小技巧

# 体验css+div 之 css技巧-经典中的经典

# 体验css+div 之 CSS样式表设计的十条技巧

# 体验css+div 之网页切图过程中div+css命名规则

# 网站用户体验--根据项目需求定义常用CSS2基本定义例子
# 体验css+div 之三种使网站背景图片自动适应浏览器大小的方法

# 创建锚链接

# 如何让单行文本框input与多行文本框textarea背景透明

# 用EditPlus转化文件格式到UTF-8
# 让长字符URL/Email自动换行

# HTML特殊字符显示

# 体验css+div定位与table定位代码的差异
# 体验css+div 之 TBody是什么意思?有什么作用?<TBODY>和<BODY>有和区别？

# 体验css+div 简单的滑动门效果代码

# 体验css+div 超实用的滑动门效果代码（css和代码都包含在内）

# 彻底弄懂CSS盒子模式(DIV布局快速入门)

# 如何把握网页布局
 # 实例详解CSS网页布局原理

# 体验CSS+DIV 之基本布局

#  体验css+div 之解决流体布局的问题
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞
#  体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞
# 体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜固定宽度布局＞

#  体验css+div 之为什么css+div 会盛行
#  体验css+div中id和class各自的用法及区别

# 体验css+div 之规划、组织和维护样式表

# 体验css+div 之基本列表样式

# 体验css+div 之为样式找到目标

# 体验css+div 之圆角框

# 体验css+div 之层叠和特殊性
# css之自动换行

# CSS控制连续英文字母或数字强制换行

# 让css使网页图片半透明

# 体验css+div 之背景透明内容不透明的写法
# 体验css+div 之给整个页面添加渐变背景
 # 用css样式控制做成的按钮,取代图片按钮

# 体验css+div 之鼠标经过按钮发生变化效果
# 体验css+div 之文本框自适应窗口宽度
# 体验css+div 老问题重新讲“怎样使页面整体居中”
# 体验css+div之图像替换 1.徽标图像替换
# 体验css+div 之使用自动空白边让设计居中

+

Tags: 体验cssdiv 图像替换徽标图像替换

分类:css+div | 评论:0 | 引用:0

上一篇：HTML特殊字符显示
下一篇：体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜弹性布局＞

或许你还对下面的文章感兴趣

Comments

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

最新文章

最新评论

Guest