iframe框架的使用-2018年3月20日零点
程序员文章站
2024-04-04 22:24:53
...
效果图：
思路：用表格进行布局，五行两列（其中分割线占了二行），首页分割成四个页面，所以需要四个iframe；分别写出四个页面，其中只有左页面需要标签跳转功能，用<a href="" traget="right"> 实现。
要点：
1,首页面-iframe语法：
<iframe src=".html" name="right" width="" height="" align="right" frameborder="0" scrolling="no"></iframe>
table里可以加上背景图，让分割看上去不那么都生硬。
2,top页面
用table布局，一行三列，表格元素的垂直定位 vlign="middle/bottom"，水平定位:align="right"
3,left页面
用ul无序列表实现，(h4{管理}+img[images/1.jpg width="30"])*4>ul>li>img[imges/file.jpg width="20"]+a[www.php.cn target="right"]{分类管理}
首页：
实例
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>华山比舞报名系统</title>
<style>
table{
background-image: url(images/ssbgcolor.jpg);
background-repeat: no-repeat;
background-size: 100% 90px;
}
</style>
</head>
<body>
<table border="0" width="960" cellspacing="1" cellpadding="3">
<tr>
<td colspan="2">
<iframe src="top.html" name="top" height="70" width="100%" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
<tr><td colspan="2"><hr></td></tr>
<tr>
<td>
<iframe src="left.html" name="left" height="570" width="140" frameborder="0" scrolling="no"></iframe>
</td>
<td>
<iframe src="right.html" name="right" height="570" width="800" frameborder="0" scrolling="no" ></iframe>
</td>
</tr>
<tr><td colspan="2"><hr></td></tr>
<tr>
<td colspan="2">
<iframe src="bottom.html" name="bottom" height="70" width="100%" frameborder="0" scrolling="no"></iframe>
</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
top页：
实例
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>top</title> </head> <body> <table > <tr> <td vlign="middle" ><img src="images/hsljlogo.png" width="70"></td> <td width="720" valign="middel"><h2 align="left">华山比舞报名系统</h2> </td> <td align="right" valign="bottom"><p><a href="">admin</a> <a href="">退出</a> </p></td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
left页：
实例
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>left</title> </head> <body> <h4><img src="images/user.jpg" width="30">用户管理</h4> <ul type="none"> <li><img src="images/file.jpg" width="20"><a href="user.html" target="right">用户查询</a></li> <li><img src="images/file.jpg" width="20"><a href="#">分类管理</a></li> </ul> <hr> <h4><img src="images/folder.jpg" width="30">历练中心</h4> <ul type="none"> <li><img src="images/file.jpg" width="20"><a href="movie.html" target="right">精彩集合</a></li> <li><img src="images/file.jpg" width="20"><a href="#">分类管理</a></li> </ul> <hr> <h4><img src="images/folder.jpg" width="30">订单管理</h4> <ul type="none"> <li><img src="images/file.jpg" width="20"><a href="order.html" target="right">订单查询</a></li> <li><img src="images/file.jpg" width="20"><a href="#">分类管理</a></li> </ul> <hr> <h4><img src="images/set.jpg" width="20">系统设置</h4> <ul type="none"> <li><img src="images/file.jpg" width="20"><a href="basic.html" target="right">基本配置</a></li> <li><img src="images/file.jpg" width="20"><a href="#">高级配置</a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
right页：
实例
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>right</title> </head> <body> <h3 align="center">比舞公告</h3> <table border="1" cellspacing="0" cellpadding="0" align="center" width="500" height="150"> <colgroup span="1" bgcolor="#E0FFFF"></colgroup> <tr> <th width="100">要求1</th> <td align="left">年龄在18周岁至30周岁之间的女性</td> </tr> <tr align="center"> <th>要求2</th> <td align="left">身体健康无病史</td> </tr> <tr align="center"> <th>要求3</th> <td align="left">要求面容姣好，身材惹火</td> </tr> <tr align="center"> <th>要求4</th> <td align="left">一个月内权威医疗机构给出的健康证</td> </tr> <tr align="center"> <th>要求5</th> <td align="left">无慢性病史、无精神病家族史、遗传病史</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
bottom页：
实例
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>bottom</title> </head> <body> <table align="center" valign="middle"> <tr> <td><a href="">华山比舞在线报名系统</a></td> <td> ©版权所有 </td> <td><a href="">备案号：粤ICP-1584729405</a></td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
user.html
实例
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>left</title> </head> <body> <h4><img src="images/user.jpg" width="30">用户管理</h4> <ul type="none"> <li><img src="images/file.jpg" width="20"><a href="user.html" target="right">用户查询</a></li> <li><img src="images/file.jpg" width="20"><a href="#">分类管理</a></li> </ul> <hr> <h4><img src="images/folder.jpg" width="30">历练中心</h4> <ul type="none"> <li><img src="images/file.jpg" width="20"><a href="movie.html" target="right">精彩集合</a></li> <li><img src="images/file.jpg" width="20"><a href="#">分类管理</a></li> </ul> <hr> <h4><img src="images/folder.jpg" width="30">订单管理</h4> <ul type="none"> <li><img src="images/file.jpg" width="20"><a href="order.html" target="right">订单查询</a></li> <li><img src="images/file.jpg" width="20"><a href="#">分类管理</a></li> </ul> <hr> <h4><img src="images/set.jpg" width="20">系统设置</h4> <ul type="none"> <li><img src="images/file.jpg" width="20"><a href="basic.html" target="right">基本配置</a></li> <li><img src="images/file.jpg" width="20"><a href="#">高级配置</a></li> </ul> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
basic.html
实例
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title>网站配置信息</title> </head> <body> <table align="center" width="400" border="0" cellpadding="5" cellspacing="0"> <caption> <h3 align="center">网站配置信息</h3> <hr width="500"> </caption> <tr> <th align="right" width="160"><label for="title">网站标题:</label></th> <td width="400" align="left"><input type="text" id="title" name="title" value="" placeholder="不多于20个字符" size="50"></td> </tr> <tr> <th align="right" width="160"><label for="keyworlds">网站关键字:</label></th> <td width="400" align="left"><input type="text" id="keyworlds" name="keyworlds" value="" placeholder="不多于50个字符" size="50"></td> </tr> <tr> <th align="right" width="160"><label for="desc">网站描述:</label></th> <td width="400" align="left"> <textarea id="desc" name="desc" cols="50" rows="6" placeholder="不多于120个字符"></textarea></td> </tr> <tr> <td colspan="2" align="center"><a href=""><input type="image" src="images/submit.jpg" width="80" ></a></td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
首页iframe手稿：
上一篇： ORACLEEXTRACT函数