标签通过代码实例跟我学CSS样式单技术的应用实例（第4部分）——（X）HTML页面中的div和span标签的应用及实例

span标签时间:2021-04-27 阅读:()

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

1.1 XHTML页面中的div和span标签的应用及实例. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

1.1.1 熟悉和了解div标签和sp a n标签的主要功能和差别. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .2

1.1.2 重新设置<li>标签的样式风格的示例. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7

1.1.3 应用区块的XHTML页面示例. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9

1.1.4 在Macromedia Dreamweaver工具中如何编辑修改和设计CSS样式. . . . . . . . . . . .11

1.1.5 理解Web表现和结构内容相分离的意义. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

1. 1 X HTML页面中的d iv和span标签的应用及实例

1. 1. 1熟悉和了解div标签和span标签的主要功能和差别

1、实现页面布局的标签——div标签和span标签div标签和sp a n标签都是实现页面布局的标签而且在默认时都没有对元素内的对象进行任何格式化渲染而完全由CSS样式表定义它们的显示风格。因此经常应用它们实现页面布局。

2、HTM L中的“块元素”和“内联元素”

所有的HTML标签元素要么是block 块元素 block element 、要么是inline 内联元素 inline element 。内联标签元素一般都是基于语义级semantic的基本标签元素在内联标签元素内只能容纳文本或者其它的内联标签元素常见的内联标签元素有 <a>、<span>、 <labe l>、 <inp ut>、 <img>、 <s tro ng>和<e m>等常见的块标签元素有 <p>、 <form>、<tab le>、 <d iv>、 <h 1>、 <h2>、 <h3>、 <ul>和<li>等在块标签元素内只能容纳其它的块标签元素或者内联元素——但在<p>标签元素内只能包含内联的标签元素而不能包含的块级标签元素。

3、 div和span标签之间的区别

它们两者的区别其实也就是HTML标签中的“块元素”和“内联元素”的区别因为<d iv>标签是块级别的元素默认显示时将独占一行。 <d iv>标签所在区域的宽度、高度、文字的行高以及顶和底外边距等属性项目都是可以控制的——可以响应垂直margin、 width、 he ight、

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

maxWidth/minWidth、maxHe ight/minH e ight等属性声明宽度缺省是它的容器的100%除非设定一个宽度。它的实际宽高是本身的宽高值+padding项目的定义。

而<span>标签则是内联元素不独占一行显示 内联对象也就是不自动产生换行的标签元素。它的宽、高、文字的行高及顶和底外边距等都是不可改变的——不可以响应垂直marg in、width、 he ight、maxWidth/minWidth、ma xHe ight/minHe ight等属性声明默认的宽度就是它内部的文字或图片的宽度而致使它变宽、变高的原因是内部元素的宽高+padding项目的定义。

4、应用CSS可以实现块元素和行内元素之间的相互转换

当然块元素和行内元素也不是一成不变的通过定义CSS的display属性值可以实现两者之间的互相转化如下面代码示例

因此如果将<div>标签的disp lay设置为inline则多个<div>标签可以象<sp an>标签一样显示在一行中。

5、体验<span>和<div>之间差别的的应用示例

<span>这是Logo</span><span>这是Logo后面的信息</span>

</d iv>

<div>这是Logo</div><div>这是Logo后面的信息</div>

</d iv>

6、在Macro media Dreamweaver工具中如何插入<div>标签

在“文档”窗口中将插入点放置在要显示d iv标签的位置。并执行下列操作选择“插入”>“布局对象”>“D iv标签” 。

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

出现“插入D iv标签”对话框并在对话框中输入ID的名称为so meO neD iv。

完成对话框中的输入项目的设置最终单击“确定”按钮将自动地产生出下面的内容

<d iv>标签以一个框的形式出现文档中并带有占位符文本。将指针移到该框上时Dre a mwe a ve r会高亮显示该框。

7、内联块元素显示风格

1 CSS中的“display:inline-block”显示特性

应用“display:inline-block”可以实现将某个标签对象呈现为内联对象但是在该标签对象内的内容标签子标签元素将作为块级标签对象的风格显示。该标签元素旁边的其它内联标签对象仍然会被呈现在同一行内。

2在什么应用场景下要应用“inline-block”

1) 修正IE6等浏览器中浮动元素的双边距问题

2) 希望能够水平放置多个不同的块级标签对象元素而不需要应用“float”的定义

3) 使一个inline元素具有高、宽、边距等方面的定义而使得它依然能够保持为内联对

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

如果需要<d iv>有宽高的定义但又不希望它独占一行的风格显示怎么办此时就需要使用CSS中的“inline-block”属性值。因为“inline-block”是既具有块级标签对象的宽高可定义的特性又具有内联标签对象的在同一行中显示的特性。

8、页面中的区块Block设计及划分的方法

1常见的版面区块的划分的方法

利用区块规划版面——也就是将某个区域划分为不同的“矩形方框” 无边框线 

 另一种是有标题标题下方是矩形方框——产生出“分层La ye r ”的显示效果。

2现在流行的是标题栏有多个选项卡标题下方是矩形方框当选择不同标题时矩形方框中的内容随之改变。

9、实现区块的划分的方法

1传统的实现方法是应用表格标签——但达不到“内容”和“表现”相互分离的效果

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

</tab le>

</td></tr>

</tab le>

2 目前一般则应用“c s s+d iv”——其目的是希望达到“内容”和“表现”分离

</div>

10、正确地应用HTM L<li>标签和C S S中的样式控制

1 <li>标签是用于定义列表项目

<li>标签可用在有序列表(<o l>)和无序列表(<ul>)中并且<li>标签不能单独使用需要与<o l>或<ul>配合使用如下的使用范例

<ol>

<li>li标签范例之一</li>

<li>li标签范例之二</li>

</ol>

或者如下的示例

<ul>

<li>li标签范例之一</li>

<li>li标签范例之二</li>

</ul>

注意有序<o l>标签的默认样式是以阿拉伯数字1、 2、 3为递增列表而无序的<ul>标签的默认CSS样式是以一个圆黑点的列表形式。

2在C S S中重新设置<li>标签的样式风格

无论是有序还是无序的<li>标签列表在d iv+c s s开发时都需要对<li>标签重新设置它的

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

css样式风格。一般设置<li>标签的list-style-type属性样式该属性的可能取值如下

1) disc :CSS 1默认值实心圆

2) c irc le:C S S 1空心圆

3) square:CSS 1实心方块

4) decimal :CSS 1阿拉伯数字

5) lo wer-ro man:C S S 1小写罗马数字

6) upper-roman:CSS 1大[写罗马数字

7) lower-alpha:CSS 1小写英文字母

8) upper-alpha:CSS1大写英文字母

9) none:CSS1不使用项目符号

3熟悉CSS中列表项目的样式定义——分别定义各个项目

#d iv{list-style-image:url(images/bullet.gif); (url or none) (de fault=none)list-style-position: inside; (inside or outside) (default=outside)lis t-style-type: square; (c irc le, disc, square, etc) (de fault =disc)

}

4熟悉CSS中列表项目的样式定义——统一定义各个项目

#d iv{list-style:square inside url(images/bullet.gif);

}

1. 1.2重新设置<li>标签的样式风格的示例

1、取消<li>标签的列表符的C S S示例ul li{list-style-type:none;

}

2、将列表符换成图像的CSS示例

杨教授工作室精心创作的优秀程序员职业提升必读系列资料

ul li{list-style-type:none;list-style-image:url(images/so meOne Ico n.gif);

}

3、左对齐各个列表项目的CSS示例ul li {list-style-type:none;mar gin:0p x;