简单的在线简历

这个简历,我还没有完成接收图片的功能。还没有写js验证功能,我会慢慢的修改,添加验证功能上去

这是首页( test.jsp)的一部分,有些没有显示出来

结果图(success.jsp)

text.jsp的代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css/test.css" rel="stylesheet" type="text/css">
</head>
<body>
    <h2 style="padding-left: 175px">简历</h2>
    <hr>
    <div id="body_box">
        <h3 align="center">个人简介</h3>
        <hr>
        <form action="success.jsp">
            <div id="photo">
                <div style="width: inherit;height: inherit;background-color: #0000FF;">半身照</div>
            </div>
            <ul>
                <li>姓名:<input placeholder="李华"type="text" name="name">
                    <span class="mustW">*</span>
                </li>
                <li class="secondLi">性别:
                    <select name="sex">
                        <option></option>
                        <option>男</option>
                        <option>女</option>
                    </select>
                    <span class="mustW">*</span>
                </li>
            </ul>
            <br>
            <ul>
                <li>学校:<input placeholder="清华大学"type="text" name="school">
                </li>
                <li class="secondLi">学历:
                    <select name="degree">
                        <option></option>
                        <option>博士</option>
                        <option>硕士</option>
                        <option>本科</option>
                        <option>专科</option>
                        <option>专科以下</option>
                    </select>
                    <span class="mustW">*</span>
                </li>
            </ul>
            <br>
            <ul>
                <li>专业:<input placeholder="人力资源"type="text" name="profession"></li>
                <li class="secondLi">兴趣爱好:<input placeholder="旅游"type="text" name="hobby"></li>
            </ul>
            <br>
            <ul>
                <li>电话:<input placeholder="1xxxxxxxxxx"type="text" name="phone"> <span class="mustW">*</span></li>
                <li class="secondLi">家庭住址:<input placeholder="xx省xx市xx区xx街B栋xx"type="text" name="address">
                    <span class="mustW">*</span>
                </li>
            </ul>
            <br><br>
            <ul>
                <li>学校经历:</li>
            </ul>
            <br>
            <ul style="margin-left: 45px">
                <li style="width: auto">
                    <textarea cols="4" role="5" style="width: 560px;height: 105px" name="schoolText"></textarea>
                </li>
            </ul>
            <br><br>
            <ul>
                <li>社会经历:</li>
            </ul>
            <br>
            <ul style="margin-left: 45px">
                <li style="width: auto">
                    <textarea cols="4" role="5" style="width: 560px;height: 105px" name="socialText"></textarea>
                </li>
            </ul>
            <br><br>
            <ul>
                <li>个人评价:</li>
            </ul>
            <br>
            <ul style="margin-left: 45px">
                <li style="width: auto">
                    <span class="mustW">*</span>
                    <textarea cols="4" role="5" id="accessOneself" style="width: 560px;height: 105px" name="OneselfText"></textarea>
                </li>
            </ul>
            <br>

            <br>
            <div id="stb" align="center">
                <input type="submit" value="提交">
                <input style="margin-left: 35px" type="reset" value="取消">
            </div>
        </form>

        <br>
    </div>
</body>
</html>

(总的来说,我没有完全实现css与html的分离)

提交表单后,跳转到success.jsp。

success.jsp的代码如下

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="css/test.css" rel="stylesheet" type="text/css">
</head>
<body>
<%
    String name=request.getParameter("name");
    String sex=request.getParameter("sex");
    String school=request.getParameter("school");
    String profession=request.getParameter("profession");
    String degree=request.getParameter("degree");
    String hobby=request.getParameter("hobby");
    String phone=request.getParameter("phone");
    String address=request.getParameter("address");
    String schoolText=request.getParameter("schoolText");
    String socialText=request.getParameter("socialText");
    String OneselfText=request.getParameter("OneselfText");
%>

<div id="body_box">
    <h3 align="center">个人简介</h3>
    <hr>
        <div id="photo">
            <div style="width: inherit;height: inherit;background-color: #0000FF;">半身照</div>
        </div>
    <table>
        <tr>
            <td><div class="inputText">姓名:<span><%= name%></span></div></td>
            <td><div class="inputText">性别:<span><%= sex%></span></div></td>
        </tr>
        <tr>
            <td><div class="inputText">学校:<span><%=school%></span></div></td>
            <td><div class="inputText">学历:<span><%= profession%></span></div></td>
        </tr>
        <tr>
            <td><div class="inputText">专业:<span><%= degree%></span></div></td>
            <td><div class="inputText">兴趣爱好:<span ><%= hobby%></span></div> </td>
        </tr>
        <tr>
            <td><div class="inputText">电话:<span><%= phone%></span></div></td>
            <td><div class="inputText">家庭住址:<span><%= address%></span></div> </td>
        </tr>
    </table>
        <br><br>
        <ul>
            <li>学校经历:</li>
        </ul>
        <ul style="margin-left: 45px">
            <li style="width: auto">
                <div class="showText">
                    <%= schoolText%>
                </div>
            </li>
        </ul>
        <br><br>
        <ul>
            <li>社会经历:</li>
        </ul>
        <ul style="margin-left: 45px">
            <li style="width: auto">
                <div class="showText"><%= socialText%></div>
            </li>
        </ul>
        <br><br>
        <ul>
            <li>个人评价:</li>
        </ul>
        <ul style="margin-left: 45px">
            <li style="width: auto">
                <div class="showText">
                   <%= OneselfText%>
                </div>
            </li>
        </ul>
        <br>
        <br>
    <br>
</div>
</body>
</html>

在success.jsp页面,java代码与html相结合。获取request请求,得到简历的信息,输出在该页面

下面我给出我的css代码,两个jsp页面共用一个css文件

test.css

#body_box{
    margin-left: 160px;width: 950px;border: black 1px solid;
}
#photo{
    width: 106px;height: 125px;float: right;margin-right: 55px;border: black 1px solid;
}
#body_box ul{
    display: inline;
}
div ul li{
    display: inline;line-height: 55px;margin-left: 45px;width: 360px;
}
.secondLi{
    margin-left: 125px;
    padding-left: 25px;
}
input,select{
    width: 175px;
    height: 30px;
}
.inputText{
    display: inline;
    width: 175px;
    height: auto;
}
.mustW{
    color: red;
}
/*主要是success.jsp的样式*/
.showText{
    width: 590px;
    height: 105px;
    border: grey 1px solid;
    margin-left: 115px;
}
table{
    margin-left: 75px;
}
table tr td{
    width: 275px;
    height: 45px;
}

页面的美化特别重要。

猜你喜欢

转载自blog.csdn.net/clmmei_123/article/details/80936344