创建框架结构的页面2

9.框架集中页面之间的链接：
1.在指定的框架中打开链接，使用name属性给框架命名，target属性定义链接的框架。

（额这里的备注没有用html的）

<html>//第一页（首页）
    <head>
        <title>在指定框架中打开页面</title>
    </head>
    <frameset cols="40%,*">
        <frame src="white.html" marginwidth="50px" marginheight="20px"></frame>
        <frameset rows="25%,25%,25%,*">
            <frame src="silver.html" marginheight="20px" marginwidth="50px" name="blue"></frame>
            <frame src="silver.html" marginheight="20px" marginwidth="50px" name="red"></frame>
            <frame src="silver.html" marginheight="20px" marginwidth="50px" name="green">
            //框架名字是green
            </frame>
            <frame src="silver.html" marginheight="20px" marginwidth="50px" name="orange"></frame>
        </frameset>
    </frameset>
</html>

//白色那个页面，里面每一句话都链接相对应的颜色。但是有个目标target值，里面值是框架的名字（上一页由<frame>标签的name属性确认），决定了超链接应该在哪个框架显示。
<html>
    <head>
        <title>白</title>
        <style>
            body{
                color:black;//文本颜色为黑色
                font:2em,arial;
                background-color:white;
            }
            table td{
                font:1.2em,幼圆;
                line-height:2.5em；//设置列表之间的距离
            }
        </style>
    </head>
    <body>
        white
        <p>
            <table border="0">
                <tr>
                    <td><a href="blue.html" marginheight="20px" marginwidth="50px" target="blue">第一栏显示蓝色页面</a></td>
                        <!--使用target属性定义目标位置，即在名为blue的框架上显示这个链接-->
                </tr>
                <tr>
                    <td><a href="red.html" marginheight="20px" marginwidth="50px" target="red">第二栏显示红色页面</a></td>
                </tr>
                <tr>
                    <td><a href="green.html" marginheight="20px" marginwidth="50px" target="green">第三栏显示绿色页面</a></td>
                </tr>
                <tr>
                    <td><a href="orange.html" marginheight="20px" marginwidth="50px" target="orange">第四栏显示橙色页面</a></td>
                </tr>
            </table>
        </p>
    </body>
</html>

10.框架内的锚点的链接：
Name属性还可以实现框架内锚点的链接。（类似于之前的导航里面的id和name）
<a href="12.html#aaa" target="showframe">带有锚的链接</a>
链接页面为12.html，显示的目标框架为showframe框架。
意思就是链接到showframe框架内12.html页面的 aaa位置。
<a name="aaa">十四</a>

11.<iframe>框架:
<iframe>标签创建的框架具有更好的灵活性，他可以更容易地将框架放在浏览器中的任何位置，可以自由控制窗口的大小，所以这种框架又被人称为嵌入式框架，或者浮动框架。
<iframe>标签是可以放在<body>中使用的。它可以使用修饰框架的属性。常见的样式属性：

<html>
    <head>
        <title>创建浮动框架</title>
    </head>
    <body>
        <a href="http://www.baidu.com.cn" target="three">百度</a>
        <a href="http://ai.taobao.com/?pid=mm_50814843_6614255_22478222" target="three">淘宝</a>
        <a href="http://www.soso.com" target="three">搜搜</a>
        <a href="傻逼主页.html" target="three">傻逼主页</a>
        <p>
            <iframe width="800" height="400" frameborder="0" scrolling="auto" align="center" name="three">
            </iframe>    <!--设置浮动框架的样式属性-->
    </body>
</html>

posted @ 2017-11-28 21:06 汪神阅读(429) 评论(0) 收藏举报

刷新页面返回顶部

创建框架结构的页面2

公告