佳慧在路上
佳慧在路上

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

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

首先，建立一个HTML框架。

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


<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>

顶部文件


<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<link href="main.css" rel="stylesheet" type="text/css">
head>
<body>
<div id="top">
<p>欢迎进入学生管理系统p>
div>
body>
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;
}

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

你可能感兴趣的:(实践作品,新手上路之JSP学习,新手上路之网页前端学习)

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他