飘飘悠悠 发表于 2015-1-15 23:16:04

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等伪类的用法是一样的:
1234selector: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"><!--tabedcontent--></div><divid="tab2"class="tab_content"><!--tabedcontent--></div><divid="tab3"class="tab_content"><!--tabedcontent--></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:12

Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

飘灵儿 发表于 2015-1-25 17:55:42

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只想知道 发表于 2015-2-3 12:50:22

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH,专业网页图像设计软件FIREWORKS,并称为“网页三剑客”。

愤怒的大鸟 发表于 2015-2-9 03:01:13

在刚开始接触网页的第一堂课上,听说网页制作会是一门很无聊并且很难听懂的过程,而事实却印证了这样一个事实。

admin 发表于 2015-2-26 20:05:51

使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

莫相离 发表于 2015-3-16 09:57:58

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。
页: [1]
查看完整版本: CSS教程之CSS3特征:CSS3 target伪类