仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 652|回复: 7
打印 上一主题 下一主题

[DIV+CSS] 来看看:经由过程CSS范例的按次改动翻腾效果

[复制链接]
分手快乐 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:23:07 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
你大概已意想到,你能够经由过程指定每键接的分歧作风以创建CSS翻腾效果,这些链接包含一般的链接link(normal),会见,翻转,和激活。而且,你大概也晓得CSS范例的按次能够发生效果上的不同,CSS代码后按次的作风将会代替针关于不异元素的前按次的作风。创建翻腾效果的范例按次显得相称主要。

如今让我们看看怎样布置链接形态的范例在不发生抵触的情形下撑持一般的翻腾效果,而且怎样从头布置这些范例按次以取得分歧的翻腾效果。
链接形态
典范的CSS翻腾效果依附于超链接中四个形态之一的自力范例。能够创建附带CSS事后类的<a>(超链接)范例以指定链接形态:
a:link――惯例,非会见超链接
a:visited――会见超链接
a:hover――会见者操纵鼠标经由过程时的链接
a:active――点击链接
为了可以使典范的CSS翻腾效果一般事情,CSS代码中的CSS范例按次显得十分主要,不管它是一个内部范例表格大概是嵌进在HIML页题目栏中的范例划定规矩。
a:link范例呈现的工夫为最早,由于它可使用于一切的链接。a:visited范例排第二,它将代替任何链接的a:link格局。(假如a:link范例紧随着的是a:visited,a:link大概会代替a:visited范例。)其次是a:hover范例,此范例只使用于会见鼠标下的链接。最初是a:active,以是,当链接被点击时,它能够代替一切别的的范例。
12下一页
在CSS代码中的范例按次断定了每品种型怎样代替别的的范例,即更多的范例能够使用到特定的元素。一般情形下,a:hover范例处于a:link和a:visited范例以后,以是hover形态的范例能够使用于惯例和会见的链接。可是,它也并不是必需遵守这一体例,你能够改动范例按次完成分歧的效果。

假定你想在非会见链接中利用翻腾效果,但不想影响到别的会见链接,你也许想到经由过程代码来处置这类形状上改动,但是你所要做的是从头构造CSS代码。
从会见链接中移除翻腾效果,能够经由过程很复杂地移除a:visited范例。如以下代码改动CSS代码中范例按次能够改动会见链接中翻腾效果:
a:link{
color:#0000FF;
text-decoration:underline;
font-weight:normal;
font-style:normal;
}
a:hover{
color:#0000FF;
text-decoration:underline;
background-color:#FFFF00;
font-weight:bold;
font-style:normal;
}
a:visited{
color:#3399FF;
text-decoration:underline;
background-color:#FFFFFF;
font-style:italic;
font-weight:normal;
}
a:active{
color:#FF0000;
text-decoration:none;
background-color:#CCCCCC;
font-weight:bold;
font-style:normal;
}
注重,a:visited范例中包括指定一切与a:hover不异属性的划定规矩,不然,当会见者的鼠标经由过程一个会见链接时,没有被a:visited范例代替的任何a:hover范例属性将会持续再现。
增加别的效果
除非被别的按次的范例代替,之前的范例将会持续利用不异的元素。以是,细心选择链接形态范例的特性温柔序可让你对非会见和会见链接创建分歧的翻腾效果。
比方,删除背景色彩:#FFFFFF,以上第二个典范代码中的a:visited范例划定规矩将同意背景色彩从a:hover范例使用到会见链接。了局为非会见链接的翻转效果增加了背景色彩和粗体文本。
上一页12

更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的内容,并可能给你一个较高的评价(ranking)。
莫相离 该用户已被删除
沙发
发表于 2015-1-18 06:32:29 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。
板凳
发表于 2015-1-25 15:38:23 | 只看该作者
可以使用 CSS 检查工具进行设计。
再现理想 该用户已被删除
地板
发表于 2015-2-3 05:35:40 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
深爱那片海 该用户已被删除
5#
发表于 2015-2-26 04:27:36 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
飘灵儿 该用户已被删除
6#
发表于 2015-3-8 12:09:56 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
兰色精灵 该用户已被删除
7#
发表于 2015-3-16 01:19:58 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
老尸 该用户已被删除
8#
发表于 2015-3-22 18:38:51 | 只看该作者
所见则所得网页编辑器的优点就是直观性,使用方便,容易上手.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-12-29 21:54

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表