簡單的在線簡歷

 

這個簡歷,我還沒有完成接收圖片的功能。還沒有寫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;
}

頁面的美化特別重要。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章