HTML&CSS样式框架结构

原创 2007年09月21日 09:55:00
13.1框架的基本结构
 在使用框架集的页面中,页面的<body>标签被<frameset>标签所代替,然后通过<frame>标签定义每一个框架。
文本范例:
 <html>
<head>
<title>基本框架代码</title>
</head>
<frameset>
  <frame>
  <frame>
...
</frameset>
</html>
13.2.1左右分割窗口属性cols
 基本属性:
 <frameset cols="value ,value ,...">
    <frame>
    <frame>
...
</frameset>
语法解释:
value定义各个框架的宽度值,单位可以是象素也可以是百分比。
例子:
<!.............>
<!..文件说明:左右分割窗口..>
<!.............>
<html>
<head>
<title>左右分割窗体</title>
</head>
<frameset cols="20%,80%">
   <frame>
   <frame>
...
</frameset>
</html>
13.2.2上下分割窗体属性rows
基本做法同上。
13.2.3嵌套分割窗体
 在同一个窗体中,将其按照行来分割又按照列来分割。
基本语法:
<frameset rows="value,value,...">
   <frame>
     <frameset cols="value,value,...">
       <frame>
       <frame>
        ...  ...
 </frameset>
 <frame>
 <frame>
 ... ...
</frameset>
eg:
<html>
<head>
<title>嵌套分割窗体</title>
</head>
<frameset rows="20%,80%">
   <frame>
     <frameset cols="20%,80%">
       <frame>
       <frame>
 </frameset></frameset>
</html>
13.3框架标签<frame>属性
每一个框架都有一个显示的页面,这个页面文件称为框架页面,通过<frame>标签可以定义框架页面的内容。
框架标签的属性:
src         :框架页面源文件的路径
name        :框架的名称
frameborder :框架边框显示属性
scrolling   :框架尺度调整属性
marginwidth :框架边缘的宽度属性
marginheight:框架边缘的高度属性
13.3.1 框架页面原文件属性 src
基本语法:
 <frame src="file_name">
文本范例:
<html>
<head>
<title>设定页面的框架内容</title>
<head>
<frameset cols="30% ,70%">
 <frame src=1.htm>
 <frame src=right.htm>
</frameset>
</html>
13.3.2 框架名称属性 name
 可以为每个连接命名,所起的名称将被用于页面的连接和脚本描述。
基本语法:
<frame src="file_name" name="frame_name">
框架名称不会影响显示效果。
13.3.3 框架边框显示属性 frameborder
基本语法:
<frame src="file_name" frameborder="value">
语法解释:
value取值为0或1 ,0为不显示边框,1为显示边框。
文本范例:
<html>
<head>
<title>设定框架边框的显示</title>
</head>
<frameset cols="30%,70%">
   <frame src=left.htm frameborder=0>
   <frame src right.htm frameborder=1>
</frameset>
</html>
13.3.4 框架滚动条显示属性 srcolling
基本语法:
<frame src="file_name" srcolling="value">
value为yes时是显示滚动条,no时为不显示滚动条,auto时为根据页面的长度自动判断是不是显示滚动条。
文本范例:
<html>
<head>
<title>设定框架滚动条显示属性</title>
</head>
<frameset cols="40%,60%">
<frame srcolling="yes">
<frame>
</frameset>
</html>
13.3.5 框架尺度调整属性 noresize
 带有noresize属性的框架的大小是不可以变的
基本语法:
<frame src="file_name" noresize>
13.3.6 框架边缘宽度高度属性 marginwidth,marginheight
基本语法:
<frame src="file_name" marginwith="value" marginheight="value">
value值为单位象素。
文本范例:
<html>
<head>
<title>设定框架边缘的宽高</title>
</head>
<frameset cols="20%,80%">
   <frame src=left.htm marginwith=0 marginheight=0>
   <frame src=right.htm>
</frameset>
<html>
13.4 框架集标签<frameset>的属性
框架集的属性:
frameborder  :框架集边框显示属性
framespacing :框架集边框宽度属性
bordercolor  :框架集边框颜色属性
rows         :框架集分行
cols         :框架集分列
13.4.1 框架集边框宽度属性 framespacing
基本语法:
<frameset framespacing="volue">
volue值为单位象素
文本范例:
<html>
<head>
<title>设定框架集边框宽度</title>
<frameset cols="50%,50%" framespacing=3>
   <frame src=left.htm>
   <frame src=right.htm>
