🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
📂文章目录
- 一、👨🎓网站题目
- 二、✍️网站描述
- 三、📚网站介绍
- 四、🌐网站演示
- 五、⚙️ 网站代码
- 🧱HTML结构代码
- 💒CSS样式代码
- 六、🥇 如何让学习不再盲目
- 七、🎁更多干货
一、👨🎓网站题目
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。
二、✍️网站描述
🏷️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>
<!-- 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 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 class="choice" 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">
<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>
💒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.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
