JSP入门作品之简易版学生管理系统前端部分

时间：2022-10-20 13:13:07

上篇文章说了后台的sevlet和JSP，这篇要把他们连接在一块展示出来。
首先，看看最终的成果吧。（实在有点丑呀）
添加
JSP入门作品之简易版学生管理系统前端部分
编辑
JSP入门作品之简易版学生管理系统前端部分
点击编辑之后
JSP入门作品之简易版学生管理系统前端部分
查看
JSP入门作品之简易版学生管理系统前端部分
下面看一下都是怎么实现的。

首先，建立一个HTML框架。

//Dreamweaver CC这一版本不能像从前一样直接建立框架了，我们需要自己打代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生信息管理系统</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="box">
<div id="top"><iframe width="1000px" float=right height="150px" name="top" scrolling="no" frameborder="0" src="top.html"></iframe></div>
<div id="main"><iframe width="700px" float=right height="610px" name="main" scrolling="auto" frameborder="0" ></iframe></div>
<div id="left"><iframe width="300" height="610" name="left" scrolling="auto" frameborder="0" src="left.html"></iframe></div>
</div>
</body>
</html>

顶部文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top">
<p>欢迎进入学生管理系统</p>
</div>
</body>
</html>

左端文件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="main.css" rel="stylesheet" type="text/css">
</head>

<body>
<div><a href="../studinfo/addstdinfo.jsp" target="main">添加</a></div>
<div><a href="../studinfo/stdinfolistformodi.jsp" target="main">编辑</a></div>
<div><a href="../studinfo/stdinfolist.jsp" target="main">查看</a></div>
</body>
</html>

中间文件

链接上篇所提到的三个jsp文件

CSS样式表

//自己瞎画的

@charset "utf-8";
#box { width: 1000px; height: auto; overflow: hidden; margin: 0px auto 30px auto; background-color: #FFFFFF; }
#main { clear: both; width: 800px; height: 610px; float: right; /* [disabled]border-top-right-radius: 100px; */ /* [disabled]border-top-left-radius: 100px; */ background-color: #fca26b; }
#top p{ height: 10px; color:#fca26b; font-weight: bolder; }
#top { text-align: center; font-size: xx-large; width: 1000px; height: 150px; background-color: #eae4cc; border-top-left-radius: 100px; border-top-right-radius: 100px; background-image: url(head_bg.jpg); }
#left { width: 200px; height: 610px; background-repeat: no-repeat; float: left; background-color: #cabd91; border-top-left-radius: 0px; border-top-right-radius: 0px; }

至此，这个小小的系统就完成了。

标签：

相关文章