标签之美八——网页框架

简介:

标签之美——网页框架的应用

一、框架集<frameset>

框架集用来设置框架的属性,修饰框架的总体效果。

1、框架宽度

cols属性用来设置框架的宽度,示例如下:

?
1
2
3
4
5
6
7
8
< body >
< frameset  cols = "30%,30%,30%,10%" >
< frame  src = "1.html" >
< frame  src = "2.html" >
< frame  src = "3.html" >
< frame  src = "4.html" >
</ frameset >
</ body >

其中属性设置的值可以是百分比,可以是固定值,*符号表示除了已经分配后的剩余空间。上面代码中每个html文件设置不同的背景颜色,效果如下:

174653_4sAi_2340880.png

2、框架高度

使用rows属性可是设置框架的高度。其用法和cols属性类似,示例如下:

?
1
2
3
4
5
6
7
8
< body >
< frameset  rows = "30%,30%,30%,10%" >
< frame  src = "1.html" >
< frame  src = "2.html" >
< frame  src = "3.html" >
< frame  src = "4.html" >
</ frameset >
</ body >

175048_rOIr_2340880.png

注意:宽度和高度这两个属性,不能同时使用,只能二选一。

3、边框宽度

可以通过border属性设置框架边框的宽度,如下:

?
1
2
3
4
5
6
7
8
< body >
< frameset  rows = "30%,30%,30%,10%"  border = "10" >
< frame  src = "1.html" >
< frame  src = "2.html" >
< frame  src = "3.html" >
< frame  src = "4.html" >
</ frameset >
</ body >

175338_BWrg_2340880.png

4、边框颜色

和其他属性类似,通过bordercolor可以设置边框的颜色。

5、设置是否显示边框

通过设置frameborder可以显示和隐藏边框,其值可取0或者1。隐藏效果如下:

?
1
2
3
4
5
6
7
8
< body >
< frameset  rows = "30%,30%,30%,10%"  frameborder = "0" >
< frame  src = "1.html" >
< frame  src = "2.html" >
< frame  src = "3.html" >
< frame  src = "4.html" >
</ frameset >
</ body >

175725_HuWC_2340880.png

二、框架<frame>

框架和框架集是可以嵌套的。可以在一个框架中继续嵌套框架集。

1、设置框架大小不可调节

使用的框架,默认当鼠标点击拉动时是可以调节大小的,可以设置nosize="nosize"来设置不可调节。

2、设置框架的滚动条

scrolling属性可以设置框架是否显示滚动条,可以设置yes或者no。


目录
相关文章
|
5月前
|
移动开发 搜索推荐 HTML5
如何使用HTML5的语义化标签来提高网站的可访问性?
【4月更文挑战第1天】如何使用HTML5的语义化标签来提高网站的可访问性?
71 1
|
24天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
33 13
|
2月前
|
移动开发 数据安全/隐私保护 UED
HTML表单标签详解:如何用HTML标签打造互动网页?
通过合理使用HTML表单标签,可以构建功能丰富、用户友好的互动网页。HTML表单的元素和属性提供了丰富的输入选项和验证功能,使得收集和处理用户输入成为可能。随着HTML5的发展,表单元素的功能性和用户体验将继续得到提升。开发者应充分利用这些工具,为用户打造流畅、互动性强的网页体验。
38 4
|
4月前
|
数据采集 JavaScript 前端开发
HTML表单深度解析:构建互动的网页界面
HTML表单深度解析:构建互动的网页界面
|
5月前
|
存储 移动开发 前端开发
HTML5列表标签、多媒体和语义化标签
列表标签、多媒体和语义化标签
69 0
fastadmin框架获取富文本内容(不过滤HTML标签)
fastadmin框架获取富文本内容(不过滤HTML标签)
256 0
|
前端开发
|
XML JavaScript 前端开发
|
前端开发 搜索推荐 索引
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
116 0
重学前端 5 # 如何运用语义类标签来呈现Wiki网页?
|
前端开发
【网页前端】HTML块标签以及框架标签
【网页前端】HTML块标签以及框架标签
117 0
【网页前端】HTML块标签以及框架标签