普通框架

框架的概念

框架技术：将一个浏览器窗口划分成若干个小窗口，每个小窗口显示一个独立的网页。

框架集和框架页

框架集<frameset> :主要用来划分窗口的。
框架页<frame> ：主要用来指定窗口默认显示的网页地址。

框架与窗户很像，一个窗户由窗格（框架）和玻璃（框架页）构成。
先规划窗格，然后再确定每个窗格中放的玻璃，（先有结构，后有内容）
框架网页的DTD必须是以下这种类型的（即：框架型的DTD）：
<!DOCTYPEhtml PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

<frameset>属性

1，cols :划分左右型框架
如：cols=“20%” //划分框架时，可以用百分比来表示；
cols=“200” //左框架的宽度为200px。剩下的都是右框架的；
cols=“180,.180" //左框架和右框架的宽都为180px，剩下的都是中间框架的
2，rows :划分上下型框架
如：rows=“20%” //划分框架时，可以用百分比来表示；
rows=“200” //上框架的高度为200px。剩下的都是下框架的；
rows="180,.180” //上框架和最低下框架的高度都为180px，剩下的都是中间框架的。
注意：cols和rows不可同时并列使用，即：不能对于一个网页即左右又上下设置框架，但外部框架网页与其内部的窗口中的网页的框架互不干忧；
3，frameborder :是否显示框架的边框线，取值：yes或no,1或0

<frame>框架页的属性

src :文件名，源路径，网页地址
noresize :不能调整小窗口的大小，如：noresize=“noresize”
scrolling :是否显示滚动条，取值：auto(自动：内容超过窗口则显示，否则不显示) yes，no;
name :给当前小窗口起个名字，这个name就是给<a>标记target属性（在何处打开）来用的。

<noframes>
描述：当你的浏览器不支持时，显示的提示信息，一般情况下，浏览器版本过低时不支持框架；
语法格式：<noframes>对不起，你的电脑太老了，换了吧，</noframes>

框架嵌套

框架中支持小窗口使用框架；
例：

网页框架的使用

注意：<frameset>框架，可以称为“普通框架”；
在“普通框架”中，框架制作分为两个部分：（1）框架的结构规划；（2）制作具体的页面；
在“普通框架”的结构划分中，不能出现<body>标记，因为划分框架时不要放具体内容
例：一个公司的后台管理网站的制作：css框架代码如下

<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html><head><title>css框架</title></head><frameset rows="100,*" frameborder="no"><frame src="top.html" noresize="noresize" scrolling="no" /><!-- 框架嵌套框架 --><frameset cols="150,*" frameborder="no"><frame src="left.html" noresize="noresize" /><frame src="main.html" name="mainframe" /></frameset></frame></frameset><noframes> 对不起，你的浏览器不支持frameset元素！</noframes></html>

顶部窗口的文件（top.html）：

<html><head><title>框架中的top窗口</title>
</head><body bgcolor="007FFF" background="images\th3.jpg" height="100"></body></html>

左边窗口的文件（left.html）:

<html><head><title>css框架的left窗口</title><style type="text/css">/* css层叠样式表的部分 */body {padding: 0px;/*边线以内的补白为0*/margin: 0px;/*边线以外的补白为0*/}</style>
</head><body bgcolor="#CDCDCD"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr align="center"><td><font color="#007FFF" size="4"><a href="cssFrame.html" target="_top">返回首页</a></font></td><!-- 单元格标记，文本标记，文本颜色，文本大小，超链接标记，指定超链接目标的URL，文件在何处打开，表示最顶层窗口，超链接结束标记，文本结束标记，单元格结束标记 --></tr><tr align="center"><td background="images\th5.jpg" height="20"><font color="#007FFF">网站管理菜单</font></td></tr><tr align="center"><td background="images\th6.jpg" height="20"><font color="#007FFF"><a href="about.html" target="mainframe">公司简介</a></font></td></tr><tr align="center"><td background="images\th7.jpg" height="20"><font color="#007FFF"><a href="news.html" target="mainframe">新闻动态</a></font></td></tr></table></body></html>

主窗口的第一个默认文件（main.html）:

