位于上海,服务全国!

位于上海,服务全国!

html - 框

作者:admin 分类: 时间:2014-07-10 00:00:00 点击量:1508

html - 框 

框允许多个html文件被一次显示在一个浏览器窗口。 这意味着一个页面上没有内容,而是告诉你哪些网页要打开浏览器。 但随着CSS和PHP的出现,框已经过时,但如果你想使用它们,请继续阅读。

 

框 - 一个通用的框页面

框集最通常在一个框中有一个菜单,并把内容放在另一框。 当有人点击菜单上的一个链接,然后该链接会在内容页中被打开。 此处是一个基本的“索引”框集,左边是菜单而右边是内容。

HTML Code:

<html>

  <body>

    <frameset cols="30%,*">

      <frame src="menu.html">

      <frame src="content.html">

    </frameset>

  </body>

</html>

框集:

此处是示例: 框索引

•      框集 - 父标签定义此框网页的特征。 单个框在内部定义。

•      框集,- 即每一框都会有的宽度。 在上面的例子中,我们选择了菜单(第1列)占用总页面的30%,所用的“*”,表示该内容(第2列),将用本身剩余的宽度(70%)。

•      框src=“” - 该网页的URL被加载到框中。

一个好的经验法则是调用包含该框信息为“index.html”的页面,因为这通常是一个网站的主要页面。

添加横幅或标题框

添加行至标题和图形代码的顶部,如下所示:

 

HTML Code:

<html>

  <body>

    <frameset rows="20%,*">

      <frame src="title.html">

      <frameset cols="30%,*">

        <frame src="menu.html">

        <frame src="content.html">

      </frameset>

    </frameset>

  </body>

</html>

框边界和框空间

你可能已经注意到在帧之间那些难看的灰线。 是否可以移除这些和操作与框边界和框空间之间的间隔。 这些属性出现在框集标记中。

标注: 框空间和边界具有相同的属性,但有些浏览器只识别一个或另一个,所以同时使用,具有相同的值,是安全的。

•      框边界 =“#” - 确定是否会有一个边框。

•      边框 =“#” - 修改边框的宽度。

•      框边界 =“#”,修改边框的宽度,由网络浏览器使用。

这里有一个相同但无边框的示例。

HTML Code:

<html>

  <body>

    <frameset border="0" frameborder="0" framespacing="0" rows="20%,*">

      <frame src="title.html">

      <frameset border="0" frameborder="0" framespacing="0" cols="30%,*">

        <frame src="menu.html">

        <frame src="content.html">

      </frameset>

    </frameset>

  </body>

</html>

框边框:

这是一个视觉:视觉

框名和框目标

怎样漂亮会让每个菜单链接加载到内容页? 我们命名的每个框,并在“menu.html”内部设置正确的基本目标链接。

HTML Code:

<html>

  <body>

    <frameset rows="20%,*">

      <frame name="title" src="title.html">

      <frameset cols="30%,*">

        <frame name="menu" src="menu.html">

        <name="content" src="content.html">

      </frameset>

    </frameset>

  </body>

</html>

HTML Code:

<html>

  <head>

    <base target="content">

  </head>

  <body>

    <!-- Content Goes Here -->

  </body>

</html>

框目标:

此处是视觉效果: 视觉

我们首先在框页面命名内容框“内容”,然后我们设定“menu.html”内的基本目标链接指向该框。 我们的框页面现在有一个完美的功能菜单和内容布局!

不能变换大小和滚动

是否可能使用NORESIZE和scrolling的属性进一步自定义<FRAME>标签。

HTML Code:

<html>

  <body>

    <frameset border="2" frameborder="1" framespacing="2" rows="20%,*">

      <frame src="title.html" noresize scrolling="no">

      <frameset border="4" frameborder="1" framespacing="4" cols="30%,*">

        <frame src="menu.html" scrolling="auto" noresize>

        <frame src="content.html" scrolling="yes" noresize>

      </frameset>

    </frameset>

  </body>

</html>

Noresize and Scrolling:

此处是视觉效果: 视觉

•      noresize - 确定框是否可以由访客调整大小。 (值“真”和“假”)

•      scrolling - 决定在框内是否允许滚动(值“真”和“假”)

我们把内容框设置为滚动“yes”,以确保访问者将能够滚动浏览,如果屏幕容不下所有内容的时候。 我们也可以把标题横幅设置为“不”滚动,因为一个滚动条出现在标题框没有任何意义。