仓酷云

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

[DIV+CSS] 来看看:CSS复合挑选器:css3让我们挑选元素变得愈来愈复杂

[复制链接]
再现理想 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 23:14:23 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

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

x
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
网页制造Webjx文章简介:利用css的类名交集复合选择器.

起首先看一下基础界说:

复合选择器就是两个或多个基础选择器,经由过程分歧体例毗连而成的选择器,次要包含“交集”选择器、“并集”选择器、“儿女”选择器。

交集选择器

“交集”复合选择器是由两个选择器间接毗连组成,其了局是选中两者各自元素局限的交集。个中第一个必需是标志选择器,第二个必需是种别选择器大概ID选择器。这两个选择器之间不克不及有空格,必需一连誊写。
注重个中第一个必需是标志选择器,如p.class1,但偶然候会看到.class1.class2,即2个都是类选择器,在其他扫瞄器中是同意呈现这类情形的,但IE6不兼容。以下表:
两个类选择器的“交集”复合选择器扫瞄器撑持表Mac:Safari4.0撑持Mac:Chrome5.0撑持Mac:FireFox3.6撑持Mac:Opera10撑持Win:FireFox3.6撑持Win:Opera10撑持Win:IE6不撑持Win:IE7撑持Win:IE8撑持复合选择器的利用

这是个复杂的tab菜单:

以下是html代码:
123456<ulclass="nav"><liclass="first"><ahref="">节目</a></li><liclass="current"><ahref="">合集</a></li><li><ahref="">草稿</a></li><liclass="last"><ahref="">项目</a></li></ul>为了完成以上效果,我们在css中可使用复合选择器。
选择<a>标签

能够用一个选择器来界说一切的<a>元素,以下:
  1. .navlia{}
复制代码

选择第一个<a>元素

为了增添列表左上角的圆角效果,你必要选择第一个<a>元素.这能够用以下的选择器来完成:
  1. .navli.firsta{}
复制代码

选择最初一个<a>元素

为了增添列表右上角的圆角效果,你必要选择最初一个<a>元素.这能够用以下的选择器来完成:
  1. .navli.lasta{}
复制代码

凸起显现以后页

经由过程改动tab的色彩来显现页面是以后页,我们能够在类名中到场current这个类名来完成,以下:
  1. .navli.currenta{}
复制代码

为以后页面的摆布上角增加圆角款式

如今有个成绩,第一个和最初一个选项被选中的时分拐角是直角的.为了到达选中时分是以后页的款式,拐角也是圆角效果,我们必要给专门给它们写特别的选择器,因为如今我们的类名都在统一个元素中,以是我们终极能够用交集复合选择器来完成,以下:
  1. .nav.first.currenta{}.nav.last.currenta{}
复制代码

了局

这看上往很复杂,是否是?就像下面提到的,如今的成绩是:IE5和IE6都不撑持类名交集复合选择器。IE5和IE6在辨认类名时分只会辨认最初一个类名。效果以下:
  1. .nav.first.currenta{}.nav.last.currenta{}
复制代码
IE5和IE6把这2个选择器剖析为:
  1. .nav.currenta{}.nav.currenta{}
复制代码
这意味着这些扫瞄器会给一切确当前页都增添圆角效果,效果以下:

在IE7下也是没成绩的,申明IE7也撑持类名交集复合选择器。
办理的举措

能够给第一个和最初一个li独自加一个current的款式,但如许增添了js的包袱。
123456<ulclass="nav">;<liclass="firstfirst_current"><ahref="">节目</a></li>;<liclass="current"><ahref="">合集</a></li>;<li><ahref="">草稿</a></li>;<liclass="lastlast_current"><ahref="">项目</a></li>;</ul>;.nav.first_currenta{}
.nav.last_currenta{}
  1. [/code][size=4]会商[/size]
  2. 有一种办法可让我们不必在页面中增添像first、last这类过剩的类名,那就是利用css3的款式。css3让我们选择元素变得愈来愈复杂,完成头尾效果可用以下效果:
  3. [code]li:first-of-typea{}li:last-of-typea{}
复制代码
</p>
CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。
灵魂腐蚀 该用户已被删除
沙发
发表于 2015-1-26 22:48:08 | 只看该作者
Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
飘飘悠悠 该用户已被删除
板凳
发表于 2015-2-5 06:16:16 | 只看该作者
Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。
老尸 该用户已被删除
地板
发表于 2015-2-11 08:01:50 | 只看该作者
运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
变相怪杰 该用户已被删除
5#
发表于 2015-3-2 01:10:13 | 只看该作者
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。
若相依 该用户已被删除
6#
发表于 2015-3-11 04:12:04 | 只看该作者
由CS4 版本开始,则转用WebKit 排版引擎(亦即Google Chrome和Apple Safari浏览器所用的排版引擎)作为网页预览。
小魔女 该用户已被删除
7#
发表于 2015-3-17 22:09:32 | 只看该作者
足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程,随着互联网(Internet) 的家喻户晓。
蒙在股里 该用户已被删除
8#
发表于 2015-3-17 22:09:36 | 只看该作者
dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS,三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。
9#
发表于 2015-3-25 08:22:51 | 只看该作者
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别,但它同时也存在着致命的弱点。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-4-20 02:22

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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