<html><head><title>css框架的main主窗口</title>
</head><body bgcolor="#00FFFF"><font color="#007FFF" size="7">主页</font>
</body></html>

公司简介的超链接对应文件（about.html）（在主窗口显示）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>公司简介的html文件</title>
</head>
<body><font color="red">本公司由马老师引领......</font>
</body>
</html>

新闻动态的超链接对应文件（news.html）（在主窗口显示）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻动态的html文件</title>
</head><body align="center"><p><font color="#00FFFF"><h1>Cynic</h1><br />走到今日并非理所当然<br />顽风尚然强劲不挠<br />确实之物比想象中的<br />不要少吧<br />是因为记忆被岁月模糊了吗<br />还是说心灵被未曾见过的陌生人所烦扰了呢？<br />其实是支配躯体的疼痛啊<br />即使这样还是来到了这里<br />心无旁骛地瞻望终点就好<br />仅此唯一的理由<br />便是得以撒入回归之土<br />但那浅淡微薄的梦想<br />如能秉持初心不曾改变<br />未来也就不会无聊了吧......<br />半途而废这种事<br />还真是意料之外呢...愚蠢至极<br />说谎早已熟能生巧<br />大肆宣讲起性善论<br />到底是何者将世界推入这种境况？<br />是起初便怀于内心的感情所掀起的误解之潮吗？<br />其实是那支配心灵的有爱啊<br />这样便只剩一个<br />永远埋藏心底的小小思念<br />重叠交错后遗留下来，确是板上钉钉的绝对<br />即便如此从今以后我也不会再继续成长了<br />有你陪伴在身边什么的<br />也只是个美妙的错觉罢了<br />逐渐支离破碎的那些宝物<br />全部都是我曾拥有的<br />骗你的呐......<br />可自始至终的一切，我都无从理解啊...<br />将切身感受到的<br />这份起伏波涛般的烦躁思绪<br />狠狠刺入绯红穹苍...<br />即使这样还是来到了这里<br />心无旁骛地瞻望终点就好<br />仅此唯一的理由<br />便是得以撒入回归之土<br />但那浅淡微薄的梦想<br />如若能秉持初心不曾改变<br />未来也就不会无聊了吧...<br /></font></p>
</body></html>

打开cssFrame.html文件来展示效果：

前端：CSS/08/框架相关推荐

前端那么多框架，我们到底学哪一个
不知道从何时开始,前端居然被框架统治了.这是一个不太好的现象,这会让很多学生直接忽略掉前端经典三板斧HTML+CSS+JS,毕竟说到底,基本所有前端框架都是由这个三个知识扩展的. 我也不否认,运用框架 ...
css框架：五大css流行框架的总结-css教程-PHP中文网
本篇文章给大家带来的内容是关于css框架:五大css流行框架的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 如今,CSS框架越来越受欢迎,可以说已经应用到每一个网站上了.作为开 ...
WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
好程序员web前端分享MVVM框架Vue实现原理
好程序员web前端分享MVVM框架Vue实现原理,Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js和react.js更加简洁 ...
html框架有什么作用,使用HTML5+CSS+JS框架有那些好处
使用HTML5+CSS+JS框架有那些好处 2017-12-08 相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架.CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么 ...
python后端框架flask_Vue+Flask轻量级前端、后端框架，如何完美同步开发
导言我们的Vue2.0应用:简读-微信公众号RSS,即将进入后端开发. Vue+Flask作为轻量级前端.后端框架,非常适合组合起来快速开发.一个是js,一个是Python. Bonus: 可以完美实 ...
15个最好的HTML5前端响应式框架(2014)
文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...
响应式html5框架,15个最好的HTML5前端响应式框架(2014)
注1* 之前我们比较过Foundation和Bootstrap, 这篇文章更加系统地介绍了目前比较浏览的前端响应式框架. 注2* 文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表 ...
web前端三大主流框架是什么？
转载自品略图书馆 http://www.pinlue.com/article/2020/07/1217/0311017786310.html web前端三大主流框架是什么?前端开发师的岗位职责有哪些? ...

前端：CSS/08/框架