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> 

Head first HTML&CSS ---[学习笔记第一章]

做为学习html入门的第一本书,我准备学完每一章节之后都来做一个简单的小笔记。记录一些学习过的知识点。 现附上资源:https://pan.baidu.com/s/1o7JzoRw    里面也有...
  • fushu0214
  • fushu0214
  • 2016年11月02日 20:46
  • 310

Head first HTML&CSS学习笔记

通过来告诉浏览器关于web页面的信息。总出现在浏览器窗口的顶部。是你看到的东西。css在html文件中嵌套:xxx使用元素创建一个超文本链接,链接到另一个web页面;元素的内容会成为web页面中可单击...
  • ShorewB
  • ShorewB
  • 2016年10月06日 17:56
  • 1510

html&css实验8.(3)CSS.hover实现两级菜单

3、采用hover实现两级菜单:   (1)一级菜单的li采用inline-block和relative,使它们并列排放,并且可以用于二级菜单的绝对定位。   (2)二级菜单的ul默认不显示,只有...
  • qq_33826977
  • qq_33826977
  • 2017年04月17日 10:59
  • 636

7.html&css实验7.学习一个通用的布局设计

这次的实验主要是一个流程来熟悉网页的设计步骤: 1.基本框架 1) 整个框架分为:header、nav、subnav、mainbody、footer五个部分(div)。 2) 除了main,每个...
  • qq_33826977
  • qq_33826977
  • 2017年04月06日 23:36
  • 738

HTML&CSS——css设置背景图定位的问题

你查查background-position并练习一下就知道了,背景图的两个偏移值可以用background-position: x y;表示。x是水平位置偏移,y是垂直位置偏移。 你可以用坐标...
  • oscar92420aaa
  • oscar92420aaa
  • 2016年05月03日 15:43
  • 291

ANDROID框架结构和介绍

下图是ANDROID4.4 版本包含的所有系统服务和本地服务和应用的框架图,baoh
  • GooHong
  • GooHong
  • 2014年07月07日 17:02
  • 3798

web前端面试题(HTML&CSS)上 答案详解

总结了一下遇到的面试上的问题,希望能帮助到大家【歪脖树】 1.你能描述一下你制作一个网页的工作流程吗?   第一步:项目需求评审(明确需求) 第二步:等待ui设计师提供psd(项目需求技术调研) 第三...
  • action_xing
  • action_xing
  • 2016年09月29日 11:30
  • 988

html框架结构

html+css网站开发兵书——html部分10.框架结构注意:代码位置在后 分成三个竖向窗口 ...
  • lb812913059
  • lb812913059
  • 2017年03月29日 19:59
  • 432

HTML基础标签和框架结构

HTML的基础标签:     1.注释
  • lylwanan
  • lylwanan
  • 2014年08月21日 22:52
  • 1088

小程序学习笔记之一(框架结构)

一个简单的小程序包含以下几个部分: 基本文件三个。其中每个小程序都有一个app.js,app.json是配置文件,app.wxss是小程序的css文件。 基本目录两个。index目录下面存放的是界面文...
  • woyaojinqu
  • woyaojinqu
  • 2017年02月04日 10:45
  • 326
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML&CSS样式框架结构
举报原因:
原因补充:

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