zoukankan      html  css  js  c++  java
  • HTML框架

    1.什么是框架?

    框架将浏览器划分为不同的部分,每一部分加载不同的网页,实现再同意浏览器窗口中加载多个页面的效果。

    2.<frameset>划分框架标记

    (1)语法格式:

    <frameset>... ...</frameset>

    (2)属性

    cols:使用“像素数”和%分割左右窗口,“*表示剩余部分”

         如果使用“*”,“*”表示框架平均分成2个

              如果使用“*,*,*”表示框架平均分成3个

    rows:使用“像素数”和%分割上下窗口,“*”表示剩余部分

    frameborder:指定是否显示边框,0不显示,1显示

    border:设置边框的大小,默认值5像素

    (3)<frame>子窗口标记

    注意:<frame>是一个单标记,该标记必须放在<frameset>中使用,再<frameset>中设置了几个窗口,就必须对应使用几个<frame>框架,而且还必须使用src属性指定一个网页。

    属性:

    src:加载网页文件的URL地址

    name:框架名称,是链接标记的target所要参数

    noresize:表示不能调整框架大小,格式:noresize="noresize",没有设置是就可以调整

    scrolling:是否需要滚动条,值有auto、yes、no

    frameborder:是否需要边框,值有1(显示边框)、0(不显示边框)

     3.举例说明

    demo.html代码:

     1 <html>
     2     <head>
     3         <title>框架</title>
     4         <meta charset="UTF-8">
     5     </head>
     6     <frameset rows="120,*,120" frameborder="1" border="2">
     7         <frame name="top" src="top.html"/>
     8             <frameset cols="20%,80%" >
     9                 <frame name="left" src="left.html" noresize="noresize"/>
    10                 <!--<frame name="right" src="right.html"/>-->
    11                 <frame name="right" src="right.html" scrolling="no"/>
    12             </frameset>
    13         <frame name="bottom" src="bottom.html"/>
    14     </frameset>
    15 </html>
    View Code

    top.html代码:

     1 <html>
     2     <head>
     3         <title>框架</title>
     4         <meta charset="UTF-8">
     5     </head>
     6     <body bgcolor="green" topmargin="10">
     7         <img src="car.jpg" height="90" width="160" align="left">
     8         <h1>&nbsp;&nbsp;<a href="demo.html" target="_blank"><font color="white">汽车之家</font></a> </h1>
     9         <p><font color="white" size="4">&nbsp;&nbsp;&nbsp;&nbsp;请记住我们的网站:www.carhome.com</font></p>
    10     </body>
    11 </html>
    View Code

    left.html代码:

     1 <html>
     2     <head>
     3         <title>框架</title>
     4         <meta charset="UTF-8">
     5     </head>
     6     <body>
     7         <ul>
     8             <li>
     9                 <a href="demo.html" target="_blank"><font size="6">首页</font></a>
    10             </li>
    11             <li>
    12                 <a href="demo.html" target="_blank"><font size="6">新闻</font></a>
    13             </li>
    14             <li>
    15                 <a href="demo.html" target="_blank"><font size="6">资讯</font></a>
    16             </li>
    17             <li>
    18                 <a href="demo.html" target="_blank"><font size="6">图片</font></a>
    19             </li>
    20             <li>
    21                 <a href="demo.html" target="_blank"><font size="6">联系我们</font></a>
    22             </li>
    23         </ul>
    24     </body>
    25 </html>
    View Code

    right.html代码:

     1 <html>
     2     <head>
     3         <title>框架</title>
     4         <meta charset="UTF-8">
     5     </head>
     6     <body>
     7         <table>
     8             <tr>
     9                 <td>
    10                     <img src="demo.jpg" width="120" height="80">
    11                 </td>
    12                 <td>
    13                     <p>
    14                         改编自东野圭吾原著同名小说《解忧杂货店》,讲述了在一家僻静街道旁的杂货店,只要写下烦恼投进店前门卷帘门的投信口,第二天就会在店后的牛奶箱里得到回答。某个夜晚,三个身在迷途的年轻人阿杰、小波、彤彤无意闯入,没想到开启了时光隧道,从收到来自过去的第一封咨询信开始,在不断的回信和收信过程中,过去链接了未来,犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择,找到了心灵的方向,不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。
    15                     </p>
    16                 </td>
    17             </tr>
    18             <tr>
    19                 <td>
    20                     <img src="demo.jpg" width="120" height="80">
    21                 </td>
    22                 <td>
    23                     <p>
    24                         改编自东野圭吾原著同名小说《解忧杂货店》,讲述了在一家僻静街道旁的杂货店,只要写下烦恼投进店前门卷帘门的投信口,第二天就会在店后的牛奶箱里得到回答。某个夜晚,三个身在迷途的年轻人阿杰、小波、彤彤无意闯入,没想到开启了时光隧道,从收到来自过去的第一封咨询信开始,在不断的回信和收信过程中,过去链接了未来,犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择,找到了心灵的方向,不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。
    25                     </p>
    26                 </td>
    27             </tr>
    28             <tr>
    29                 <td>
    30                     <img src="demo.jpg" width="120" height="80">
    31                 </td>
    32                 <td>
    33                     <p>
    34                         改编自东野圭吾原著同名小说《解忧杂货店》,讲述了在一家僻静街道旁的杂货店,只要写下烦恼投进店前门卷帘门的投信口,第二天就会在店后的牛奶箱里得到回答。某个夜晚,三个身在迷途的年轻人阿杰、小波、彤彤无意闯入,没想到开启了时光隧道,从收到来自过去的第一封咨询信开始,在不断的回信和收信过程中,过去链接了未来,犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择,找到了心灵的方向,不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。
    35                     </p>
    36                 </td>
    37             </tr>
    38             <tr>
    39                 <td>
    40                     <img src="demo.jpg" width="120" height="80">
    41                 </td>
    42                 <td>
    43                     <p>
    44                         改编自东野圭吾原著同名小说《解忧杂货店》,讲述了在一家僻静街道旁的杂货店,只要写下烦恼投进店前门卷帘门的投信口,第二天就会在店后的牛奶箱里得到回答。某个夜晚,三个身在迷途的年轻人阿杰、小波、彤彤无意闯入,没想到开启了时光隧道,从收到来自过去的第一封咨询信开始,在不断的回信和收信过程中,过去链接了未来,犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择,找到了心灵的方向,不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。
    45                     </p>
    46                 </td>
    47             </tr>
    48             <tr>
    49                 <td>
    50                     <img src="demo.jpg" width="120" height="80">
    51                 </td>
    52                 <td>
    53                     <p>
    54                         改编自东野圭吾原著同名小说《解忧杂货店》,讲述了在一家僻静街道旁的杂货店,只要写下烦恼投进店前门卷帘门的投信口,第二天就会在店后的牛奶箱里得到回答。某个夜晚,三个身在迷途的年轻人阿杰、小波、彤彤无意闯入,没想到开启了时光隧道,从收到来自过去的第一封咨询信开始,在不断的回信和收信过程中,过去链接了未来,犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择,找到了心灵的方向,不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。
    55                     </p>
    56                 </td>
    57             </tr>
    58             <tr>
    59                 <td>
    60                     <img src="demo.jpg" width="120" height="80">
    61                 </td>
    62                 <td>
    63                     <p>
    64                         改编自东野圭吾原著同名小说《解忧杂货店》,讲述了在一家僻静街道旁的杂货店,只要写下烦恼投进店前门卷帘门的投信口,第二天就会在店后的牛奶箱里得到回答。某个夜晚,三个身在迷途的年轻人阿杰、小波、彤彤无意闯入,没想到开启了时光隧道,从收到来自过去的第一封咨询信开始,在不断的回信和收信过程中,过去链接了未来,犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择,找到了心灵的方向,不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。
    65                     </p>
    66                 </td>
    67             </tr>
    68             <tr>
    69                 <td>
    70                     <img src="demo.jpg" width="120" height="80">
    71                 </td>
    72                 <td>
    73                     <p>
    74                         改编自东野圭吾原著同名小说《解忧杂货店》,讲述了在一家僻静街道旁的杂货店,只要写下烦恼投进店前门卷帘门的投信口,第二天就会在店后的牛奶箱里得到回答。某个夜晚,三个身在迷途的年轻人阿杰、小波、彤彤无意闯入,没想到开启了时光隧道,从收到来自过去的第一封咨询信开始,在不断的回信和收信过程中,过去链接了未来,犹豫是否该坚持音乐梦想的秦朗、是否该和家人因逃债远走他乡的浩博、是否应该放弃舞女工作的晴美都从他们的回信建议做出了选择,找到了心灵的方向,不经意间也串联了所有人的人生。同时这三个年轻人也收到了对于自己困惑的解答。
    75                     </p>
    76                 </td>
    77             </tr>
    78         </table>
    79     </body>
    80 </html>
    View Code

    bottom.html代码:

    1 <html>
    2     <head>
    3         <title>框架</title>
    4         <meta charset="UTF-8">
    5     </head>
    6     <body bgcolor="green" topmargin="50">
    7         <center><font size="4" color="white">&copy;2019/8/6 木子版权所有</font></center>
    8     </body>
    9 </html>
    View Code

    效果展示:

  • 相关阅读:
    博客园20071027上海聚会
    上海招聘.NET(C#)程序员
    招人
    漂亮的后台WebUi框架(有源码下载)
    js插件库系列导航
    PrestoSQL(trinodb)源码分析 执行(下)
    Extjs4 (二)
    Struts2(1)简介
    css中的字体
    什么是REST架构
  • 原文地址:https://www.cnblogs.com/muzidaitou/p/11308412.html
Copyright © 2011-2022 走看看