Community Learn Tools Library Leisure
search
English
Home > List of blog posts > iframe框架的使用-2018年3月20日零点
Blogger Information
Blog 55
fans 0
comment 1
visits 42119
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
iframe框架的使用-2018年3月20日零点
旺小舞的博客
Original
769 people have browsed it

效果图：

3-20iframe.jpg

思路：用表格进行布局，五行两列（其中分割线占了二行），首页分割成四个页面，所以需要四个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手稿：

QQ图片20180321165035.jpg

Correction status：qualified

Teacher's comments：作业已检查！ 写的很不错哦！ 博客发布作业中添加了线上运行代码的新功能！ 群文中找到入群必读文件夹下的博客如何提交作业.gif图下载了解！！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post