HTML框架布局实例-优快云博客

本文链接：https://blog.youkuaiyun.com/persistentA/article/details/51931412

index.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<frameset rows="15%,*">
    <frame src="top.html" noresize="noresize"/>
    <frameset cols="30%,*">
        <frame src="left.html" noresize="noresize"/>
        <frame src="right.html" name="Right"/>
    </frameset>
</frameset>
</html>

top.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="yellow">
I'm top!
</body>
</html>

left.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>这是左边的页面</title>
</head>
<body bgcolor="#ffc0cb">
<a href="http://www.mop.com" target="Right">猫扑</a>
<a href="http://www.dapenti.com" target="Right">打喷嚏</a>
<a href="http://www.cnbeta.com" target="Right">cnbeta</a>
<a href="http://www.51aspx.com" target="Right">51aspx</a>
</body>
</html>

right.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>这是右边的页面</title>
</head>
<body bgcolor="green">
I'm right;
</body>
</html>

html框架的使用