简单使用frameset标签，以及搭配使用DIV+CSS

最新推荐文章于 2023-04-27 10:14:48 发布

qq_44770793

最新推荐文章于 2023-04-27 10:14:48 发布

阅读量837

点赞数 2

本文链接：https://blog.csdn.net/qq_44770793/article/details/109227330

版权

软件开发同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Java Web

5 篇文章 0 订阅

订阅专栏

Web 基础客户端编程（frameset标签搭配DIV+CSS）

编程内容：使用HTML超文本标记语言制作简单页面，验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用，通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。

编程环境：Eclipse+Tomcat

（以下源码放在同一文件夹下运行）
简单使用jsp页面进行frameset框架进行页面布局（垂直+水平进行页面布局）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<frameset rows=13%,15%,62%,10%>

<frameset>
<frame src="head.html"/>
</frameset>

<frameset cols="20%,20%,20%,20%,20%" frameborder="yes" framespacing="1">
   <frame src="a.html" name="ahtml"/>
   <frame src="b.html" name="bhtml"/>
   <frame src="c.html" name="chtml"/>
   <frame src="d.html" name="dhtml"/>
   <frame src="e.html" name="ehtml"/>
</frameset>

<frameset frameborder="yes" framespacing="1">
<frame src="main.html" name="mainht"/>
</frameset>

<frameset frameborder="yes" framespacing="1">
<frame src="foot.html"/>
</frameset>

</frameset>	
</html>

a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>理工大学</title>
<style type="text/css">

body {background-color:WhiteSmoke;}
a:link{text-decoration:none;}
#x{
font-size:30px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<p id="x"><a href="https://www.mit.edu/" target="mainht" title="理工大学">理工大学</a></p>
</body>
</html>

b.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>支付跑注册</title>
<style type="text/css">

body {background-color:WhiteSmoke;}
a:link{text-decoration:none;}
#x{
font-size:30px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<p id="x"><a href="register.html" target="mainht" title="支付跑注册">支付跑注册</a></p>
</body>
</html>

c.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>支付宝注册</title>
<style type="text/css">

body {background-color:WhiteSmoke;}
a:link{text-decoration:none;}
#x{
font-size:30px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<p id="x"><a href="https://memberprod.alipay.com/account/reg/index.htm" target="mainht" title="支付宝注册">支付宝注册</a></p>
</body>
</html>

d.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客推荐</title>
<style type="text/css">

body {background-color:WhiteSmoke;}
a:link{text-decoration:none;}
#x{
font-size:30px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<p id="x"><a href="https://me.csdn.net/qq_44770793" target="mainht" title="博客推荐">博客推荐</a></p>
</body>
</html>

e.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>find cow</title>
<style type="text/css">

body {background-color:WhiteSmoke;}
a:link{text-decoration:none;}
#x{
font-size:30px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<p id="x"><a href="https://findtheinvisiblecow.com/" target="mainht" title="find cow">find cow</a></p>
</body>
</html>

foot.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>foot</title>
<style type="text/css">

body {background-color:WhiteSmoke;}
a:link{text-decoration:none;}
#x{
font-size:13px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<p id="x">关于注册|服务条款|使用规范|客服中心|版权所有：YUHAO</p>
<p id="x">© 2000 - 2200 yuhao Inc. All Rights Reserved</p>
</body>
</html>

head.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body background="https://www.mit.edu/files/images/202010/MIT-Expecting-Robots-SL2.gif">
<img src="http://picnew8.photophoto.cn/20131221/mashengligongxueyuanbiaozhitupian-11439091_1.jpg">
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function sname(form){
	if(form.xingming.value.length == 0)
		{alert("姓名不能为空！");return false;}
	if((form.xingming.value.length < 6)||(form.xingming.value.length>18))
		{alert("姓名格式不正确");return false;}
	return true;
}
function smima(form){
	if(form.mima.value.length==0)
		{alert("密码不能为空");return false;}
	else
		return true;
}
function siphone(form){
	var testt=/^[1][3,4,5,7,8,9][0-9]{9}$/;
	if(form.iphone.value.length==0)
		{alert("手机号码不能为空");return false;}
	if(!testt.test(form.iphone.value))
		{alert("请填写格式正确的手机号码");return false;}
	return true;
}
</script>
<style type="text/css">
body {background-color:WhiteSmoke;}
form {
font-size:30px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<p align="center"><font size=20px>支付跑官网</font></p>
<form action="">
姓名:<input type="text" value="" name="xingming" >6~18位<br>
密码:<input type="password" name="mima"><br>
手机号码:<input type="number" name="iphone"><br>
E-mail:<input type="email" name="mail"><br>
<input type="submit" value="提交" onclick="sname(this.form);smima(this.form);siphone(this.form) ">
<input type="reset" value="重置"> 
<input type="button" value="关闭" onclick="window.close()"/>
</form>
</body>
</html>

qq_44770793

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
简单使用frameset标签，以及搭配使用DIV+CSS

Web 基础客户端编程（frameset标签搭配DIV+CSS）编程内容：使用HTML超文本标记语言制作简单页面，验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用，通过实验掌握层叠样式表CSS的创建及应用，掌握在网页中插入层叠样式表CSS的常用方法，掌握层叠样式表CSS的主要基本属性的使用。编程环境：Eclipse+Tomcat（以下源码放在同一文件夹下运行）简单使用jsp页面进行frameset框架进行页面布局（垂直+水平进行页面布局）<%@ page l
复制链接

扫一扫

专栏目录