HTML的基本應用——框架的使用(frame)。這個頁面主要是爲了展示frame的應用,比較簡陋。
框架圖:
代碼:
<!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>無標題文檔</title>
</head>
<frameset rows="30%,6%,56%,*" cols="*" frameborder="0">
<frame src="1.html" scrolling="no" />
<frame src="2.html" scrolling="no" />
<frameset rows="*" cols="45%,*">
<frameset rows="60%,*">
<frame src="3-1-1.html" scrolling="no"/>
<frame src="3-1-2.html" scrolling="no"/>
</frameset>
<frame src="3-2.html" scrolling="no" />
</frameset>
<frame src="4.html" scrolling="no" />
</frameset>
<noframes></noframes>
</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>無標題文檔</title>
</head>
<body>
<table align="center" style="width:1350px; height:180px;">
<tr>
<td><img src="10.jpg" style="width:100%; height:180px;" /></td>
</tr>
</table>
</body>
</html>
2.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>無標題文檔</title>
</head>
<body>
<table width="1350" height="65">
<tr>
<td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">新歌top</font></a></td>
<td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">中國風</font></a></td>
<td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">歐美流行</font></a></td>
<td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">日韓流行</font></a></td>
<td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">MV</font></a></td>
<td align="center"><a href="http:www.baidu.com"><font size="+1" color="#FFCC00">搜索</font></a></td>
</tr>
</table>
</body>
</html>
3-1-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>無標題文檔</title>
</head>
<body background="2.jpg" style="font-size:23px;">
<table width="600" height="200">
<tr>
<td>
<p align="center"><font color="#CC3300">喜歡你</font></p>
<p align="center"><font color="#CC3300">作詞:黃家駒</font></p>
<p align="center"><font color="#CC3300">作曲:黃家駒</font></p>
<p align="center"><font color="#CC3300">演唱:G.E.M. 鄧紫棋</font></p>
</td>
</tr>
</table>
</body>
</html>
3-1-2.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>無標題文檔</title>
</head>
<body>
<table>
<tr>
<td><embed src="鄧紫棋 - 喜歡你.mp3" width="700" height="180"/></td>
</tr>
</table>
</body>
</html>
3-2.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>無標題文檔</title>
</head>
<body>
<table background="3.jpg" width="730" height="350">
<tr style="font-size:25px; color:#CC0000">
<td>
<marquee direction="up" scrolldelay="500">
<h1 style="font-size:36px;" align="center">喜歡你</h1>
<p align="center">細雨帶風溼透黃昏的街道</p>
<p align="center">抹去雨水雙眼無故地仰望</p>
<p align="center">望向孤單的晚燈</p>
<p align="center">是那傷感的記憶</p>
<p align="center">再次泛起心裏無數的思念</p>
<p align="center">以往片刻歡笑仍掛在臉上</p>
<p align="center">願你此刻可會知</p>
<p align="center">是我衷心的說聲</p>
<p align="center">喜歡你 那雙眼動人 笑聲更迷人</p>
<p align="center">願再可 輕撫你 那可愛面容</p>
<p align="center">挽手說夢話 像昨天 你共我</p>
<p align="center">滿帶理想的我曾經多衝動</p>
<p align="center">抱怨與她相愛難有自由</p>
<p align="center">願你此刻可會知</p>
<p align="center">是我衷心的說聲</p>
<p align="center">喜歡你 那雙眼動人 笑聲更迷人</p>
<p align="center">願再可 輕撫你 那可愛面容</p>
<p align="center">挽手說夢話 像昨天 你共我</p>
<p align="center">每晚夜裏自我獨行</p>
<p align="center">隨處蕩 多冰冷</p>
<p align="center">以往爲了自我掙扎</p>
<p align="center">從不知 她的痛苦</p>
<p align="center">喜歡你 那雙眼動人</p>
<p align="center">笑聲更迷人</p>
<p align="center">願再可 輕撫你 那可愛面容</p>
<p align="center">挽手說夢話</p>
<p align="center">像昨天 你共我</p>
<p align="center">哦哦哦 哦哦</p>
<p align="center">哦哦哦 哦哦</p>
<p align="center">哦哦哦 哦哦</p>
<p align="center">哦哦哦 哦哦</p>
<p align="center">哦哦哦 哦哦</p>
<p align="center">哦哦哦 哦哦</p>
<p align="center">哦哦哦 哦哦</p>
<p align="center">哦哦哦 哦哦</p>
</marquee>
</td>
</tr>
</table>
</body>
</html>
4.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>無標題文檔</title>
</head>
<body bgcolor="#66CC66">
<table style="width:1350px; height:5px;">
<tr>
<td>
<marquee direction="right" scrolldelay="10">
<p align="center"><font size="+2" color="#C23434">歡迎收聽你的月亮我的心,好男人就是我,我就是曾小賢</font></p>
</marquee>
</td>
</tr>
</table>
</body>
</html>