DIV+CSS网页布局基础-常用HTML标签介绍.ppt

,文档名称：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 ,form table ul ol dl ,css,服 务,常用html标签介绍目录,html简介,table 标签介绍,ul,ol,dl 标签介绍,iframe 标签介绍,div 标签介绍,table 标签介绍,table 的适用范围 展示表格式的数据 (例.net里的grid控件) 作为表单的容器来放置控件 作为通过html文本编辑器所产生的信息的容器,table 标签介绍,2. table 标签所包含的子标签 thead 定义表格的表头 tbody 定义表格的主体 tfoot 定义表格的页脚 tr 定义表格中的一行 th 定义表格内的表头单元格。此 th 元素内部的文本通常会呈现为粗体 td 定义表格中的一个单元格,,table 标签介绍,3. table 的默认属性,,示范代码： gillion 吉联新软件 ,table 的宽度会根据所有单元格的宽度自动调节 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,该div必须根据需要设置宽度跟高度，同时所包含的表格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 标签介绍,ul,ol,dl 标签介绍,列表标签简介 ul:无序列表；子标签为，即列表的项目。 ol:有序列表；子标签为 ，即列表的项目。 dl:定义列表，子标签有，其为定义的项目，为定义的描述。 适用于所有列表类数据的显示，如新闻列表，菜单等。, 列表项目 列表项目 , 列表项目 列表项目 , 列表项目 项目描述 项目描述 ,ul标签代码使用示范：,ol标签代码使用示范：,dl标签代码使用示范：,ul,ol,dl 标签介绍,,2.ul , ol 在不同浏览器下的区别 ul ,ol的特点基本一样，区别只在于一个是有序的，一个是无序的，但是通过css list-type属性的设置，也可以有序变无序，无序变有序。值得注意的就是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. javascript类型: 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的属性 src：文件的路径，既可是html文件，也可以是文本、asp等； width、height：“内部框架”区域的宽与高。 scrolling:当src的指定的html文件在指定的区域无法完全显示时的滚动选项，值为no，auto，yes。 frameborder：区域边框的宽度，为了让“内部框架“与邻近的内容相融合，常设置为0。 name:框架的名字，用来进行识别。 当想用父框架控制内部框架时，可使用： target=“框架的名字”来控制。,iframe 标签介绍,,2.iframe的默认状态 scrolling:atuo; frameborder：默认下带有3d效果的边框。 iframe在火狐下可设置背景色，但在ie下却始终为白色。,常用html标签介绍目录,html简介,table 标签介绍,ul,ol,dl 标签介绍,iframe 标签介绍,div 标签介绍,div 标签介绍,,1.什么是div div元素是用来为html文档内大块（block-level）的内容提供结构和背景的元素。div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 2. div的使用 div元素是块级元素，用于组合一大块的代码。,div 标签介绍,,3. div在布局上经常使用的css属性 width 设置div的宽度。 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值被自动乘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: