读书人

html左右框架(demo)

发布时间: 2013-10-15 16:47:37 作者: rapoo

html上下框架(demo)

首先主框架 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>

读书人网 >CSS

热点推荐