动态网站制作指南
[  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
电脑书籍下载:程序设计书籍 | 数据库教程书籍 | 平面与多媒体书籍 | 网络通讯书籍 | 系统管理书籍 | 网络安全书籍 | 认证考试书籍
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ CSS教程 ]的信息

本月文章推荐
.CSS+DIV:让文本字符环绕在你的图.
.CSS层叠样式的主次顺序.
.CSS仿淘宝首页导航条布局效果.
.CSS Hack汇总快查.
.用CSS打造可折叠伸缩名片菜单.
.引入CSS样式的五种方式.
.技巧总结:div中class与id的区别.
.使用 CSS 创建固定宽度的布局.
.第二章 CSS的应用方式.
.精通 CSS 滤镜(二).
.CSS+DIV设计实例:超酷的竖排导航.
.CSS制作网页编写的提醒及小技巧整.
.CSS教程:CSS文件应该保持整洁和统.
.网页风格化 用CSS实现皮肤适时切.
.浏览器Firefox与IE在CSS样式表中.
.web标准化设计:常用的CSS命名规.
.CSS制作的阴影链接文字.
.网页设计之CSS基础语法学习.
.标记语言:为指定css样式.
.精通 CSS 滤镜(四).

发现CSS控件的好处

文章类别:CSS教程 | 发表日期:2004-3-11 |


很长时间以来,网络开发者通过使用图片和javascript脚本代码来开发交互式的控件。然而,在许多情况下使用CSS的规则来定义文本超链接的格式将是开发交互式控件的一个较好选择。使用CSS技术开发更快更有效,所以现在在众多网站上看到这种技术已经不是一件奇怪的事情了。

使用传统方法开发控件的缺点
 
使用传统的技术开发一个控件常常是从用一个包含了一个矩形或其它形状文本输入框的小图标开始的。这个控件也许使用阴影、光效、倾斜或者其它的效果予以修饰,但是它本质也就只是一个包含了文本的框架。

首先,你需要为控件的每个状态创建一个独立的图标。例如,你需要为控件在默认情况下创建一个图标,还要为其在鼠标指针指向这个控件的时候创建一个图标。仅仅是这样一个简单的效果,你就需要至少两个图标(默认和鼠标指向两个状态),如果你要加入点击和访问过的状态,每个控件就需要三或四个图标。

在你的网页中加入一个基本的图标用于超链接再简单不过,只需要牢记输入合适的位置以满足访问需要

为了使你的控件具有交互性,你需要增加javascript脚本代码来使控件图标能够在鼠标事件发生的时候有所反应,比如说在鼠标指向图标的时候。像Dreamweaver这样的开发软件可以使用简单的鼠标操作自动添加代码,但是这些代码包含了网页的大小信息。

为了使得动态效果,你需要预先下载图片这样当用户指向这个控件的时候浏览器能立即改变。预先下载图片将会使网页的加载时间变长,而且它的不方便之处还在于即使是用户不需要使用所有的控件,它也要加载所有的图片的。

是什么使得CSS技术具有优越性?
使用CSS,你可以从一个简单的文本超链接中创建一个完全的交互控件。适当的格式化可以把一个段落变化或者分解成一个围绕着文本超链接的矩形框。在超链接文本中添加动态效果,只需要多几条简单的CSS代码就可以使得控件具有交互性。与基于图标的空间相比,这个控件有以下几个优点:

1、不需要任何的图标。CSS通过格式化文本来创建控件效果,所以不需要创建任何独立的图标文件。

2、你不需要键入任何的文本属性,因为CSS控件的文本就已经具有了完全的可访问性。

3、更加有效的代码。CSS规则和分类的代码比其所取代的javascript脚本代码更小,因而浏览器执行的更快。

4、没有图标需要预先加载。含有CSS控件的网页加载速度要明显快一些。

5、CSS规则可以在所有的网站上容易地使用和维护。可以通过修改你的CSS风格更改你网页上所有的控件形态。

