文档介绍：HTML/CSS基础
网页布局
回顾
表单提交数据的方式有哪几种？区别是什么？
表单常用的页面控件有哪些？
样式表的三种应用方式有哪些？

*
Date
本章目标
能使用框架对页面进行整体布示位置
target目标窗口属性
四个特殊的窗口
<a href=url target=“_blank”> 显示在新窗口<a href=url target=“_self”> 显示在本窗口<a href=url target=“_parent”> 显示在父窗口<a href=url target=“_top”>显示在整个浏览器窗口

*
Date
框架布局
框架布局的优缺点和应用场合

*
优点
缺点
应用场合
支持滚动条，方便导航，节省页面下载时间等
兼容性不好，保存时不方便，应用范围有限等
小型商业网站、论坛、后台管理、学****教程等
Date
内嵌框架
iframe元素是文档中的文档，或者好像浮动的框架(frame)。
<iframe src=“” width=“200” height=“400” name=“if”>
</iframe>

*
Date
iframe示例

*
<body>
<table>
<tr>
<td valign="top">
<a href="#" target="if">行知新闻</a><br />
<a href="#" target="if">就业广场</a><br />
<a href="#" target="if">资源下载</a><br />
<a href="#" target="if">师资介绍</a><br />
</td>
<td>
<iframe src="" width="300"
height="400“name=“if”>
</iframe>
</td>
</tr>
</table>
</body>
Date
表格布局
表格的基本用途并不是用来管理布局，但在较为简单的页面中也可以用来分配内容区域
表格布局的优缺点和应用场合

*
优点
缺点
应用场合
方便排列有规律、结构均匀的内容或数据
产生垃圾代码、影响页面下载时间、灵活性不大难于修改
内容或数据整齐的页面
Date
页面布局之DIV布局

*
应用了DIV布局的淘宝网主页
Date
什么是DIV
DIV元素是用来为HTML文档内区域的内容提供结构和背景的元素。
DIV常与CSS相结合使用
<div>与<span>标签的区别
<div>块级区域，每个标签代表其将自动换行
<span>行内区域，标签结束后将不会换行

*
Date
什么是DIV

*
*
<style type="text/css">
#Layer1 {
position:absolute;
left:9px;
top:12px;
width:418px;
height:58px;
z-index:1;
background-color: #FF0000; }
……
</style>
……
<div id="Layer1"></div>
……
ID样式选择符，方便层引用
绝对定位
层距离浏览器左边界和上边界的距离
层的宽度和高度
层叠顺序编号
层背景色
层引用样式
Id为Layer1的层所对应的效果
Date
相对定位与绝对定位

*
#relative /*相对于原本位置进行偏移*/{
position : relative ;
left :-10px;
top : 20px ;
}
#absolate /*根据与浏览器上间距，左间距定位*/{
position : absolute ;
left :100px;
top : 20px ;
}
Date
DIV布局-HTML
*
*
<div id="contain>
<div id="header">
</div>
<div id="middle">
<div id="sidebar">
</div>
<div id="content">
</div>
</div>