CSS/tutorials/lesson8 - 版本历史

Allen：/* 小结 */

2010-10-16T06:57:24Z

‎小结

Allen：/* 用div组织元素 */

2010-10-16T06:55:35Z

‎用div组织元素

Allen：/* 用span组织元素 */

2010-10-16T06:53:17Z

‎用span组织元素

Allen：/* 用span组织元素 */

2010-10-16T06:52:51Z

‎用span组织元素

Allen：以内容'{{top news}} ==第8课：组织元素（span和div）== span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。在这一课中...'创建新页面

2010-10-16T06:50:26Z

以内容'{{top news}} ==第8课：组织元素（span和div）== span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。在这一课中...'创建新页面

新页面

{{top news}}

==第8课：组织元素（span和div）==

span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。

在这一课中，我们将进一步探究span和div的用法，因为这两个HTML元素对于CSS是很重要的。
用span组织元素
用div组织元素

==用span组织元素==

==用div组织元素==

==小结==

{{comment}}

[[Category:CSS]]

←上一版本		2010年10月16日 (六) 06:55的版本
第35行：		第35行：

	==用div组织元素==		==用div组织元素==
		+	如前面例子所示，span的使用局限在一个块元素内，而div可以被用来组织一个或多个块元素。
		+
		+	除去这点区别，div和span在组织元素方面相差无几。让我们来看一个例子。我们将历届美国总统按其所属的政营分别组织为两个列表：
		+
		+	<nowiki> <div id="democrats">
		+	<ul>
		+	<li>富兰克林·D·罗斯福</li>
		+	<li>哈利·S·杜鲁门</li>
		+	<li>约翰·F·肯尼迪</li>
		+	<li>林登·B·约翰逊</li>
		+	<li>吉米·卡特</li>
		+	<li>比尔·克林顿</li>
		+	</ul>
		+	</div>
		+	<div id="republicans">
		+	<ul>
		+	<li>德怀特·D·艾森豪威尔</li>
		+	<li>理查德·尼克松</li>
		+	<li>杰拉尔德·福特</li>
		+	<li>罗纳德·里根</li>
		+	<li>乔治·布什</li>
		+	<li>乔治·W·布什</li>
		+	</ul>
		+	</div></nowiki>
		+
		+	在这里，我们可以采用跟上例同样的方法来处理样式表：
		+
		+	#democrats {
		+	background:blue;
		+	}
		+	#republicans {
		+	background:red;
		+	}
		+
		+	[[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson8-ex2.html 显示示例]
		+
		+	在上例中，我们仅仅将div和span使用在一些很简单的方面，譬如文本和背景色等。但其实这两个元素都可用于作更加复杂的处理，比如。。。不过这里我们暂并不作介绍。之后我们还将对它们作深入了解。

	==小结==		==小结==

@@ 第14行： / 第14行： @@
 让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子：
-  <p>早睡早起
+  <nowiki> <p>早睡早起
-  使人健康、富裕又聪颖。</p>
+  使人健康、富裕又聪颖。</p></nowiki>
 假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用<span>标签来标记上述每一点好处。然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。
-  <p>早睡早起
+  <nowiki> <p>早睡早起
   使人<span class="benefit">健康</span>、
   <span class="benefit">富裕</span>
-  和<span class="benefit">聪颖</span>。</p>
+  和<span class="benefit">聪颖</span>。</p></nowiki>
 相应的CSS代码如下：

←上一版本		2010年10月16日 (六) 06:52的版本
第10行：		第10行：

	==用span组织元素==		==用span组织元素==
		+	span元素可以说是一种中性元素，因为它不对文档本身添加任何东西。但是与CSS结合使用的话，span可以对文档中的部分文本增添视觉效果。
		+
		+	让我们用一句本杰明·弗兰克林（Benjamin Franklin）的名言来举个例子：
		+
		+	<p>早睡早起
		+	使人健康、富裕又聪颖。</p>
		+
		+	假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处，我们可以用<span>标签来标记上述每一点好处。然后，我们将这几个span设置为相同的class。这样，我们稍后就可以在样式表里针对这个class定义特定的样式。
		+
		+	<p>早睡早起
		+	使人<span class="benefit">健康</span>、
		+	<span class="benefit">富裕</span>
		+	和<span class="benefit">聪颖</span>。</p>
		+
		+	相应的CSS代码如下：
		+
		+	span.benefit {
		+	color:red;
		+	}
		+
		+	[[Image:icon-example.gif]] [http://demo.huihoo.com/css/tutorials/lesson8-ex1.html 显示示例]
		+
		+	当然，你也可以采用id来为span元素添加样式。不过正如我们在上一课所学的，如果采用id的话，你必须为这三个span元素各自分别指定一个唯一的id。

	==用div组织元素==		==用div组织元素==

@@ 第74行： / 第74行： @@
 ==小结==
 {{comment}}
 [[Category:CSS]]

CSS/tutorials/lesson8 - 版本历史

Allen：/* 小结 */

Allen：/* 用div组织元素 */

Allen：/* 用span组织元素 */

Allen：/* 用span组织元素 */

Allen：以内容'{{top news}} ==第8课：组织元素（span和div）== span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。 在这一课中...'创建新页面

Allen：以内容'{{top news}} ==第8课：组织元素（span和div）== span和div元素用于组织和结构化文档，并经常联合class和id属性一起使用。在这一课中...'创建新页面