html上下框架(demo)

来源:互联网 发布:百度石家庄盘古网络 编辑:程序博客网 时间:2024/05/29 15:01

首先主框架 demo.html


<html>

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

    <frame src="top.html">
    <frame src="main.html" name="main">

</frameset>

</html>


然后顶部导航  TOP.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo</title>
</head>
<body>
    <a href="1.html" target="main">点击我一下</a>
    <a href="2.html" target="main">点击我</a>
</body>
</html>

主页面  main.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo</title>
</head>
<body>
    <p>这是原来的页面,点击上面文字刷新</p>
</body>
</html>


跳转后的页面 1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Demo</title>
</head>
<body>
    <p>www.guoxiaotian.com</p>
</body>
</html>


原创粉丝点击