Blogger Information
Blog 31
fans 0
comment 1
visits 21149
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
3月20日作业:用纯HTML制作一个网站后台模板
杜苏华迈专注于物联网可视化管理的博客
Original
656 people have browsed it

3月20日作业:用纯HTML制作一个网站后台模板:

  1. 用table进行布局

  2. 2.用内联框架iframe与<a>标签配合实现页面的跳转与加载 3.要求熟练使用<ul><img><p><h2><h3>等常用标签 其中: 后台的首页文件: admin.html 手写一遍 明晚开始学习CSS,这是HTML课程最后一次作业


作业效果截图:

作业截图.png



代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>宜昌市第一人民医院网站</title>
</head>
<body>
	<!-- 后台分为上下二部分,其中下部再分为左右二部分,左边显示菜单,右边是对应的内容 -->
	<!--
	border:设置表格边框线的宽度
	cellspacing: 设置单元格之间的间隙,设置为0,相当于单元格边线折叠,这时它自动使用表格的边框宽度,如1
	cellpadding: 设置单元格数据与边界之间的距离,使内容不至于太拥挤
	align: 设置单元格内数据的对方方式,默认为left左对齐,可以设置right右对齐和center居中对齐
	width: 设置表格的宽度,可以为绝对值,也可以是一个百分比相对值,推荐设置为相对值,以自适应数据变化
	height: 设置表格的高度,这里没有设置,以适应表格的行数的变化
	-->

	<table border="8" cellspacing="2" cellpadding="5" align="center" width="960">
		<!-- 顶部 -->
		<tr height=60>
			<td colspan="2"  rowspan="1">
				<iframe src="inc/top.html" name="top" height="70"  width="100%" frameborder="0" align="center" scrolling="no"></iframe>
			</td>
		</tr>

		<!-- 中间主体:分左右二栏 -->
		<tr>
			<!-- 左边菜单栏 -->
			<td>
				<iframe src="inc/left.html" name="left" height="600" width="140" frameborder="0" align="center" scrolling="auto"></iframe>
			</td>
			<!-- 右边内容区 -->
			<td>
				<iframe src="inc/default.html" name="right" height="600" width="800" frameborder="0" align="left" scrolling="no"></iframe>
			</td>
		</tr>

		<!-- 底部 -->
		<tr height=60>
			<td colspan="2"  rowspan="1"">
				<iframe src="inc/footer.html" name="footer" height="70"  width="100%" frameborder="0" align="center"></iframe>
			</td>
		</tr>
	</table>



</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>left</title>
</head>
<body>
	<h4><img src="../images/新闻公告.png" width="30">首页新闻</h4>
		<ul type="none">
			<!-- a标签的target属性值设置为要访问的框架的name名即可,这里是在右侧显示:right -->
			<li><a href="foods.html" target="right">医院新闻</a></li>
			<hr>
			<li><a href="">公示公告</a></li>
		</ul>

		<hr>
	<h4><img src="../images/科室介绍.png" width="30">科室介绍</h4>
	<ul type="none">
		<li><a href="foods.html" target="right">外科</a></li>
		<hr>
		<li><a href="">内科</a></li>
	</ul>

	<hr>
	<h4><img src="../images/快捷通道.png" width="30">快捷通道</h4>
	<ul type="none">
		<li><a href="foods.html" target="right">挂号</a></li>
		<hr>
		<li><a href="">住院</a></li>
	</ul>

	<hr>
	<h4><img src="../images/set.jpg" width="20">系统设置</h4>
	<ul type="none">
		<li><a href="system.html" target="right">基本配置</a></li>
		<hr>
		<li><a href="default.html" target="right">配置信息</a></li>
	</ul>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手写代码:

3.20手抄作业.jpg




Correction status:Uncorrected

Teacher's comments:
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