DIVCSS网页布局基础常用HTML标签介绍.ppt

1、收集,文档名称：PPT演示模板 Copyright(c)Gillion Page 1 of 5 Author：Hellen Version:3.0 Date:05.06.2006,XHTML+CSS网页布局基础-常用HTML标签介绍,常用HTML标签介绍目录,收集,HTML简介,table 标签介绍,ul,ol,dl 标签介绍,iframe 标签介绍,div 标签介绍,HTML介绍,收集,HTML,div,p,a,span,h1,h2,h3,h4,formtableuloldl,CSS,服 务,常用HTML标签介绍目录,收集,HTML简介,table 标签介绍,ul,ol,dl 标签介绍,if

2、rame 标签介绍,div 标签介绍,table 标签介绍,table 的适用范围展示表格式的数据(例.net里的grid控件)作为表单的容器来放置控件作为通过html文本编辑器所产生的信息的容器,收集,table 标签介绍,2.Table 标签所包含的子标签thead 定义表格的表头tbody 定义表格的主体tfoot 定义表格的页脚tr 定义表格中的一行th 定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体td 定义表格中的一个单元格,收集,table 标签介绍,3.table 的默认属性,收集,示范代码：Gillion 吉联新软件,table 的宽度会根据所有单元格的宽度

3、自动调节td会根据自己所包含的内容自动分配宽度默认带有2PX的单元格间距,示范代码生成的表格效果图,table 标签介绍,4.grid 布局,收集,要点：thead,tbody,tfoot的特点thead,tbody,ftoot在代码书写的时候顺序可打乱，在页面显示时会自动按theadtbody ftoot的顺序显示 th的属性th标签自带有字体加粗，居中显示效果。th white-space:nowrap;（强制不换行）列宽的设置每个列的宽度只需在表头的th标签设置，无需在每个td都做宽度设置。,table 标签介绍,收集,带滚动条的grid带有滚动条的grid只需在外围套一个div,该di

4、v必须根据需要设置宽度跟高度，同时所包含的表格table标签必须设置宽度（否则table会默认为宽度自适应，造成table宽度受挤压）网格线的处理1.此种方法等价于table border:1px;tdborder:1px,即同时设置了table和td的边框2.边框1像素的处理方法table border:1px solid#666666;border-collapse:collapse;设置表格的行和单元格的边合并在一起；此方法会同时去除table默认的单元格间距,常用HTML标签介绍目录,收集,HTML简介,table 标签介绍,ul,ol,dl 标签介绍,iframe 标签介绍,div

5、标签介绍,ul,ol,dl 标签介绍,收集,列表标签简介ul:无序列表；子标签为，即列表的项目。ol:有序列表；子标签为，即列表的项目。dl:定义列表，子标签有，其为定义的项目，为定义的描述。适用于所有列表类数据的显示，如新闻列表，菜单等。,列表项目 列表项目,列表项目 列表项目,列表项目 项目描述 项目描述,ul标签代码使用示范：,ol标签代码使用示范：,dl标签代码使用示范：,ul,ol,dl 标签介绍,收集,2.ul,ol 在不同浏览器下的区别ul,ol的特点基本一样，区别只在于一个是有序的，一个是无序的，但是通过CSS list-type属性的设置，也可以有序变无序，无序变有序。值得注

6、意的就是ul，ol标签在不同浏览器下，默认的属性是有区别的。默认在IE下附带的CSS样式：margin-left:40px;默认在FF下附带的CSS样式：padding-left:40px;,鉴于ul,ol标签在不同浏览器下默认的不同样式，为了统一页面在不同浏览器下的视觉效果，一般会在CSS中对ul,ol标签做统一的全局定义。,ul,ol margin:0;padding:0;,ul,ol,dl 标签介绍,收集,3.dl定义列表的默认属性dd标签附带的默认属性：margin-left:40px;4.列表标签的实际应用鼠标事件（onmouseover,onmouseout）的样式变化A.Java

7、Script类型:B.CSS类型:,列表项目 列表项目,.ul_a li a display:block;.ul_a li a:hover Background-color:#cccccc;,onmouseover=“this.className=list_over”onmouseout=“this.className=list_out”,.list_out.list_over,常用HTML标签介绍目录,收集,HTML简介,table 标签介绍,ul,ol,dl 标签介绍,iframe 标签介绍,div 标签介绍,iframe 标签介绍,收集,iframe标记的使用格式是:1.iframe的属

8、性src：文件的路径，既可是HTML文件，也可以是文本、ASP等；width、height：“内部框架”区域的宽与高。scrolling:当SRC的指定的HTML文件在指定的区域无法完全显示时的滚动选项，值为NO，Auto，Yes。FrameBorder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。name:框架的名字，用来进行识别。当想用父框架控制内部框架时，可使用：target=“框架的名字”来控制。,iframe 标签介绍,收集,2.iframe的默认状态scrolling:atuo;FrameBorder：默认下带有3D效果的边框。iframe在火狐下可设置背景色

9、，但在IE下却始终为白色。,常用HTML标签介绍目录,收集,HTML简介,table 标签介绍,ul,ol,dl 标签介绍,iframe 标签介绍,div 标签介绍,div 标签介绍,收集,1.什么是divdiv元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。2.div的使用div元素是块级元素，用于组合一大块的代码。,div 标签介绍,收集,3.div在布局上经常使用的CSS属性width设置div的宽度。

10、height设置div的高度。float设置div的浮动，值有none,left,right。margin设置div的外补丁。（可分解为margin-left,margin-right,margin-top,margin-bottom）padding设置div的内补丁。（可分解为padding-left,padding-right,padding-top,padding-bottom）,div 标签介绍,收集,4.margin与padding的特点CSS语句的写法：当一个 div设置了float:left，又同时设置了margin-left值，则会在IE6下产生margin-left值被自动乘

11、2的 BUG，解决办法是多加display:inline。,margin-left:10px;margin:10px;margin:10px 20px;margin:10px 20px 30px;margin:10px 20px 30px 40px;,padding-left:10px;padding:10px;padding:10px 20px;padding:10px 20px 30px;padding:10px 20px 30px 40px;,div 标签介绍,收集,5.利用float设置简单布局 内嵌的div宽度之和不可高于父级div宽度，否则会导致部分div换行导致布局错乱；,XHTML+CSS网页布局基础,收集,Question&Answer,