某某市大学生毕业生网上报到系统

创作时间:

作者:

@小白创作中心

某某市大学生毕业生网上报到系统

引用

CSDN

https://m.blog.csdn.net/qq_38514354/article/details/144212106

本文介绍了一个基于HTML+CSS+JavaScript的学生网上报到系统响应式网站的设计与实现。文章详细描述了网站的结构、布局、功能和代码实现，并提供了具体的HTML代码示例。

网站描述

这是一个学生管理系统网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明。首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。

网站布局

计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

网站程序

计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

网站素材

计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

网站文件

网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件。

网页编辑

网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。

其中：
（1）html文件包含：其中index.html是首页、其他html为二级页面；
（2）css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

网站演示

网站代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <!-- UNIFIED -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <meta  name="keywords" content="毕业报到系统前台"/>
    <meta name="description" content=""/>
    <meta name="author" content="f2e_hhf[ai]"/>
    <title>某某市大学生毕业生网上报到系统 </title>
    <!-- BS CSS -->
    <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!--main content +footer-->
    <link href="dist/css/xg_bybd.css" rel="stylesheet" media="screen">
    <!--[if lt IE 9]>
    <script src="dist/js/respond.min.js"></script>
    <script src="dist/js/html5.js"></script>
    <![endif]-->
</head>
<body>
<!-- 内容区 -->
<div class="container xg-bybd aiui">
    <div class="sys-name"><img  src="images/system-name.png"/> </div>
    <div class="row">
        <div class="col-md-2 col-sm-3 step">
            <h3>报到步骤</h3>
            <ul>
                <li class="choice" onClick="javascript:window.location.href='index.html' " ><div class="clearfix"><span class="pull-left nav-adorn"><em>1</em></span><span class="pull-left words">阅读注意事项<br/>填写身份证号</span></div></li>
                <li onClick="javascript:window.location.href='2.html'"><div class="clearfix"><span class="pull-left nav-adorn"><em>2</em></span><span class="pull-left words">毕业生报到情况登记表</span></div></li>
                <li onClick="javascript:window.location.href='3.html'"><div class="clearfix"><span class="pull-left nav-adorn"><em>3</em></span><span class="pull-left words">确认您所填写资料的正确性</span></div></li>
                <li onClick="javascript:window.location.href='5.html'"><div class="clearfix"><span class="pull-left nav-adorn"><em>4</em></span><span class="pull-left words last-w">完成报到</span></div></li>
            </ul>
            <a class="refer-btn" href="5.html">大中专毕业生报到查询</a>
        </div>
        <div class="col-md-10 col-sm-9">
            <div class="r-content">
                <em>各位应届毕业生（含往届今年到期暂缓生）：</em>
                <p>为了简化程序，方便毕业生随时随地报到,本局已在2017年开通了某某市毕业生网上报到登记系统。现将有关事项通知如下：</p>
                <p>一、请认真填写毕业生报到登记表，确保信息的真实性，不要重复报到，完成报到手续后请妥善保管好《报到证》，不需要到现场报到盖章；</p>
                <p>二、因特殊原因未能在网上报到的同学，也可选择现场报到，报到地点为某某市交通大道266号市教育局一楼政务服务大厅（暂定，搬迁后另行通知）；</p>
                <p>三、有正式单位（是指具有人事档案管理权的单位）接收的毕业生，报到登记后请将《报到证》交给单位，由单位统一到有关部门办理派遣手续；</p>
                <p>四、根据中央组织部、人社部、发展改革委、财政部、国家档案局等五部门联合下发的《关于进一步加强流动人员人事档案管理服务工作的通知》(人社部发〔2014〕90号文件)要求，从2015年起某某市教育局不再接收毕业生档案，学生档案不能自带，应由学校通过EMS邮政快递或派专人寄（送）回户籍地人才中心。2015年及以后毕业生若需查询档案，请在学校核实后到生源地人才中心查询。2015年以前毕业生如需调档，凭有人事权的单位出具调档函办理，若不是本人办理还需出具经办人身份证。</p>
                <p>五、毕业生的“户口”，在未到派出所落户前，就是你手中所持的“户口迁移证”，请务必妥善保管。若你的户口迁往地址标明迁到“某某市教育局”，只是说明将户口迁到某某（含县市区），并不是实际迁到“某某市教育局”。 需要办理入户手续的同学，凭户口迁移证回原籍派出所（入学前户口迁出的派出所）咨询办理，非本市生源（户籍）的请到接收单位所在地派出所咨询办理入户手续；</p>
                <p>六、在两年择业期内，需要办理改派至外省市的同学，请提供对方主管毕业生报到部门的《接收函》或《就业协议书》或招录文件及《报到证》直接回原毕业学校或毕业学校所在地省(直辖市)毕业生就业主管部门办理相关手续（已签单位的还需解除协议证明）；</p>
                <p>七、毕业生党组织关系转接办法：</p>
                <p>（一）、已落实学习或工作单位的毕业生党员 凡党员所去单位已建立党组织的，应当将党员组织关系转移到单位党组织；单位未建立党组织的，应当将党员组织关系转移到单位所在地或其居住地党组织。</p>
                <p>（二）、尚未落实单位的毕业生党员 尚未落实工作单位的，党员组织关系转移到父母工作单位或本人原籍居住地的基层党组织（通过县市区党委组织部门、街道乡镇党工委、社区居委会党支部逐级办理党组织接转手续）。</p>
               <em> 友情提示：</em>
                <p>一、某某市毕业生报到单位 某某市教育局行政审批服务科 地址：某某市交通大道266号（地址搬迁后另行告知） 电话：0000-8888888</p>
                <p>二、某某市毕业生（2015年及以后毕业者）档案接受单位 档案接受单位按属地管理原则，某某市市直生源毕业生档案由某某市人才服务局接受，各县市区生源毕业生档案由户口原籍人才交流服务中心接受，档案接受单位名称、地址、联系方式如下：</p>
                <p>某某市人才服务局 地址：某某市豪府北路人社办公大楼6楼 邮编：528400 电话： 0000-8888888（101室）0000-8888888 乘车路线：88路公交车到市人社局站即可</p>
                <div class="row form-s1 checkid">
                    <div class="col-sm-4 col-md-2"><label>身份证号码：</label></div>
                    <div class="col-sm-8 col-md-5"><input class="form-control" placeholder="请输身份证号码"  type="text"></div>
                    <div class="col-sm-8 col-md-4"><button type="button" class="btn btn-default blue30 btn-blue mr10">开始报到</button></div>
                </div>
                <div class="remark mt20 row">
                    <div class="col-sm-3  col-xs-1 text-right">注:</div>
                    <div class="col-xs-10 col-sm-9">
                      <p>1、请填写真实、有效的第二代身份证号码，核对无误后开始报到</p>
                      <p>2、正确的身份证号码由全部数字或末位大写X组成；</p>
                      <p>3、每个身份证号码只能报到一次，不能重复报到</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer">
    <p>技术支持:某某网络公司  更多模板：<a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
</div>
<script src="dist/js/jquery-1.7.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="dist/js/datepicker/laydate.js"></script>
</body>
</html>