通过为超链接的控件格式化创建规则,你可以通过在其他文件中使用超连接格式化使控件看上去和用起来与其它的不同。
解析一个CSS控件的例子

 
下面是一个引用的CSS风格表单的例子。格式化规则创建的.button类有80象素宽,背景是黑色的,白色的边框,白色的文本框。

.button {

....border: 1px solid White;

....padding: 5px;

....width: 80px;

....color: White;

....font-family: Arial, Helvetica, sans-serif;

....font-size: 1.1em;

....font-weight: normal;

....text-align: center;

....height: 1.25em;

....background-color: Black;

}

 

接下来,风格表单包括具体说明格式是如何随着超链接的状态变化而变化的规则。这些规则都是相互关联的并且只在类.button的范围内影响。默认的链接状态不改变;鼠标覆盖的状态是在蓝色背景下的白色的文本边框;访问过的状态是在深灰色背景下的浅灰色文本框。

 

.button a:link {

    text-decoration : none;

    color : White;

}

.button a:hover {

    text-decoration: none;

    color : White;

    font-weight : bold;

    background : Blue;

}

.button a:visited {

    text-decoration : none;

    color : #BBBBBB;

    background : #333333;

}

 

下面的代码显示了在网页上使用CSS控件的简单操作。所有需要做的就只是将合适的类的属性添加到模块标签中去(例如分段或者是段落),而这个标签包含一个简单的超链接。在这种情况下,结果将是三个矩形控件:Home,Gallery和About Us。

    <div class="button"><a href="default.htm">Home</a></div>

    <div class="button"><a href="gallery.htm">Gallery</a></div>

    <div class="button"><a href="about_us.htm">About Us</a></div>

在文本超链接中使用CSS格式创建控件是既快而且高效的,并且结果对于大多用户都足够满足需要。这个技术的优势对于基于图标的控件开发可以创造出一个新的标准。

 


上一篇:创建一个纯CSS的水平导航条 人气:32300
下一篇:用CSS缩写给你的网站加速 人气:26112
点击此处浏览全部CSS的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-5-16 乘风多用户PHP统计系统 v3.4
2008-5-16 轩溪下载系统 v3.78 build 0515
2008-5-16 普沙B2B 浙江省商贸网 v2.0
2008-5-16 asp抓蜘蛛的小程序 v1.0
2008-5-16 齐齐乐网私服发布站 仿haosf新版
2008-5-16 IssTech信息反馈系统 v1.0
2008-5-16 自由领域大头贴(js接口版) 修正版
2008-5-16 医院网站系统
2008-5-16 智拓-分类信息管理系统 v5.0
2008-5-7 Windows XP SP3 官方英文版
2008-5-7 Windows XP SP3 官方香港中文版
2008-5-7 Windows XP SP3 官方繁体中文版
2008-5-7 Windows XP SP3 官方简体中文版
2008-4-30 Multiple Unzip Wizard 1.02
2008-4-30 Multiple Unrar Wizard 1.0.0
2008-4-30 WinZip Install/Try/Uninstall a
2008-4-30 ZIP压缩文件修复器WzipFix 2.0
2008-4-30 Pentazip 6.01 Build 189 For Wi
  发表评论
姓 名: 验证码: [ 全部贴吧 ] [ 浏览评论 ]
内 容:
[ 汉字翻译拼音 ] [ 广告代码 ] [ 符号对照表 ] [ 进制转换 ] [ 经典小工具 ] [ 个税计算 ] [ 汉字简繁转换 ] [ 普通单位换算 ] [ 公制单位换算 ]
[ 生辰老黄历 ] [ 国内电话区号 ] [ 国家代码与域名缩写 ] [ 文字加密解密 ] [ 健康查询 ] [ 万年历 ] [ 手机号码查询 ] [ ip搜索 ] [ Google PR查询 ]
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報