DIVCSS网页布局基础常用HTML标签介绍.ppt
- 文档编号:1389668
- 上传时间:2022-10-21
- 格式:PPT
- 页数:22
- 大小:467KB
DIVCSS网页布局基础常用HTML标签介绍.ppt
《DIVCSS网页布局基础常用HTML标签介绍.ppt》由会员分享,可在线阅读,更多相关《DIVCSS网页布局基础常用HTML标签介绍.ppt(22页珍藏版)》请在冰豆网上搜索。
收集,文档名称:
PPT演示模板Copyright(c)GillionPage1of5Author:
HellenVersion:
3.0Date:
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标签介绍,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在代码书写的时候顺序可打乱,在页面显示时会自动按theadtbodyftoot的顺序显示th的属性th标签自带有字体加粗,居中显示效果。
thwhite-space:
nowrap;(强制不换行)列宽的设置每个列的宽度只需在表头的th标签设置,无需在每个td都做宽度设置。
table标签介绍,收集,带滚动条的grid带有滚动条的grid只需在外围套一个div,该div必须根据需要设置宽度跟高度,同时所包含的表格table标签必须设置宽度(否则table会默认为宽度自适应,造成table宽度受挤压)网格线的处理1.此种方法等价于tableborder:
1px;tdborder:
1px,即同时设置了table和td的边框2.边框1像素的处理方法tableborder:
1pxsolid#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的特点基本一样,区别只在于一个是有序的,一个是无序的,但是通过CSSlist-type属性的设置,也可以有序变无序,无序变有序。
值得注意的就是ul,ol标签在不同浏览器下,默认的属性是有区别的。
默认在IE下附带的CSS样式:
margin-left:
40px;默认在FF下附带的CSS样式:
padding-left:
40px;,鉴于ul,ol标签在不同浏览器下默认的不同样式,为了统一页面在不同浏览器下的视觉效果,一般会在CSS中对ul,ol标签做统一的全局定义。
ul,olmargin:
0;padding:
0;,ul,ol,dl标签介绍,收集,3.dl定义列表的默认属性dd标签附带的默认属性:
margin-left:
40px;4.列表标签的实际应用鼠标事件(onmouseover,onmouseout)的样式变化A.JavaScript类型:
B.CSS类型:
列表项目列表项目,.ul_aliadisplay:
block;.ul_alia:
hoverBackground-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.什么是divdiv元素是用来为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:
10px20px;margin:
10px20px30px;margin:
10px20px30px40px;,padding-left:
10px;padding:
10px;padding:
10px20px;padding:
10px20px30px;padding:
10px20px30px40px;,div标签介绍,收集,5.利用float设置简单布局内嵌的div宽度之和不可高于父级div宽度,否则会导致部分div换行导致布局错乱;,XHTML+CSS网页布局基础,收集,Question&Answer,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- DIVCSS 网页 布局 基础 常用 HTML 标签 介绍
![提示](https://static.bdocx.com/images/bang_tan.gif)