前端：CSS/08/框架

普通框架

框架的概念

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

框架集和框架页

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

框架与窗户很像，一个窗户由窗格（框架）和玻璃（框架页）构成。
先规划窗格，然后再确定每个窗格中放的玻璃，（先有结构，后有内容）
框架网页的DTD必须是以下这种类型的（即：框架型的DTD）：

属性

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

框架页的属性

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

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

框架嵌套

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

网页框架的使用

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

"-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    

    
        
    
    "100,*" frameborder="no">
        "top.html" noresize="noresize" scrolling="no" />
        
        "150,*" frameborder="no">
            "left.html" noresize="noresize" />
            "main.html" name="mainframe" />
        
        

    
     对不起，你的浏览器不支持frameset元素！

    

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

    


"007FFF" background="images\th3.jpg" height="100">

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

    
    


"#CDCDCD">
    "100%" border="0" cellpadding="0" cellspacing="0">
        "center">
            "center">
            "center">
            "center">
            

                "#007FFF" size="4">"cssFrame.html" target="_top">返回首页
            
            
        
        
"images\th5.jpg" height="20">
                "#007FFF">网站管理菜单
            
        
        
"images\th6.jpg" height="20">
                "#007FFF">"about.html" target="mainframe">公司简介
            
        
        
"images\th7.jpg" height="20">
                "#007FFF">"news.html" target="mainframe">新闻动态
            
        

    

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

    


"#00FFFF">
    "#007FFF" size="7">主页

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

"en">

    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    


    "red">本公司由马老师引领......

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

"en">


    "UTF-8">
    "viewport" content="width=device-width, initial-scale=1.0">
    


"center">
    

        "#00FFFF">
            
Cynic



            走到今日并非理所当然

            顽风尚然强劲不挠

            确实之物比想象中的

            不要少吧

            是因为记忆被岁月模糊了吗

            还是说心灵被未曾见过的陌生人所烦扰了呢？

            其实是支配躯体的疼痛啊

            即使这样还是来到了这里

            心无旁骛地瞻望终点就好

            仅此唯一的理由

            便是得以撒入回归之土

            但那浅淡微薄的梦想

            如能秉持初心不曾改变

            未来也就不会无聊了吧......

            半途而废这种事

            还真是意料之外呢...愚蠢至极

            说谎早已熟能生巧

            大肆宣讲起性善论

            到底是何者将世界推入这种境况？

            是起初便怀于内心的感情所掀起的误解之潮吗？

            其实是那支配心灵的有爱啊

            这样便只剩一个

            永远埋藏心底的小小思念

            重叠交错后遗留下来，确是板上钉钉的绝对

            即便如此从今以后我也不会再继续成长了

            有你陪伴在身边什么的

            也只是个美妙的错觉罢了

            逐渐支离破碎的那些宝物

            全部都是我曾拥有的

            骗你的呐......

            可自始至终的一切，我都无从理解啊...

            将切身感受到的

            这份起伏波涛般的烦躁思绪

            狠狠刺入绯红穹苍...

            即使这样还是来到了这里

            心无旁骛地瞻望终点就好

            仅此唯一的理由

            便是得以撒入回归之土

            但那浅淡微薄的梦想

            如若能秉持初心不曾改变

            未来也就不会无聊了吧...

        
    

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