frameset小心得

最新推荐文章于 2019-12-06 23:17:51 发布

明天早晨喝牛奶

最新推荐文章于 2019-12-06 23:17:51 发布

阅读量231

点赞数 1

分类专栏： HTML小知识 Web前端小知识

本文链接：https://blog.csdn.net/qq_40289292/article/details/78093535

版权

Web前端小知识同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

HTML小知识

2 篇文章 0 订阅

订阅专栏

注意事项：
1.页面跳转（如何通过base标签中的target属性跳转页面。）
在这个代码块中涉及到的页面跳转，是通过标签中的target属性来指定需要跳转的页面的位置。
其中target后的right，指的是下面frameset父标签下的子标签frame标签中的属性name为right.
以后一旦有涉及到需要页面跳转的链接，都会跳转到right。（下文将会详细解释，right的意义。）
2.frameset中frame所划分的页面区域。
（1）对frameset的一个说明。
下文代码中的frameset父标签中的属性中，边框颜色的改变就不说了，我们要注意的是属性rows。
rows属性在这里表示你所操控的页面、你所要展示效果的页面的纵向比例。
（<frameset bordercolor="yellow" rows="80,80%,*">）
其中，“”中的数值表示的是，将一个页面划分成三个部分。第一部分是80px，第二部分是这个页面80%的大小，第三个部分用*代指，表示不设定，随它多大。
（2）通过frame标签，对frameset标签设定的区域进行进一步的设计。
再说frame，上面提到的base通过属性target使页面进行跳转，而target指定的跳转位置是通过frameset父标签下的子标签frame中的属性name进行设定的。
在frame属性中不但可以设定跳转的地点，还可以将需要跳转的链接放进来，通过src将链接写进frame标签，实现跳转。
<frame name="right" src="c.html" />

3.这篇代码中涉及的关于css的小知识。
（1）取消a标签的下划线
在标签style或css文档中，使用 text-decoration: none;取消a标签的下划线， text-decoration指的是文本装饰。
（2）把行内标签变成块标签
在标签style或css文档中，使用 display: block；将行内标签变成块标签。行内标签指的是，该标签中的内容是在文档中占据一行空间中的一小块空间的标签元素。同理，块标签就是，该标签中的内容是在文档中占据几行空间中的一小块空间的标签元素。
为什么要将行内标签变成块标签？
答：可以通过这种方式对需要进行css样式调整的行内元素进行调整，比如，float：left；或者一些其他的css样式调整。
（3）隐藏块标签
display:none；
（4）行高只用于块标签；
（5）鼠标悬停特效。
将需要展现出特效的标签元素的标签、class、ID在css中设定成（指定元素）：hover{}的样式。
下文代码中涉及的悬停样式有：
字体颜色 color:mediumvioletred;
标签区域背景颜色background-color: yellow;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <base target="right" /><!--制定页面跳转-->
        <style>
        body{
            background-color: pink;
            margin: 0px;
            padding: 0px;
        }
        a{
            text-decoration: none;/*取消a标签的下划线*/
            display: block;/*把行内标签变成块标签*/
            /*display:none;隐藏块标签*/
            width:152px;/*把已经成为块标签的a标签的宽度调节*/
            height: 40px;
            line-height: 40px;/*行高只用于块标签*/
            text-align: center;
        }a:hover{/*鼠标悬停特效*/
            color:mediumvioletred;
            background-color: yellow;
        }
            </style>
    </head>
    <body>
        <p><a href="jj.html">公式简介</a></p>
        <p><a href="xy.html">产品新样</a></p>
        <p><a href="zp.html">人才招聘</a></p>
        <p><a href="wm.html">联系我们</a></p>
    </body>
</html>


<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title></title>
        <script type="text/javascript">
            document.addEventListener('plusready', function() {
                //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"

            });
        </script>
    </head>
<frameset bordercolor="yellow" rows="80,80%,*"><!--frameset框架-->
    <frame name="top" src="a.html" />
    <frameset cols="150,*">
        <frame name="left" src="b.html" />
        <frame name="right" src="c.html" />
    </frameset>
    <frameset bordercolor="yellow" rows="*">
        <frame name="bottom" src="d.html" />
    </frameset>
</frameset>

</html>