-
计算机毕业设计：基于html制作大学生网上报到系统响应式模板项目源码
🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
一、👨🎓网站题目
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。
二、✍️网站描述
🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度
🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)
- 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
- 所有页面相互超链接，可到三级页面，有5-10个页面组成。
- 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
- 菜单美观、醒目，二级菜单可正常弹出与跳转。
- 要有JS特效，如定时切换和手动切换图片轮播。
- 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
- 页面清爽、美观、大方，不雷同。 。
- 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。
三、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言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代码）。
四、🌐网站演示
五、⚙️ 网站代码
🧱HTML结构代码
DOCTYPE html> <html lang="zh-cn"> <head> <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> <link href="dist/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="dist/css/xg_bybd.css" rel="stylesheet" media="screen"> 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 onClick="javascript:window.location.href='index.html' " ><div class="clearfix"><span class="pull-left nav-adorn"><em>1em>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>2em>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>3em>span><span class="pull-left words">确认您所填写资料的正确性span>div>li> <li class="choice" onclick="javascript:window.location.href='5.html'"><div class="clearfix"><span class="pull-left nav-adorn"><em>4em>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"> <div class="refer-cont"> <div class="row form-s1 checkid"> <div class="col-sm-4 col-md-3 col-md-offset-2"><label>身份证号码：label>div> <div class="col-sm-8 col-md-5 "><input class="form-control" placeholder="请输身份证号码" type="text">div> div> <p class="text-center"><button type="button" class="btn btn-default blue30 btn-blue mr10" data-toggle="modal" data-target=".popdemo_1">查询报道情况button>p> div> div> div> div> div> <div class="footer"> div> <div class="modal fade popdemo_1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false"> <div class="modal-dialog win-small"> <div class="modal-content aiui"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button> <h4 class="modal-title" id="myModalLabel">系统提示h4> div> <div class="modal-body "> <div class="bot-box"> <h4>您还没进行报到登记，h4> <h4>请先进行报到并录入相关信息!h4> div> div> <div class="modal-footer"> <p class="text-center"> <button type="button" class="btn btn-default save-btn" data-dismiss="modal" onClick="javascript:window.location.href='index.html' ">确认前往报到button> p> div> div> div> 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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
💒CSS样式代码
@charset "utf-8"; /* For 某某市_毕业生报到系统 前端; 视觉图 & web页面创建: 2017-6-26 艾 ; 适用:wap,web 向下兼容ie8 基于BS响应式布局下的自定义渲染 */ body{background: url("../../images/top_bg.jpg") no-repeat top center fixed; position: absolute; min-height: 100%; width: 100%; top: 0; left: 0; font-family:Microsoft YaHei, Helvetica, Arial, sans-serif } .aiui .blue24{ padding: 2px 10px;} .aiui .blue30{ padding: 4px 10px;} .aiui .blue24:hover,.aiui .blue30:hover,.aiui .blue24:active,.aiui .blue30:active{border-color: #03a9f4; color: #03a9f4!important; background: #fff;} .aiui .btn-blue,.save-btn{padding-left: 10px; padding-right: 10px; background: #03a9f4; border-color:#03a9f4; color: #fff } .aiui .btn-blue:hover, .save-btn:hover{background: #1b7aa8; color: #fff!important;; border-color:#1b7aa8 } .cancel-btn{background: #737373; color: #fff!important; border-color:#737373;} .cancel-btn:hover,.cancel-btn:active{ background: #505050; color: #fff;border-color:#505050;} .save-btn,.cancel-btn{ padding-left: 25px; padding-right: 25px; margin: 0 5px;} .org-btn{padding: 15px 25px; font-size: 20px; background: #f57200; color: #fff; border-color: #f57200;} .org-btn:hover{background: #f5600a; color: #fff;border-color: #f5600a;} .laydate_box,.laydate_box *{box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;} .aiui .btn-blue:active,.save-btn:active{background-color: #0288d1;} .aiui .checkbox,.aiui .radio{ width: 15px; height: 15px; border: 1px solid #dadada; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin:2px 5px 0 0;cursor: pointer; } .aiui .radio{border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; } .aiui .radio-box,.aiui .radio-box li{ margin: 0; } .aiui .radio-box li.r-selected > .radio:after{ border-radius: 40%; -webkit-border-radius: 40%; -moz-border-radius: 40%;} .aiui .c-selected,.aiui .radio-box li.r-selected > .radio{ border: 1px solid #27b0f2; position: relative;} .aiui .radio-box li.r-selected > .radio:after,.aiui .c-selected:after{ content:''; display:block; width:100%; height:100%; position: absolute; left: 0; top: 0; background:#27b0f2 url("../../images/rsda_icon.png") no-repeat -36px -1px; } .aiui .c-selected:after{ background-position: -1px -1px;} .aiui .checkbox > input,.aiui .radio > input{ margin: 0; visibility: hidden;} .aiui .w-select i{ position: absolute; right: 6px; top: 9px;} .aiui .w-select{ color: #333;} .mr20{ margin-right: 20px!important;} .ml20{margin-left: 30px!important;} .ml10{ margin-left: 10px!important;} .mr10{margin-right: 10px!important;} .mt10{ margin-top: 10px!important;} .mt20{margin-top: 20px!important;} .timeicon{background:url(../../images/timeico.jpg) no-repeat right 4px} .modal-footer{ text-align:center; border-top:none;} .xg-bybd{ margin:0 auto 80px;} .xg-bybd .form-s1 label,.xg-bybd .form-s1 span.text-left{min-width: 110px; padding: 0 10px; font-weight: 400; vertical-align: middle;line-height: 2em;} .xg-bybd .form-s1 span.text-left{font-weight: bold;} .xg-bybd .step ul,.xg-bybd .step li{ margin: 0; padding: 0; list-style: none;} .xg-bybd .sys-name{ width: auto; height: 230px;} .xg-bybd .sys-name img{ margin: 40px 0 0 20px;} .xg-bybd .step{ padding: 0;} .xg-bybd .step h3{ font-size: 20px; padding: 15px 20px 15px; margin: 0; color: #fff; background:#0270cf url("../../images/tit-bg.png") no-repeat right 0; font-weight: bold;} .xg-bybd .step ul li{ padding:0 0 60px;cursor: pointer;} .xg-bybd .step ul li span.nav-adorn{background: url("../../images/nav-adorn.png") no-repeat 0 -54px; } .xg-bybd .step .words{ font-size: 1.1em; line-height: 1.8em; color: #888;} .xg-bybd .step .last-w{padding-top: 15px;} .xg-bybd .r-content{border: 1px solid #dfdfdf; background: #fff; padding: 30px; line-height: 24px;min-height: 180px;} .xg-bybd .r-content p{text-indent: 2em;} .xg-bybd .r-content > em{ margin-bottom: 20px; display: inline-block; font-style: normal;} .xg-bybd .r-content .remark div,.xg-bybd .r-content .remark p{ color: #f33; text-indent: 0;} .xg-bybd .sheet .tips{color: #888;} .xg-bybd .sheet .radio-box .radio{ margin: 5px 5px 0 0;} .xg-bybd li span.nav-adorn{ width: 62px; height:53px;} .xg-bybd li span.nav-adorn em{ display: block; margin-left:18px;font:600 30px/1.8em Arial; color: #fff;} .xg-bybd li.choice .words{color:#333;} .xg-bybd li.choice .nav-adorn{background-position: 0 0!important;} .xg-bybd .r-content .w-select i{ position: absolute; right: 6px; top: 9px;} .xg-bybd .r-content .w-select:hover,.xg-bybd .r-content.w-select:focus{ color: #333; text-decoration: none; cursor: pointer;} .xg-bybd .list-value > ul{ max-height: 200px; overflow-y: auto; width: 100%;} .refer-btn{ display: block; height: 60px; background:#f3f3f3 url("../../images/tit-bg.png") no-repeat;border-top: 1px #ccc dashed; padding: 10px 70px 0 20px; font-weight: 900;} .refer-cont{ width: 80%; padding: 320px 0 20px; background: url("../../images/idpic.png") no-repeat 50% 30%; margin: 0 auto;} .footer{background:#2878c0; padding: 15px 0 10px; text-align: center; color: #fff; width:100%; position: absolute; bottom: 0;} .footer p{ margin: 0;} .idpic,.idpic img{ width: 160px; height: 100px; position: relative;} .idpic a{ display: block; width: 100%; line-height: 30px; text-align: center; color: #fff; font-weight: 900; position: absolute; text-decoration: none; left: 0; bottom: 0; background: url("../../images/idpic-bg.png") repeat;} .idpic a:hover{-webkit-transition: all 0.25s ease-out 0s;-moz-transition: all 0.25s ease-out 0s;transition: all 0.25s ease-out 0s;height:100%; line-height:106px;} @media (max-width: 767px){ .xg-bybd .step{ padding-left: 15px; padding-right: 15px;} .xg-bybd .sys-name{height: 170px;} .xg-bybd .sys-name img{ width: 90%; height: auto;} .xg-bybd .step ul{ padding: 40px 10px; background: #fff;} .xg-bybd .step ul li:last-child{padding:0;} .xg-bybd .r-content .form-s1 > div{ margin-bottom: 10px;} .xg-bybd .step ul li{ padding:0 0 10px;cursor: pointer;} .xg-bybd .form-s1 label{text-align: left;} .aiui .w-select,.xg-bybd .w-select + .dropdown-menu{ min-width: 100%;} .refer-btn{background-position: right -84px;} .refer-cont{background-size: 80%;} } @media (min-width: 768px){ .xg-bybd .step ul{ padding-top: 40px;} .xg-bybd .step .words{max-width: 110px;} .xg-bybd .r-content .checkid{ margin: 50px 0;} .xg-bybd .form-s1 label{text-align:right;} .aiui .w-select,.xg-bybd .w-select + .dropdown-menu{ min-width: 100%;} .refer-btn{ background-position: -15px -83px;} .win-small{ width: 480px;} .win-small .modal-body { padding: 30px 60px; } } @media (min-width: 992px){ .xg-bybd .step .words{max-width: 96px;} .xg-bybd .sheet .btn + .tips{ margin-left: 40px;} .refer-btn{ background-position: -20px -83px;} } @media (min-width: 1200px){ .xg-bybd{ padding: 0;} .xg-bybd .row{ margin: 0;} .xg-bybd .sheet .btn + .tips{ margin-left: 60px;} .xg-bybd .step .words{max-width: 110px; padding-left: 10px;} .refer-btn{ background-position: -15px -83px;} } @-ms-viewport { width: device-width; } @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } /*调出iconfont*/ @font-face{font-family:qky-icon;src:url(../fonts/iconfont.eot);src:url(../fonts/iconfont.eot) format('embedded-opentype'),url(../fonts/iconfont.woff) format('woff'),url(../fonts/iconfont.ttf) format('truetype'),url(../fonts/iconfont.svg#iconfont) format('svg')} .qky-icon{font-family:qky-icon!important;font-size:14px;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:.2px;-moz-osx-font-smoothing:grayscale;margin-right:5px}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
六、🥇 如何让学习不再盲目
第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识第三、学到了就要用到
有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
-
相关阅读:
网络安全就业形势怎么样?
Linux终端、关机、ldd、ldconfig等系统命令
从0开始学汇编第一天：基础知识
网络适配器设置步骤
齐岳离子液体[C1MIm]SbF6/cas:885624-41-9/1,3-二甲基咪唑六氟锑酸盐/分子式:C5H9F6N2Sb
设计模式之单列模式
鱼类eDNA生物多样性检测重磅来袭！
【就业必备知识】大学毕业如何处理档案和户口，小心变成死档和黑户
为element-ui对话框组件(el-dialog)添加弹窗拖拽支持
Nginx之memcached_module模块解读
- 原文地址：https://blog.csdn.net/m0_73081085/article/details/127916939