仓酷云

标题: CSS教程之CSS3特征:CSS3 target伪类 [打印本页]

作者: 飘飘悠悠 时间: 2015-1-15 23:16
标题: CSS教程之CSS3特征:CSS3 target伪类
这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了
破洛洛文章简介：CSS3target伪类简介.
CSS3target伪类是浩瀚有用的CSS3特征中的一个。它用来婚配文档(页面)的URI中某个标记符的方针元素。详细来讲，URI中的标记符一般会包括一个”#”字符，然后前面带有一个标记符称号，好比#respond，target就是用来婚配ID为respond的元素的。

如今在页面中，点击一个ID链接后，页面只会跳转到响应的地位，可是其实不会有对照分明的UI标识，利用:target伪类能够像:hover等伪类一样对方针元素界说款式。
扫瞄器撑持

由于我们在会商CSS3，以是它如今被除IE6-8之外的一切扫瞄器撑持，可是IE9会撑持这个伪类。这是相称遗憾的，可是这个实际其实不影响你利用它。
怎样利用:target

:target伪类和:hover、:link、:visited、:focus等伪类的用法是一样的：

1234

复制代码

selector:target{color:red;/*otherstyles*/}

复制代码

实例

让我们经由过程一个复杂的例子来演示。好比我们在页面中经常会用到tab，之前我们要用剧本来完成，YUI、jQuery也都有如许的插件大概模块，可是如今我们用:target伪类就能够完成。
HTML布局：

1234567891011

复制代码

<ulclass="tabs"><li><ahref="#tab1">标签一</a></li><li><ahref="#tab2">标签二</a></li><li><ahref="#tab3">标签三</a></li></ul><divid="tab1"class="tab_content"></div><divid="tab2"class="tab_content"></div><divid="tab3"class="tab_content"></div>

复制代码

CSS3代码：

12345678

复制代码

/*layoutstyles*/.tab_content{position:absolute;/*setcontentboxasabsolute*//*otherlayoutstyles*/}#tab1:target,#tab2:target,#tab3:target{z-index:1;}

复制代码

道理想必人人都看懂了，就是将tab内容框设置为相对定位，然后经由过程:target伪类调剂其z-index。
这里是个demo页面。
详细用法就是这么复杂，在实践项目中人人就能够随便发扬了:)
扩大浏览

https://developer.mozilla.org/en/CSS/:target
http://www.red-team-design.com/get-to-know-your-css3-target-pseudo-class
http://css-tricks.com/css3-tabs/

</p>
属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。

作者: 简单生活 时间: 2015-1-17 21:14
Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

作者: 飘灵儿 时间: 2015-1-25 17:55
Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

作者: 只想知道 时间: 2015-2-3 12:50
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。

作者: 愤怒的大鸟 时间: 2015-2-9 03:01
在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

作者: admin 时间: 2015-2-26 20:05
使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

作者: 莫相离 时间: 2015-3-16 09:57
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

欢迎光临仓酷云 (http://www.ckuyun.com/)