效果圖
index.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<frameset rows="50,*" border="0px">
<frame src="a.html" name="top" />
<frameset cols="150,*">
<frame src="b.html" name="left" />
<frame src="c.html" name="right" />
</frameset>
</frameset>
</html>
a.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Overwatch</title>
<base target="right" />
<style>
body{
margin: 0px;
padding: 0;
background-color: #2E344B;
}
a{
color: #D1D3D8;
text-decoration: none;
float: left;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
}
a:hover{
background-color: #3D4A63;
color: #ffffff;
</style>
</head>
<body>
<a href="http://ow.blizzard.cn/home"><img src="img/守望先鋒.jpg" width="150px" height="50px"/></a><img />
<a href="http://ow.blizzard.cn/game/overview/">遊戲概述</a>
<a href="http://ow.blizzard.cn/game/patch-notes/">遊戲補丁</a>
<a href="http://ow.blizzard.cn/heroes/">英雄</a>
<a href="http://ow.blizzard.cn/events/summer-games/">活動</a>
<a href="http://ow.blizzard.cn/media/">視頻圖片</a>
<a href="http://ow.blizzard.cn/article/news/">新聞</a>
<a href="http://ow.blizzard.cn/article/news/91">下載</a>
<a href="http://ow.blizzard.cn/career/">生涯數據</a>
<a href="http://ow.blizzard.cn/esports/">電子競技</a>
<a href="http://bbs.ow.blizzard.cn/forum.php">論壇</a>
</body>
</html>
b.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Blizzard</title>
<base target="right" />
<style>
body {
margin: 0px;
padding: 0;
background-color: #1C2B36;
}
a {
color: #869FB1;
text-decoration: none;
display: block;
width: 150px;
height: 50px;
line-height: 50px;
text-align: center;
}
a:hover {
background-color: #131E26;
color: #ffffff;
}
</style>
</head>
<body>
<a href="http://www.battlenet.com.cn/zh/"><img src="img/Blizzard.jpg" width="150px" height="50px"/></a>
<a href="https://www.battlenet.com.cn/account/download/">遊戲下載</a>
<a href="https://www.battlenet.com.cn/shop/zh/">商城</a>
<a href="http://www.overwatchesports.cn/">電競</a>
<a href="https://www.battlenet.com.cn/support/zh/">支持</a>
<a href="https://www.battlenet.com.cn/login/zh/?ref=https://www.battlenet.com.cn/account/management/&app=bam&cr=true">暴雪通行證</a>
</body>
</html>
c.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/堡壘.jpeg" height="829px" width="1677px"/>
</body>
</html>