《通过代码实例跟我学CSS样式单技术的应用实例第4部分XHTML页面中的div和span标签的应用及实例》由会员分享，可在线阅读，更多相关《通过代码实例跟我学CSS样式单技术的应用实例第4部分XHTML页面中的div和span标签的应用及实例（20页珍藏版）》请在金锄头文库上搜索。
1、目 录1.1（X）HTML页面中的div和span标签的应用及实例21.1.1熟悉和了解div 标签和 span 标签的主要功能和差别21.1.2重新设置 标签的样式风格的示例71.1.3应用区块的XHTML页面示例91.1.4在Macromedia Dreamweaver 工具中如何编辑修改和设计CSS样式111.1.5理解Web表现和结构（内容）相分离的意义131.1 （X）HTML页面中的div和span标签的应用及实例1.1.1 熟悉和了解div 标签和 span 标签的主要功能和差别1、实现页面布局的标签div 标签和 span 标签div 标签和 span 标签都是实现页面布局的标
2、签，而且在默认时都没有对元素内的对象进行任何格式化渲染，而完全由CSS样式表定义它们的显示风格。因此，经常应用它们实现页面布局。2、HTML中的“块元素”和“内联元素”所有的HTML标签元素，要么是block（块元素，block element）、要么是inline（内联元素，inline element）。内联标签元素一般都是基于语义级（semantic）的基本标签元素，在内联标签元素内只能容纳文本或者其它的内联标签元素，常见的内联标签元素有：、和等；常见的块标签元素有：、 和 等，在块标签元素内只能容纳其它的块标签元素或者内联元素但在标签元素内，只能包含内联的标签元素，而不能包含的块级标签
3、元素。3、div 和 span 标签之间的区别它们两者的区别其实也就是HTML标签中的“块元素”和“内联元素”的区别，因为标签是块级别的元素，默认显示时将独占一行。标签所在区域的宽度、高度、文字的行高以及顶和底外边距等属性项目都是可以控制的可以响应垂直margin、width、height、maxWidth/minWidth、maxHeight/minHeight等属性声明；宽度缺省是它的容器的100%，除非设定一个宽度。它的实际宽高是本身的宽高值 + padding项目的定义。而标签则是内联元素，不独占一行显示，内联对象也就是不自动产生换行的标签元素。它的宽、高、文字的行高及顶和底外边距等都
4、是不可改变的不可以响应垂直margin、width、height、maxWidth/minWidth、maxHeight/minHeight等属性声明；默认的宽度就是它内部的文字或图片的宽度，而致使它变宽、变高的原因是内部元素的宽高 + padding项目的定义。4、应用CSS可以实现块元素和行内元素之间的相互转换当然，块元素和行内元素也不是一成不变的，通过定义CSS的display属性值可以实现两者之间的互相转化，如下面代码示例： 因此，如果将标签的display设置为inline，则多个标签可以象标签一样显示在一行中。5、体验和之间差别的的应用示例 这是Logo 这是Logo后面的信息 这
5、是Logo 这是Logo后面的信息 6、在Macromedia Dreamweaver 工具中如何插入标签在“文档”窗口中，将插入点放置在要显示 div 标签的位置。并执行下列操作：选择“插入”“布局对象”“Div 标签”。 出现“插入 Div 标签”对话框，并在对话框中输入ID的名称为someOneDiv。完成对话框中的输入项目的设置，最终单击“确定”按钮，将自动地产生出下面的内容：标签以一个框的形式出现文档中，并带有占位符文本。将指针移到该框上时，Dreamweaver 会高亮显示该框。7、内联块元素显示风格（1）CSS中的“display:inline-block”显示特性应用“disp
6、lay:inline-block”可以实现将某个标签对象呈现为内联对象，但是在该标签对象内的内容标签（子标签元素）将作为块级标签对象的风格显示。该标签元素旁边的其它内联标签对象仍然会被呈现在同一行内。（2）在什么应用场景下要应用“inline-block”1) 修正IE6等浏览器中浮动元素的双边距问题；2) 希望能够水平放置多个不同的块级标签对象元素而不需要应用“float”的定义；3) 使一个inline元素具有高、宽、边距等方面的定义，而使得它依然能够保持为内联对象；如果需要有宽高的定义，但又不希望它独占一行的风格显示，怎么办？此时就需要使用CSS中的“inline-block”属性值。因
7、为“inline-block”是既具有块级标签对象的宽高可定义的特性，又具有内联标签对象的在同一行中显示的特性。8、页面中的区块（Block）设计及划分的方法（1）常见的版面区块的划分的方法利用区块规划版面也就是将某个区域划分为不同的“矩形方框”（无边框线），l 另一种是有标题，标题下方是矩形方框产生出“分层（Layer）”的显示效果。（2）现在流行的是标题栏有多个选项卡，标题下方是矩形方框，当选择不同标题时，矩形方框中的内容随之改变。9、实现区块的划分的方法（1）传统的实现方法是应用表格标签但达不到“内容”和“表现”相互分离的效果登陆系统修改信息修改密码在线注销找回密码（2）目前一般则应用“
8、css + div”其目的是希望达到“内容”和“表现”分离登陆系统修改密码在线注销10、正确地应用HTML 标签和CSS中的样式控制（1） 标签是用于定义列表项目 标签可用在有序列表 () 和无序列表 () 中，并且 标签不能单独使用，需要与或配合使用，如下的使用范例： li标签范例之一 li标签范例之二 或者如下的示例 li标签范例之一 li标签范例之二注意有序标签的默认样式是以阿拉伯数字1、2、3为递增列表，而无序的标签的默认CSS样式是以一个圆黑点的列表形式。（2）在CSS中重新设置 标签的样式风格无论是有序还是无序的标签列表，在div+css开发时都需要对标签重新设置它的css样式风格
9、。一般设置标签的list-style-type属性样式，该属性的可能取值如下：1) disc : CSS1 默认值，实心圆2) circle:CSS1空心圆3) square:CSS1实心方块4) decimal : CSS1阿拉伯数字5) lower-roman:CSS1小写罗马数字6) upper-roman:CSS1大写罗马数字7) lower-alpha:CSS1小写英文字母8) upper-alpha:CSS1大写英文字母9) none:CSS1不使用项目符号（3）熟悉CSS中列表项目的样式定义分别定义各个项目#div list-style-image: url(images/bul
10、let.gif);(url or none) (default = none)list-style-position: inside;(inside or outside) (default = outside)list-style-type: square;(circle, disc, square, etc) (default = disc)（4）熟悉CSS中列表项目的样式定义统一定义各个项目#div list-style:square inside url(images/bullet.gif);1.1.2 重新设置 标签的样式风格的示例1、取消 标签的列表符的CSS示例ul li lis
11、t-style-type:none; 2、将列表符换成图像的CSS示例ul li list-style-type:none; list-style-image: url(images/someOneIcon.gif);3、左对齐各个列表项目的CSS示例ul li list-style-type:none;margin:0px; 4、为列表项目添加背景色的CSS示例ul li list-style-type: none;margin:0px;background:#CCC; 5、为列表加MouseOver背景变色效果的CSS示例：ul li list-style-type: none;margi
12、n:0px; ul li a display:block; width: 100%; background:#ccc; ul li a:hover background:#999; 注意其中的“display:block;”这一属性行定义是必须要加的，这样才能使得标签成为块状显示（有高度和宽度）。6、将各个列表项目水平排列的CSS示例（关键是要应用float:left属性项目）ul width:100%; ul li list-style-type:none; width:80px;float:left;由于标签为块状标签，标签默认是独占一行的显示风格，为此可以应用float:left属性项目产生“向左看齐”的行内显示的效果。1.1.3 应用区块的XHTML页面示例1、示例HTML页面无标题文档link href=./c
