JavaWeb企业实训简易股市自选查询分析系统(二)前端页面布局

来源：互联网发布：python u\ 中文编辑：程序博客网时间：2024/04/28 03:25

效果图：

使用jsp iframe布局页面，个人吐槽：真心不喜欢java，有些地方配置太繁琐，出些错误直接无法修改的，IDE也不是很好用。可能是由于个人能力水平问题吧。

项目目录结构：

footer.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->    <meta name="description" content="">    <meta name="author" content="">         <!-- Bootstrap core CSS -->    <link href="../static/css/bootstrap.min.css" rel="stylesheet">    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <link href="../static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">    <!-- Custom styles for this template -->    <link href="../static/css/cover.css" rel="stylesheet">    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->    <!--[if lt IE 9]><script src="../static/js/ie8-responsive-file-warning.js"></script><![endif]-->    <script src="../static/js/ie-emulation-modes-warning.js"></script>    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>    <div class="site-wrapper">      <div class="site-wrapper-inner">        <div class="cover-container">       <div class="mastfoot">            <div class="inner">              <p>Copyright © 2015-2016 BZU StockPlus. All rights reserved.</p>            </div>          </div>        </div>      </div>    </div>    <!-- Bootstrap core JavaScript    ================================================== -->    <!-- Placed at the end of the document so the pages load faster -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>    <script src="../../dist/js/bootstrap.min.js"></script>    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>  </body></html>

header.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->    <meta name="description" content="">    <meta name="author" content="">    <link rel="icon" href="favicon.ico">    <title>Stock Plus</title>    <!-- Bootstrap core CSS -->    <link href="../static/css/bootstrap.min.css" rel="stylesheet">    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <link href="../static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">    <!-- Custom styles for this template -->    <link href="../static/css/dashboard.css" rel="stylesheet">    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->    <!--[if lt IE 9]><script src="static/js/ie8-responsive-file-warning.js"></script><![endif]-->    <script src="../static/js/ie-emulation-modes-warning.js"></script>    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body> <nav class="navbar navbar-fixed-top navbar-inverse">      <div class="container-fluid">        <div class="navbar-header">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">            <span class="sr-only">Toggle navigation</span>            <span class="icon-bar"><img src="../upload/logo.png"></img></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>          <!-- <a class="navbar-brand" href="#">欢乐股</a> -->          <span class="icon-bar"><img src="../upload/logo.png" width="50" heigh="50"></img></span>        </div>        <div id="navbar" class="navbar-collapse collapse">                    <form class="navbar-form text-center">            <input type="text" class="form-control " placeholder="请输入股票代码或名称...">          <ul class="nav navbar-nav navbar-right">            <li><a href="#">登录 |</a></li>            <li><a href="#">注册 |</a></li>            <li><a href="#">下载客户端 |</a></li>            <li><a href="#">关注微信</a></li>          </ul>          </form>                    </div>      </div>    </nav>    <!-- Bootstrap core JavaScript    ================================================== -->    <!-- Placed at the end of the document so the pages load faster -->    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>    <script>window.jQuery || document.write('<script src="static/js/vendor/jquery.min.js"><\/script>')</script>    <script src="../static/js/bootstrap.min.js"></script>    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->    <script src="../static/js/vendor/holder.min.js"></script>    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <script src="../static/js/ie10-viewport-bug-workaround.js"></script>  </body></html>

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>Stock Plus</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--><link rel="icon" href="favicon.ico"><!-- Bootstrap core CSS -->    <link href="static/css/bootstrap.min.css" rel="stylesheet">    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <link href="static/css/ie10-viewport-bug-workaround.css" rel="stylesheet">    <!-- Custom styles for this template -->    <link href="blog.css" rel="stylesheet">    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->    <script src="static/js/ie-emulation-modes-warning.js"></script>    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <iframe src="common/header.jsp" width="100%" height="10%" style="margin:0" name="header" id="header"></iframe>  <body>    <iframe src="common/charts.jsp" width="80%" height="75%" style="margin:0;float:left" name="header" id="charts"></iframe>    <iframe src="common/stockrecommend.jsp" width="20%" height="75%" style="margin:0" name="header" id="stockrecommend"></iframe>      </body>  <iframe src="common/footer.jsp" width="100%" height="15%" style="margin:0" name="footer" id="footer"></iframe></html>

其他jsp页面都是新建的，内容为模板的内容

0 0

JavaWeb企业实训 简易股市自选查询分析系统(二)前端页面布局

JavaWeb企业实训简易股市自选查询分析系统(二)前端页面布局