web前端期末大作业：基于HTML+CSS+JavaScript学校教育主题-卡通风格在线职业教育网页设计 (14页)
【摘要】 🎉精彩专栏推荐 💭文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台...
🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 echarts大屏展示大数据平台可视化(150套) 】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！
@TOC
一、👨🎓网站题目
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。
二、✍️网站描述
🏷️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><!-- InstanceBegin template="/Templates/dwt.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="utf-8">
<meta name="author" content="order by dede58.com/" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>XXX职业教育在线测评与学习平台</title>
<link rel="stylesheet" href="css/course.css"/>
<script src="js/jquery-1.8.0.min.js"></script>
<link rel="stylesheet" href="css/tab.css" media="screen">
<script src="js/jquery.tabs.js"></script>
<script src="js/mine.js"></script>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="head" id="fixed">
<div class="nav">
<span class="navimg"><a href="index.html"><img border="0" src="picture/logo.png"></a></span>
<ul class="nag">
<li><a href="courselist.html" class="link1 current">课程</a></li>
<li><a href="articlelist.html" class="link1">资讯</a></li>
<li><a href="teacherlist.html" class="link1">讲师</a></li>
<li><a href="exam_index.html" class="link1" target="_blank">题库</a></li>
<li><a href="askarea.html" class="link1" target="_blank">问答</a></li>
</ul>
<span class="massage">
<!--<span class="select">
<a href="#" class="sort">课程</a>
<input type="text" value="关键字"/>
<a href="#" class="sellink"></a>
<span class="sortext">
<p>课程</p>
<p>题库</p>
<p>讲师</p>
</span>
</span>-->
<!--未登录-->
<span class="exambtn_lore">
<a class="tkbtn tklog" href="login.html">登录</a>
<a class="tkbtn tkreg" href="register.html">注册</a>
</span>
<!--登录后-->
<!--<div class="logined">
<a href="mycourse.html" onMouseOver="logmine()" style="width:70px" class="link2 he ico" target="_blank">sherley</a>
<span id="lne" style="display:none" onMouseOut="logclose()" onMouseOver="logmine()">
<span style="background:#fff;">
<a href="mycourse.html" style="width:70px; display:block;" class="link2 he ico" target="_blank">sherley</a>
</span>
<div class="clearh"></div>
<ul class="logmine" >
<li><a class="link1" href="#">我的课程</a></li>
<li><a class="link1" href="#">我的题库</a></li>
<li><a class="link1" href="#">我的问答</a></li>
<li><a class="link1" href="#">退出</a></li>
</ul>
</span>
</div>-->
</span>
</div>
</div>
<!-- InstanceBeginEditable name="EditRegion1" -->
<div class="coursecont">
<div class="coursepic">
<div class="course_img"><img src="picture/c1.jpg" width="500"></div>
<div class="coursetitle">
<a class="state">更新中</a>
<h2 class="courseh2">会计基础</h2>
<p class="courstime">总课时：<span class="course_tt">30课时</span></p>
<p class="courstime">课程时长：<span class="course_tt">3小时20分</span></p>
<p class="courstime">学习人数：<span class="course_tt">25987人</span></p>
<p class="courstime">讲师：马老师</p>
<p class="courstime">课程评价：<img width="71" height="14" src="picture/evaluate5.png"> <span class="hidden-sm hidden-xs">5.0分（10人评价）</span></p>
<!--<p><a class="state end">完结</a></p>-->
<span class="coursebtn"><a class="btnlink" href="coursecont1.html">加入学习</a><a class="codol fx" href="javascript:void(0);" onClick="$('#bds').toggle();">分享课程</a><a class="codol sc" href="#">收藏课程</a></span>
<div style="clear:both;"></div>
<div id="bds">
<div class="bdsharebuttonbox">
<a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
<a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
<a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
<a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
<a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
<a href="#" class="bds_more" data-cmd="more"></a>
<a class="bds_count" data-cmd="count"></a>
</div>
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到：","viewSize":"24"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
</div>
</div>
<div class="clearh"></div>
</div>
<div class="clearh"></div>
<div class="coursetext">
<h3 class="leftit">课程简介</h3>
<p class="coutex">本课程主要针对重新改版后的新大纲会计从业资格考试的学习，主要为零基础学生顺利通过会计从业考试而设立！内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列。 本教程为2014最新版教材课程详细讲解，学完后可以直接考证，也可以提高会计业务基础知识</p>
<div class="clearh"></div>
<h3 class="leftit">课程目录</h3>
<dl class="mulu">
<dt><a href="coursecont1.html" class="graylink">第一章 总论</a></dt>
<dd>内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列。内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列</dd>
<dt><a href="#" class="graylink">第二章 会计要素与会计等式</a></dt>
<dd>内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列。内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列</dd>
<dt><a href="#" class="graylink">第三章 会计科目与账户</a></dt>
<dd>内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列。内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列</dd>
<dt><a href="#" class="graylink">第四章 会计记账方法</a></dt>
<dd>内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列。内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列</dd>
<dt><a href="#" class="graylink">第五章 借贷记账法下主要经济业务的账务处理</a></dt>
<dd>介绍ISO/OSI七层模型、TCP/IP四层模型、IP地址、DNS、端口、网关等网络知识，为Linux的网络配置打好基础。</dd>
<dt><a href="#" class="graylink">第六章 会计凭证</a></dt>
<dd>内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列。内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列</dd>
<dt><a href="#" class="graylink">第七章 会计账簿</a></dt>
<dd>介绍ISO/OSI七层模型、TCP/IP四层模型、IP地址、DNS、端口、网关等网络知识，为Linux的网络配置打好基础。</dd>
<dt><a href="#" class="graylink">第八章 账务处理程序</a></dt>
<dd>介绍ISO/OSI七层模型、TCP/IP四层模型、IP地址、DNS、端口、网关等网络知识，为Linux的网络配置打好基础。</dd>
<dt><a href="#" class="graylink">第九章 财产清查</a></dt>
<dd>介绍ISO/OSI七层模型、TCP/IP四层模型、IP地址、DNS、端口、网关等网络知识，为Linux的网络配置打好基础。</dd>
<dt><a href="#" class="graylink">第十章 财务报表</a></dt>
<dd>内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列。内容包括会计基础、财经法规和职业道德、电算化三科视频课程全系列</dd>
</dl>
</div>
<div class="courightext">
<div class="ctext">
<div class="cr1">
<h3 class="righttit">授课讲师</h3>
<div class="teacher">
<div class="teapic ppi">
<a href="teacher.html" target="_blank"><img src="picture/teacher.png" width="80" class="teapicy" title="张民智"></a>
<h3 class="tname"><a href="teacher.html" class="peptitle" target="_blank">张民智</a><p style="font-size:14px;color:#666">会计讲师</p></h3>
</div>
<div class="clearh"></div>
<p>十年以上Linux从业经验， 培训经验超过八年。在各 个知名培训机构做过金牌 讲师、学科负责人，培训 学员过万人。曾获红帽认 证讲师，微软认证讲师等 资质认证。教学以逻辑性 强、教学细致、知识点准 确著称。</p>
</div>
</div>
</div>
<div class="ctext">
<div class="cr1">
<h3 class="righttit">课程公告</h3>
<div class="gonggao">
<div class="clearh"></div>
<p>人所缺乏的不是才干而是志向，不是成功的能力而是勤劳的意志。<br/>
<span class="gonggao_time">2014-12-12 15:01</span>
</p>
<div class="clearh"></div>
<p>请学习的同学在每节课学习后务必做完当节课的测试！<br/>
<span class="gonggao_time">2014-12-12 15:01</span>
</p>
<div class="clearh"></div>
</div>
</div>
</div>
<div class="ctext">
<div class="cr1">
<h3 class="righttit">相关课程</h3>
<div class="teacher">
<div class="teapic">
<a href="#" target="_blank"><img src="picture/c1.jpg" height="60" title="财经法规与财经职业道德"></a>
<h3 class="courh3"><a href="#" class="peptitle" target="_blank">财经法规与财经职业道德</a></h3>
</div>
<div class="clearh"></div>
<div class="teapic">
<a href="#" target="_blank"><img src="picture/c2.jpg" height="60" title="财经法规与财经职业道德"></a>
<h3 class="courh3"><a href="#" class="peptitle" target="_blank">财经法规与财经职业道德</a></h3>
</div>
<div class="clearh"></div>
<div class="teapic">
<a href="#" target="_blank"><img src="picture/c3.jpg" height="60" title="财经法规与财经职业道德"></a>
<h3 class="courh3"><a href="#" class="peptitle" target="_blank">财经法规与财经职业道德</a></h3>
</div>
<div class="clearh"></div>
</div>
</div>
</div>
</div>
<div class="clearh"></div>
</div>
<!-- InstanceEndEditable -->
<div class="clearh"></div>
<div class="foot">
<div class="fcontainer">
<div class="fwxwb">
<div class="fwxwb_1">
<span>关注微信</span><img width="95" alt="" src="picture/num.png">
</div>
<div>
<span>关注微博</span><img width="95" alt="" src="picture/wb.png">
</div>
</div>
<div class="fmenu">
<p><a href="#">关于我们</a> | <a href="#">联系我们</a> | <a href="#">优秀讲师</a> | <a href="#">帮助中心</a> | <a href="#">意见反馈</a> | <a href="#">加入我们</a></p>
</div>
<div class="copyright">
<div><a href="/">XXX网</a>所有 晋ICP备XXX号-9</div>
</div>
</div>
</div>
<!--右侧浮动-->
<div class="rmbar">
<span class="barico qq" style="position:relative">
<div class="showqq">
<p>官方客服QQ:<br>XXX</p>
</div>
</span>
<span class="barico em" style="position:relative">
<img src="picture/num.png" width="75" class="showem">
</span>
<span class="barico wb" style="position:relative">
<img src="picture/wb.png" width="75" class="showwb">
</span>
<span class="barico top" id="top">置顶</span>
</div>
</body>
<!-- InstanceEnd --></html>
💒CSS样式代码
@charset "utf-8";
/*选项卡*/
* {
margin: 0;
padding: 0;
list-style-type: none;
}
a,img {
border: 0;
}
body {
height: 100%;
}
#title {
width: 300px;
margin: 3% auto 0;
}
#title h2 {
font-size: 18px;
}
#wrapper {
width: 980px;
margin: 0 auto;
background: #f8f8f8;
border: 1px solid #a3a3a3;
padding: 20px 20px 50px;
border-radius: 5px;
-moz-border-radius: 5px;
}
#wrapper h3 {
color: #333;
font-size: 14px;
text-align: center;
margin: 20px 0;
}
/* box */
.box {
width: 700px;
margin: 10px auto 0;
}
.box1 {
width: 100%
}
.tab_menu {
overflow: hidden;
}
.tab_menu.tabul {
width: 630px;
margin: 0 auto
}
.tab_menu.tabul li {
width: 150px;
float: left;
height: 40px;
line-height: 40px;
color: #666;
background: #fff;
text-align: center;
cursor: pointer;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 18px;
font-weight: normal;
margin-right: 5px;
}
.tab_menu li {
width: 70px;
float: left;
height: 30px;
line-height: 30px;
color: #333;
background: #fff;
text-align: center;
cursor: pointer;
border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
font-size: 14px;
font-weight: bold
}
.tab_menu li.current {
color: #fff;
background: #fb5e55;
}
.tab_menu li a {
color: #fff;
text-decoration: none;
}
.tab_menu li.current a {
color: #333;
}
.tab_box {
padding-top: 10px;
padding-bottom: 10px;
}
.tab_box li {
overflow: hidden;
}
.tab_box li span {
font-family: "微软雅黑";
font-weight: 400;
}
.tab_box .hide {
display: none;
}}
/*登录注册弹出框选项卡*/
.demo3.rlog {
width: 300px;
}
.tab_menu.rlog {
width: 443px;
}
.tab_menu.rlog li {
width: 80px;
background: none;
font-size: 22px;
text-align: left;
height: 40px;
line-height: 45px;
font-weight: normal;
padding-left: 20px;
}
.tab_menu.rlog li.current {
color: #3eb0e0;
font-weight: bold;
}
.demo3.rlog .tab_menu.rlog {
border-bottom: 1px solid #ccc;
}
六、🥇 如何让学习不再盲目
第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。
第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识
第三、学到了就要用到
有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。
七、🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬
!
💂【获取方式】
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）