JSP编写报名考试页面，includ指令

最新推荐文章于 2022-06-21 08:24:21 发布

49天

最新推荐文章于 2022-06-21 08:24:21 发布

阅读量671

点赞数

分类专栏： web学习

本文链接：https://blog.csdn.net/qq_44084157/article/details/101643866

版权

web学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1，先创建一个lianxi项目，再配置好web服务器。
在这里插入图片描述
2，在web里面新建left.jsp页面，head.jsp页面，footer.jsp页面
代码如下

head.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>头部脚本</title>
</head>
<body>
<h1>四川省xx市计算机报名考试系统</h1>

</body>
</html>

left.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>左侧菜单</title>
</head>
<body>
<h3>左侧菜单</h3>
<p><a href="ch3_7_1.jsp">考生报名</a></p>
<p><a href="index.jsp">返回主页</a></p>
</body>
</html>

footer.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<br class="clearfloat"/>
<div id="footer">
    <p>xx大学出版社《jsp编程技术教程》教材编写组2008年8月8日</p>
</div>

</body>
</html>

3，创建index.jsp页面作为首页
在index.jsp页面里面编写考界面，

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>include指令示例</title>
    <link href="mystylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body class="twoColHybLtHdr">
<div id="container">
    <div id="header">
        <%@include file="head.jsp"%>
    </div>
    <div id="sidebar1">
        <%@include file="left.jsp"%>
    </div>
    <div id="mainContent">
        <font size="6" color="#dc143c"><p align="center">欢迎您报考<br>四川省泸州市计算机考试</p> </font>

    </div>
    <%@include file="footer.jsp"%>

</div>

</body>
</html>

编写考试报名页面，新建do_index.jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>include指令示例</title>
    <link href="mystylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body class="twoColHybLtHdr">
<div id="container">
    <div id="header">
        <%@include file="head.jsp"%>

    </div>
    <div id="sidebar1">
        <%@include file="left.jsp"%>
    </div>
    <div id="mainContent">
        <font size="6" color="#dc143c">
            <p>这是考试报名页面</p>
        </font>

    </div>
    <%@include file="footer.jsp"%>

</div>

</body>
</html>

在这里我们要用css美化界面，我们可以新建一个css
在这里插入图片描述
css里面的代码就是我们控制界面美观度的操作

@charset "gb2312";
body {
    font: 100% "宋体" ,"方正姚体","华文隶书","隶书","新宋体","幼圆";
    background: #bceddd;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #241016;

}
.twoColHybLtHdr  #container {
    width: 80%;
    background: #aeb5ed;
    margin: 0 auto;
    border: 1px solid #000000;
    text-align: left;

}
.twoColHybLtHdr #header {
    background: #cde7ed;
    padding:  0  10px;
    height: 70px;

}
.twoColHybLtHdr #header h1{
    margin: 0;
    text-align: center;
    padding: 10px 0;
}
.twoColHybLtHdr #sidebar1 {
    float: left;
    background: #d3d0ed;
    padding: 15px 0;

}
.twoColHybLtHdr #sidebar1 h3, .twoColHybLtHdr #sidebar1 p {
    margin-left: 20px;
    margin-right: 20px;
}
.twoColHybLtHdr #mainContent {
    margin: 0 20px 0 9em;
}
.twoColHybLtHdr #footer {
    padding: 0 10px;
    background: #ececea;
    text-align: center;
}
.twoColHybLtHdr #footer p {
    margin: 0;
    padding: 10px 0;
}
.fltrt {
    float:  right;
    margin-left: 8px;
}
.fltlft {
    float: left;
    margin-right: 8px;
}
.clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}

看看效果
在这里插入图片描述
好吧，比较丑，，，，
还没写完

49天

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
JSP编写报名考试页面，includ指令

1，先创建一个lianxi项目，再配置好web服务器。2，在web里面新建left.jsp页面，head.jsp页面，footer.jsp页面代码如下head.jsp页面<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <t...
复制链接

扫一扫

专栏目录