您的位置：首页 > Web前端

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

2016-04-10 20:29 323 查看
上篇文章说了后台的sevlet和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;
}


至此，这个小小的系统就完成了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航