DIV+CSS布局中的几个重难点属性.docxVIP

DIV+CSS布局中的几个重难点属性 1、组织元素(SPan禾口 div ) SPan和div元素用于组织和结构化文档，并经常联合 class和id属性一起使用。 在这一课中，我们将进一步探究 SPan和div的用法，因为这两个HTML元素对于CSS是很重要的。 用SPan组织元素 SPan元素可以说是一种中性元素， 因为它不对文档本身添加任何东西。 但是与CSS结合使用的话， SPan可以对文档中的部分文本增添视觉效果。 让我们用一句本杰明?弗兰克林(Benjamin Franklin )的名言来举个例子： 以下是代码片段： p早睡早起使人健康、富裕又聪颖。 ∕p 假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处， 我们可以 用span标签来标记上述每一点好处。然后，我们将这几个 SPan设置为相同的class。这样，我们 稍后就可以在样式表里针对这个 class定义特定的样式。 以下是代码片段： p早睡早起使人 span CIaSS=benefit 健康 /span、VSPan CIaSS=benefit 富裕 /span 禾口 span CIaSS=benefit 聪颖 ∕span 。 ∕p 相应的CSS代码如下： 以下是代码片段： SPa n.ben efit { coloured; } 当然，你也可以采用id来为SPan元素添加样式。如果采用 id的话，你必须为这三个 SPan元素 各自分别指定一个唯一的 id。 用div组织元素 如前面例子所示，SPan的使用局限在一个块元素内，而 div可以被用来组织一个或多个块元素。 除去这点区别，div和SPan在组织元素方面相差无几。让我们来看一个例子。我们将历届美国总 统按其所属的政营分别组织为两个列表: 以下是代码片段： div id=democrats ul li富兰克林? D?罗斯福∕li li哈利? S ?杜鲁门∕li li约翰? F ?肯尼迪∕li li林登? B ?约翰逊∕li li吉米?卡特∕li li比尔?克林顿 ∕li ∕ul ∕div div id=republica ns ul li德怀特? D ?艾森豪威尔 ∕li li理查德?尼克松 ∕li li杰拉尔德?福特 ∕li li罗纳德?里根∕li li乔治?布什∕li li乔治? W?布什∕li ∕ul ∕div 在这里，我们可以采用跟上例同样的方法来处理样式表: 以下是代码片段： ★democrats { backgro Un d:blue; } #republica ns { backgro Un d:red; 2、盒状模型 CSS中的盒状模型（box model ）用于描述一个为 HTML元素形成的矩形盒子。盒状模型还涉及 为各个元素调整外边距（ margin ）、边框（border ）、内边距（Padding ）和内容的具体操作。 CSS中的盒状模型 ! margin I I I || border I I I I I I I Padeling I I I I I I I I I I I I COntenU I I I I I I I I I I I I I I I I I I I I I I □oπon hoed de Ia IILaEge bord de La bordure hord （Ie 1亡SPaCeiaerLt hord du CCIntenU 在例子中，有一个标题和一些文本。该例的 HTML代码如下（摘自世界人权宣言） 以下是代码片段： h1Article 1:/h1 pAII huma n beings are born free and equal in dig nity and rights. They are en dowed With reas On and Con SCie nce and should act towards Oneano ther in a SPirit of brotherhood/p 通过添加一些颜色及字体信息，该例可以有以下显示效果: ArtiCIe 1 All human be∣∩gs are born free and equal in dignity and rights. They are endowed With reason 日nd COnSCienCe and ShOUld act towards One another in a SPirit Of brotherhood. 这个例子包含了两个元素： hi和P。这两个元素的盒状模型如下图所示: IoPX i30px!∣Article Ii I Spx 厂 厂 All human beings are born free and equ