收藏
批改状态：未批改
老师批语：
实战内联框架！！！加油加油！！！
代码：
admin.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用内联框架实战后台管理系统</title>
</head>
<body>
<table cellpadding="5" cellspacing="0" border="0" width="960">
<tr>
<td colspan="2">
<iframe src="next/top.html" name="top" height="80" width="100%" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
<tr><td colspan="2" width="100%"><hr></td></tr>
<tr>
<td>
<iframe src="next/left.html" name="left" height="550" width="140" frameborder="0" scrolling="no"></iframe>
</td>
<td>
<iframe src="next/default.html" name="right" height="550" width="800" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
<tr><td colspan="2" width="960"><hr></td></tr>
<tr>
<td colspan="2">
<iframe src="next/footer.html" name="footer" height="80" width="100%" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
</table>
</body>
</html>
left.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<h4><img src="images/13.jpg" width="25">书籍</h4>
<ul type="none">
<li><img src="images/1.jpg" width="20"><a href="book1.html" target="right">西游记</a></li>
<li><img src="images/2.jpg" width="20"><a href="book2.html" target="right">红楼梦</a></li>
<li><img src="images/3.jpg" width="20"><a href="book3.html" target="right">水浒传</a></li>
<li><img src="images/4.jpg" width="20"><a href="book4.html" target="right">三国演义</a></li>
</ul>
<hr>
<h4><img src="images/14.jpg" width="25">游戏</h4>
<ul type="none">
<li><img src="images/5.jpg" width="20"><a href="game1.html" target="right">英雄联盟</a></li>
<li><img src="images/6.jpg" width="20"><a href="game2.html" target="right">绝地求生</a></li>
<li><img src="images/7.jpg" width="20"><a href="game3.html" target="right">王者荣耀</a></li>
<li><img src="images/8.jpg" width="20"><a href="game4.html" target="right">开心消消乐</a></li>
</ul>
<hr>
<h4><img src="images/15.jpg" width="25">电脑</h4>
<ul type="none">
<li><img src="images/9.jpg" width="20"><a href="computer1.html" target="right">惠普</a></li>
<li><img src="images/10.jpg" width="20"><a href="computer2.html" target="right">华为</a></li>
<li><img src="images/11.jpg" width="20"><a href="computer3.html" target="right">小米</a></li>
<li><img src="images/12.jpg" width="20"><a href="computer4.html" target="right">苹果</a></li>
</body>
</html>
book1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>西游记</title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0" width="400">
<caption><h3>西游记简介</h3></caption>
<tr>
<th width="100" bgcolor="lightblue">作者</th>
<td colspan="4">吴承恩</td>
</tr>
<tr>
<th width="100" bgcolor="lightblue">部分人物</th>
<td>唐僧</td>
<td>孙悟空</td>
<td>猪八戒</td>
<td>沙和尚</td>
</tr> <tr>
<th width="100" bgcolor="lightblue">扮演者</th>
<td>徐少华</td>
<td>六小龄童</td>
<td>马德华</td>
<td>闫怀礼</td>
</tr>
<tr>
<th width="100" bgcolor="lightblue">意义</th>
<td colspan="5">《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说</td>
</tr>
</table>
</body>
</html>
game1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>英雄联盟</title>
</head>
<body>
<table cellpadding="5" cellspacing="0" border="1" width="100%">
<caption><h3>英雄联盟信息</h3></caption>
<tr>
<th bgcolor="lightgreen" width="100">中文名</th>
<td width="200">英雄联盟</td>
<th bgcolor="lightgreen" width="100">发行日期</th>
<td width="200">美服：2009年10月27日</td>
</tr>
<tr>
<th bgcolor="lightgreen" width="100">原版名称</th>
<td width="200">League of Legends</td>
<th bgcolor="lightgreen" width="100">制作人</th>
<td width="200">Steven Snow，Travis George</td>
</tr>
<tr>
<th bgcolor="lightgreen" width="100">其他名称</th>
<td width="200">撸啊撸、LOL</td>
<th bgcolor="lightgreen" width="100">总监</th>
<td width="200">Tom Cadwell，Shawn Carnes</td>
</tr>
</table>
</body>
</html>
computer1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>惠普笔记本</title>
<style type="text/css">
div{
color: lightgreen;
width: 400px;
height: 500px
padding:15px;
background-image: url(../images/et.jpg);
background-size: 430px 230px;
background-repeat:no-repeat; ;
border-radius:20px;
box-shadow: 8px 8px 10px brown;
}
.text{
line-height: 2em;
text-indent: 2em;
}
</style>
</head>
<body>
<div>
<p>
惠普（HP）公司是面向个人用户大中小型企业和研究机构的全球技术解决方案提供商。
惠普笔记本分为家用和商用两大产品线，而在这两大产品线中，又都有自己的中高端和中低端型号。<br>
家用产品线的中高端型号是HP Pavilion（畅游人）系列，中低端则是HP Compaq Presario（自由人）系列，值得一提的是，原本属于Pavilion系列中的HDX近期被独立出来，成为家用产品线的第三大系列，定位高端市场；商用产品线的中高端型号是HP EliteBook系列，中低端则是HP Compaq系列。
</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
手写代码：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
