• HTML 框架导航


      初次学习HTML,在www.w3school.com.cn看到了框架导航,上面的例子没有看懂所以搜了一下相应的问题,最后弄懂了怎么实现同一界面下的框架导航。

      首先是www.w3school.com.cn上的代码:

       

    <html>
    
    <frameset cols="120,*">
    
    <frame src="/example/html/html_contents.html">
    <frame src="/example/html/frame_a.html" name="showframe">
    
    </frameset>
    
    </html>

     实现的功能是下图的样子:

          

    其中W3school中省略了很多代码,我在

    1.http://blog.sina.com.cn/s/blog_6f6d07f80100oqlt.html

    2.http://blog.163.com/yw0602@126/blog/static/165385907201181852256852/ 

    两位总结的很齐全,我主要说说我的理解。

    首先谈谈代码里面有的:

      <frameset cols = "120,*"> 其中*指代的我的理解应该是整个界面除了120的单位之后剩下的部分。

    在1中,博主告诉了我:

        当点击导航条上的项目时,相应网页会在显示区域变换显示。首先准备一个主界面文件main.htm,将其划分成两块区域index和content. 在结合W3school上的代码就应该可以看懂content和index意思。

      例1:

    <html>
    <frameset cols="120,*">
    <frame name="index" src="index.htm" />
    <frame name="content" src="frame_a.htm" />
    </frameset>
    </html>

    name即文件的名字:index、content

     其中index区域 主要是链接项目;content区域 负责显示相应的链接文件;那么出现了一个问题需要有框架导航,我们既要把index.htm中的链接输出到content区域显示。  

          此时需要用到链接中的target属性:

        例2:

    <html>
    <head>
    </head>
    <body>
     <a href="frame_a.htm" target="content">frame_a</a>
     <a href="frame_b.htm" target="content">frame_b</a>
     <a href="frame_c.htm" target="content">frame_c</a>
    </body>
    </html>

    另外界面的颜色是在frame_a、frame_b、frame_c中添加背景颜色实现的。

    最后我总结一下:

      上述代码中例1相当于整个被分成两块儿(120、*)的大框架 在里面index代表左边的框架;content代表右边的框架;

    在例2中在index中写入frame_a/b/c,并且吧三个文件设置背景颜色,最后链接到content代表的框架中显示出来frame_a/b/c的内容。(此处可以参考前面第二个链接的知识结合看,就可以看懂了)

      最后我希望大家一起学习,有爱好的可以加个好友QQ:919334628;

                            邮件:shanpei2017@outlook.com

  • 相关阅读:
    sql语句性能优化
    Windows版Redis如何使用?(单机)
    redis在项目中的使用(单机版、集群版)
    在windows上搭建redis集群(redis-cluster)
    Jenkins打包Maven项目
    numpy交换列
    Linq中join多字段匹配
    SpringMVC Web项目升级为Springboot项目(二)
    SpringMVC Web项目升级为Springboot项目(一)
    springboot读取application.properties中自定义配置
  • 原文地址:https://www.cnblogs.com/shanpei/p/PiperStudyPlace.html
Copyright © 2020-2023  润新知