来看看：CSS3教程:新增添的布局伪类

只看该作者 · 发表于 2015-1-16 00:04:15

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

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

x

层叠样式表（CascadingStyleSheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术。网页设计者必须掌握的技术之一。
相干浏览文章：CSS3属性选择符先容
4.7.3布局伪类（Structuralpseudo-classes）
CSS3增添了大批的布局伪类，使用文档布局树来完成体现，从而能够削减页面内class属性和ID属性的界说，使得文档加倍简便。

以下示例，请利用WinXP的GoogleChrome大概MACOSX的Safari3.1检察。1.E:root
婚配文档的根元素。在(X)HTML中，根元素就是<html>元素。比方：

:root{border:1pxsolidblue;}

复制代码

在(X)HTML文档中，其效果同等于：

html{border:1pxsolidblue;}

复制代码

2.E:nth-child(n)
婚配一切在其父元素中排第n个的E元素。n能够是数字/关头字/公式，比方：

tr:nth-child(3){……}/*婚配一切表格内里排第3的行<tr>*/tr:nth-child(2n+1){……}/*2n+1，公式，婚配一切奇数行*/tr:nth-child(odd){……}/*odd：关头字，婚配一切奇数行*/tr:nth-child(2n){……}/*2n：婚配一切偶数行*/tr:nth-child(even){……}/*even：关头字，婚配一切偶数行li*/

复制代码

注重：元素的第一个子元素索引为“1”。使用这个伪类，能够很简单地完成双背景致乃至多背景致表格等效果。
比方有xhtml以下：

<olid="sample1"><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li></ol>

复制代码

CSS以下：

#sample1li:nth-child(even){/*#sample1的子元素中排序为奇数的li*/background:#FF9;/*也能够设定float、margin、border等属性*/}#sample1li:nth-child(odd){background:#FC3;}

复制代码

其显现如-41所示。

登录/注册后可看大图

-41E:nth-child(n)的使用1
也能够完成三色乃至多色的背景。比方以下代码：

#sample2li:nth-child(3n+1){background:#F90;}#sample2li:nth-child(3n+2){background:#Fc3;}#sample2li:nth-child(3n){background:#FF9;}<olid="sample2"><li>列表项哦列表项</li><li>列表项哦列表项</li>……</ol>

复制代码

其显现如-42所示。

登录/注册后可看大图

-42E:nth-child(n)的使用2
此时需注重的是，3n+1暗示的是3行轮回内的第1行，而3n则是第3行。
同时，也能够指定某一个特定的子元素，比方以下代码：

#sample3li:nth-child(1){color:#F00;}#sample3li:nth-child(2){color:#F60;}#sample3li:nth-child(3){color:#FC0;}<h4>前3名分歧显现的排行榜</h4><olid="sample3"><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li>……</ol>

复制代码

分离指定了第1、2、3个li的远景色彩color，其显现如-43所示。

登录/注册后可看大图

-43E:nth-child(n)的使用3
也能够为统一列的单位格td指定不异的背景致：

#sample4td:nth-child(3n+1){background:#FCC;}#sample4td:nth-child(3n+2){background:#F99;}#sample4td:nth-child(3n+3){background:#C6F;}<tableborder="0"cellspacing="0"cellpadding="0"id="sample4"><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>……</table>

复制代码

其显现如-44所示。

登录/注册后可看大图

-44E:nth-child(n)的使用4
可是，必要出格注重的是，父元素内一切的子元素都介入排序，而不管元素的范例是甚么，在下面的例子中，子元素的范例都是单一的（li大概td），而上面这个例子中，子元素的范例不再单一（包含dt和dd）：

<dlid="sample5"><dt>dt1，总排行1</dt><dd>dd1，总排行2</dd><dt>dt2，总排行3</dt><dd>dd2，总排行4</dd><dd>dd3，总排行5</dd><dt>dt3，总排行6</dt><dt>dt4，总排行7</dt><dd>dd4，总排行8</dd></dl>

复制代码

假如设定以下的CSS，那末其显现的效果则如-45所示。

#sample5dt{font-weight:bolder;}#sample5dt:nth-child(odd){background:#6CF;}

复制代码

登录/注册后可看大图

-45E:nth-child(n)包含父元素内一切范例的子元素
由-45读者能够发明，判别dt是不是为奇数的前提是其在子元素内总排序，而不是dt元素独自排序。
实例演示以下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"lang="zh-CN"xml:lang="zh-CN"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>:nth-child::css3选择器</title><styletype="text/css">body{font:small/2"宋体",serif;background:#fff;color:#000;}h1,h2,h3{font-size:larger;}h4{background:#eee;}#sample1li:nth-child(even){background:#FF9;}#sample1li:nth-child(odd){background:#FC3;}#sample2li:nth-child(3n+1){background:#F90;}#sample2li:nth-child(3n+2){background:#Fc3;}#sample2li:nth-child(3n){background:#FF9;}#sample3li:nth-child(1){color:#F00;}#sample3li:nth-child(2){color:#F60;}#sample3li:nth-child(3){color:#FC0;}#sample4{width:300px;}#sample4td:nth-child(3n+1){background:#FCC;}#sample4td:nth-child(3n+2){background:#F99;}#sample4td:nth-child(3n+3){background:#C6F;}#sample5dt{font-weight:bolder;}#sample5dt:nth-child(odd){background:#6CF;}</style></head><body><h1>css3选择器</h1><h2>布局伪类(Structuralpseudo-classes)</h2><h3>E:nth-child(n)</h3><h4>双背景致</h4><olid="sample1"><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li></ol><h4>三背景致</h4><olid="sample2"><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li></ol><h4>前3名分歧显现的排行榜</h4><olid="sample3"><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li><li>列表项哦列表项</li></ol><h4>表格的分歧列背景致</h4><tableborder="0"cellspacing="0"cellpadding="0"id="sample4"><caption>表格的分歧列背景致</caption><tr><td>1-1</td><td>1-2</td><td>1-3</td></tr><tr><td>2-1</td><td>2-2</td><td>2-3</td></tr><tr><td>3-1</td><td>3-2</td><td>3-3</td></tr><tr><td>4-1</td><td>4-2</td><td>4-3</td></tr></table><h4>一切子元素</h4><dlid="sample5"><dt>dt1,总排行1</dt><dd>dd1,总排行2</dd><dt>dt2,总排行3</dt><dd>dd2,总排行4</dd><dd>dd3,总排行5</dd><dt>dt3,总排行6</dt><dt>dt4,总排行7</dt><dd>dd4,总排行8</dd></dl></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。

只看该作者 · 发表于 2015-1-18 05:02:15

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-1-25 17:23:58

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-2-3 12:15:35

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-2-9 00:24:50

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

只看该作者 · 发表于 2015-2-26 15:16:47

帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。

只看该作者 · 发表于 2015-3-8 16:01:26

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-3-16 06:56:19

经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.

只看该作者 · 发表于 2015-3-22 21:09:28

学Dreamweaver技术的过程其实是一个增加信心的过程。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 来看看：CSS3教程:新增添的布局伪类

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

相关帖子