</frameset>
</html>
13.4.2 框架集边框颜色属性 bordercolor
基本语法:
<frameset bordercolor="color_volue">
color_volue为十六精制值。
文本范例:
<html>
<head>
<title>设定框架集边框宽度和颜色</title>
<frameset cols="50%,50%" framespacing=3 bordercolor=##ff66ccss>
   <frame src=left.htm>
   <frame src=right.htm>
</frameset>
</html> 
13.5 不支持框架标签  noframes
作用是当浏览器不能加载框架集文件时,会检索到<noframes>标签,并显示标签里的内容.
基本语法:
<frameset>
 <frame>
 <frame>
 ... ...
<noframe>
</noframe>
</frameset>
语法解释:
放在<noframes>是在不支持框架的浏览器中显示的内容,也就是<body>标签中的内容.
文本范例:
<html>
<head>
<title>不支持框架浏览器的页面</title>
<frameset cols="50% ,50%">
 <frame src=left.htm>
 <frame src=right.htm>
 <noframes>
对不起,您是浏览器不支持框架页面的显示.
</noframes>
</frameset>
</html>
13.6 浮动框加 iframe
浮动框加的src,width,heiht,name  属性同上.
13.6.4 浮动框加对齐属性 align
基本语法:
<iframe src="file_name" align="value">
语法解释:
value的取值中left表示居左,right表示居右,center表示居中.
文本范例:
<html>
<head>
<title>浮动框架的对齐</title>
<head>
<body>
<iframe src=content.htm width=450 height=300 name=frame_content align="center">
</iframe>
</body>
</html>
13.7 框架与连接
 每一个连接都有一个target属性,设置不同的target属性可以使连接的页面显示在不同的框架的中.
13.7.1  普通框架与连接
文件范例:
设定框架集包括左右两个框架
<!...........>
<!..文件说明:框架集..>
<!...........>
<html>
<head>
<title>框架集</title>
<frameset cols="20%,80%">
  <frame src=left.htm srcolling="no">
  <frame src=right.htm name="right">
</frameset>
</html>
制作网站左侧框架的页面
本页面提供了三个连接,插入一张图片。
<!.........>
<!..文件范例:left.htm..>
<!............>
<html>
<head>
<title>左侧框架</title>
</head>
<body>
<img src=logo.jpg><p>
<a href=right-1.htm targht="right">aaa</a><p>
<a href=right-2.htm targht="right">bbb</a><p>
<a href=right-3.htm targht="right">ccc</a><p>
</body>
</html>
13.7.2 浮动框架与连接
<html>
<head>
<title>浮动框架与连接</title>
</head>
<body>
<iframe src=right-1.htm width=500 height=300 name="iframe" align="center">
</iframe><p>
<center>
<a href=right-1.htm targht="iframe">aaa</a><br>
<a href=right-2.htm targht="iframe">bbb</a><br>
<a href=right-3.htm targht="iframe">ccc</a>
</center>
</body>
</html> 

相关文章推荐

css基本框架结构 very good

  • 2015年08月09日 14:57
  • 2KB
  • 下载

HTML基础标签和框架结构

HTML的基础标签:     1.注释

html框架结构

html+css网站开发兵书——html部分10.框架结构注意:代码位置在后 分成三个竖向窗口 ...

html之css样式

  • 2012年07月20日 09:02
  • 10KB
  • 下载

6款漂亮HTML CSS样式用户留言表单

首先我们要在网页中加上常用的几个标签文本,比如姓名,电子邮件,内容以及提交按钮,然后我们针对这些字段文本增加和修改样式就可以。 form action="" method="post" cl...

HTML与CSS样式设计

  • 2012年04月23日 10:27
  • 6.12MB
  • 下载

HTML5基础加强css样式篇(target目标伪类选择器应用)(十)

1.静态界面 Title html body{ margin: 0px; padding: 0px;...

HTML+CSS样式表快速生成器

  • 2009年04月04日 11:24
  • 7KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML&CSS样式框架结构
举报原因:
原因补充:

(最多只允许输入30个字)