码迷,mamicode.com
首页 > Web开发 > 详细

HTML 中框架、层的运用

时间:2018-08-07 22:57:02      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:它的   组织   show   添加   效果   说明   browser   div   set   

 

本章目标:掌握框架结构<frameset><frame><iframe>
掌握组织元素:span和div

本章重点:框架结构<frameset><frame><iframe>

本章难点:框架的搭建

 

一、    框架

使用框架,可以在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面,它们是相互独立的。:

使用框架的不利因素有:

  • 网站开发者需要关心更多HTML文档的情况。
  • 打印整个页面变得困难。

frameset标签:

  • <frameset>标签定义了如何将窗口拆分成框架。
  • 每个frameset标签定义了一组行和列。
  • 行/列的值指明了每个行/列在屏幕上所占的大小

frame标签:

  • <frame>标签定义了每个框架中放入什么文件。

下面这个例子中,有一个两列的分栏。第一个被设置成窗口宽度的25%,第二个被设置成窗口宽度的75%。页面“frame_a.htm”被放在第一个分栏中,“frame_b.htm”被放在第二个分栏中。

 

基本注意点——有用的技巧:

假如一个框架有可见边框,用户可以拖动边框来改变它的大小。如果不想让用户改变大小,可以在<frame>标签中加入:noresize="noresize"。

给不支持框架的浏览器写上<noframes>标签。

更多示例:

混合框架:

<html>

<frameset rows="50%,50%">

  <frame src="frame_a.htm">

  <frameset cols="25%,75%">

      <frame src="frame_b.htm">

      <frame src="frame_c.htm">

  </frameset>

</frameset>

</html>

 

这个例子说明了怎样把三个页面以行列混合的方式放在框架中。

 

使用了noresize="noresize"的框架:

<html>

<frameset rows="50%,50%">

  <frame noresize="noresize" src="frame_a.htm">

  <frameset cols="25%,75%">

      <frame noresize="noresize" src="frame_b.htm">

      <frame noresize="noresize" src="frame_c.htm">

  </frameset>

</frameset>

</html>

 

这个例子说明了noresize属性。这个框架是不可改变大小的,把鼠标移动到框架边界上,你会发现无法调整大小。

 

导航框架:

<html>

<frameset cols="120,*">

   <frame src="frame_link.htm">

   <frame src="frame_a.htm" name="showframe">

</frameset>

</html>

 

这个例子说明了如何创建一个导航框架。导航框架包含了一系列链接,它们的目标页面在第二个框架中。文件“frame_links.htm”包含了三个链接,链接的代码如下:

 

 

内联框架:

<html>

<body>

<iframe src="intro.htm"></iframe>

<p>Some older browsers don‘t support iframes.</p>

<p>If they don‘t, the iframe will not be visible.</p>

</body>

</html>

 

这个例子说明了如何创建一个内联框架(包含在HTML页面里的框架)。

 

在框架内跳转到指定章节:

<html>

<frameset cols="30%,70%">

  <frame src="frame_a.htm">

  <frame src="frame_section.htm#C10">

</frameset>

</html>

 

这个例子显示了两个框架页。其中一个的源是一个文件的指定章节,该章节在文件“frame_section.htm”中使用代码<a name="C10">指定。

 

使用导航框架跳转到指定章节:

<html>

<frameset cols="200,*">

<frame src="frame_linksection.htm">

<frame src="frame_section.htm" name="showframe">

</frameset>

</html>

 

这个例子显示了两个框架页。左边的导航框架包含了一系列以第二个框架为目标的链接(“frame_linksection.htm”),第二个框架显示链接文件(“frame_section.htm”)。导航框架中的一个链接指向目标文件中的指定章节。文件“frame_link”中的HTML代码是像这样的:

 

 

二、    组织元素:span和div

span和div元素用于组织和结构化文档,并经常联合class和id属性一起使用。

用span组织元素

   span元素可以说是一种中性元素,因为它不对文档本身添加任何东西。但是与CSS结合使用的话,span可以对文档中的部分文本增添视觉效果。

让我们用一句本杰明·弗兰克林(Benjamin Franklin)的名言来举个例子:

 

假设我们想用红色来强调弗兰克林先生所认为的“不要在睡眠中度过一天”的好处,我们可以用<span>标签来标记上述每一点好处。然后,我们将这几个span设置为相同的class。这样,我们稍后就可以在样式表里针对这个class定义特定的样式。

 

相应的CSS代码如下:

 

用div组织元素:

如前面例子所示,span的使用局限在一个块元素内,而div可以被用来组织一个或多个块元素。

除去这点区别,divspan在组织元素方面相差无几。让我们来看一个例子。

 

HTML 中框架、层的运用

标签:它的   组织   show   添加   效果   说明   browser   div   set   

原文地址:https://www.cnblogs.com/borter/p/9439917.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!