frameset与frame页面布局

简介: frameset与frame页面布局

浏览器窗口布局,也是web项目必备的知识。

       要想让页面整齐有序,就需要给窗口分区域,就像本子上写字一样,遵循一定的规则,比如:上留天下留底,左右留边距,这样看起来会更美观。web页面布局用到的知识点就是html的<frameset>标签。把浏览器的整个页面按照行列规则分成一块儿一块儿的,把这片儿分好了,才好“种庄稼”。

下面看两个例子:

1. <frameset name="testFrame" rows="50%,*" cols="*" frameborder="no" border="0" framespacing="0">
2. <frame src="${pageContext.request.contextPath}/getLeftTree.action" name="LeftFrame" scrolling="no" id="LeftFrame"  />
3. <frame src="${pageContext.request.contextPath}/getMainForm.action" name="MainFrame" scrolling="NO"  noresize="noresize" id="MainFrame">
4. </frameset>

       导航跳页面用的struts2。


1. <frameset rows="103,*,43" frameborder=0 border="0" framespacing="0">
2. <frame src="${pageContext.request.contextPath}/admin/top.jsp" name="topFrame" scrolling="NO" noresize>
3. <frameset cols="159,*" frameborder="0" border="0" framespacing="0">
4.  <frame src="${pageContext.request.contextPath}/admin/left.jsp" name="leftFrame" noresize scrolling="YES">
5.  <frame src="${pageContext.request.contextPath}/admin/welcome.jsp" name="mainFrame">
6. </frameset>
7. <frame src="${pageContext.request.contextPath}/admin/bottom.jsp" name="bottomFrame" scrolling="NO"  noresize>
8. </frameset>

       导航跳页面直接跳的jsp。


标签解析:

<frameset></frameset>

       frameset 元素可定义一个框架集。它被用来组织多个窗口(框架)。组织好在页面显示。

<frame></frame>

        <frame> 标签定义 frameset 中的一个特定的窗口(框架)。嵌套在<frameset>标签中使用。

<noframes></noframes>

       在<frameset>标签中使用,如果浏览器不支持<frameset>框架,可以用它来提示消息。


属性解析:

       <frameset>的 rows:设置有多少行,rows="103,*,43"表示有三行,第一行高103px,第三行高43px,中间一行占剩余的部分。rows="50%,*"表示有两行,第一行占50%,第二行占剩余的。

       <frameset>的cols:设置有多少列,cols="*"表示有一列,

       在rows和cols中属性值可以设置:* 代表自适应,% 代表百分比,数字 代表多少px,它们代表的意义一样。是frameset必备属性。

       W3School解释了当设置的rows或cols属性值超出浏览器边界时的处理情况:

       与表格一样,浏览器在显示时会尽可能接近给定的框架集尺寸。但是,浏览器不会为了能够容纳下超出边沿的框架集而扩展文档窗口的边界,也不会在指定的框架没有填满整个窗口时用空白区域来填满窗口。相反,浏览器会根据一个框架在行和列中相对于其他框架的大小来分配空间,这样就能够填满整个文档窗口了。


       <frame>的scrolling:控制此窗口中是否显示滚动条,可以设置auto,yes,no。

       <frame>的noresize="noresize":控制边框是否可移动,设置此属性的frame或者frameset,则它周边的边都是不可移动的。


后记:

       越来越发现,很多东西还仅限于浅浅的知道,不能熟练的操作,深入的理解。

       只有把一样东西能给别人说明白了,自己也就理解了。

另:

       frameset和frame中的name属性很有用,目前还有点迷惑不知道怎么用,理解了再补充,希望大家能解惑。


相关文章
|
1月前
Frameset中的noresize属性
Frameset中的noresize属性。
14 2
|
1月前
Frame用于导航
Frame用于导航。
12 2
|
6月前
|
前端开发 JavaScript API
【HTML】SVG实现炫酷的描边动画
今天闲来无事,看到Antfu大佬的个性签名,觉得还是非常炫酷的,于是也想要搞一个自己的个性签名用来装饰自己的门面,不过由于手写的签名太丑了,遂放弃。于是尝试理解原理,深入研究此等密法,终于小有所成,发现原来是描边动画,于是记载如下,方便日后借鉴。
92 3
|
移动开发 前端开发 JavaScript
HTML5 —— 初识 Canvas 画布
HTML5 —— 初识 Canvas 画布
113 0
|
移动开发 前端开发 HTML5
html5 h5使用canvas 画一个圆角矩形
html5 h5使用canvas 画一个圆角矩形
html5 h5使用canvas 画一个圆角矩形
HTML - Frame、FrameSet 使用
HTML - Frame、FrameSet 使用
101 0
HTML - Frame、FrameSet 使用
|
移动开发 前端开发 JavaScript
HTML - Canvas 使用画布实现文本阴影
HTML - Canvas 使用画布实现文本阴影
123 0
HTML - Canvas 使用画布实现文本阴影
|
前端开发 JavaScript
利用 SVG 和 CSS3 实现有趣的边框动画
今天我们来探索一下Carl Philipe Brenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时,会有一个微妙的动画发生——网格元素变得透明,每条边有个顺时针的动画,创造了非常好的效果。这种效果是通过JS给span标签的宽或者高做了动画。我们待会会用SVG和CSS渐变来完成。注意,这个技术还是实验性的。
293 0
利用 SVG 和 CSS3 实现有趣的边框动画
|
Web App开发
html frameset边框问题
用frameset构建了三个框架,将frameborder设置为0了,但是框架的边框始终显示。多番尝试之后终于找到了解决办法。就是添加属性border=“0”。
977 0
|
Web App开发 前端开发
CSS 布局 position 详解
CSS 布局 position 详解 1.position 之 static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
1604 0