失眠网 > Web大学生网页作业成品——我的学校校园社团网站设计与实现(HTML+CSS+JavaScript)

Web大学生网页作业成品——我的学校校园社团网站设计与实现(HTML+CSS+JavaScript)

时间：2019-08-24 16:47:21

📂文章目录

一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、💠网站演示五、⚙️ 网站代码🧱HTML结构代码💒CSS样式代码六、🥇 如何让学习不再盲目七、🎁更多干货

一、👨‍🎓网站题目

🏫 校园班级网页设计、👨‍🎓我的班级网页、我的学校、👩‍🎓校园社团、校园运动会、等网站的设计与制作。

二、✍️网站描述

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

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。所有页面相互超链接，可到二三级页面，有多页面组成。页面样式风格统一布局显示正常，不错乱，使用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="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>首页</title><link rel="icon" href="images/logo.png" /><link rel="stylesheet" href="bootstrap-3.4.1/css/bootstrap.min.css" /><link rel="stylesheet" href="css/style.css" /><script src="js/jquery-3.6.0.js"></script><script src="bootstrap-3.4.1/js/bootstrap.min.js"></script><script src="js/main.js"></script></head><body><nav class="navbar navbar-default navbar-inverse navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand hidden-xs hidden-sm" href="index.html"><img alt="Brand" class="logo_img" src="images/logo1.png" /></a><a class="navbar-brand visible-xs" href="index.html"><img alt="Brand" class="logo_img" src="images/logo.png" /></a></div><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav navbar-right"><li class="active"><a href="index.html">首页 <span class="sr-only">(current)</span></a></li><li><a href="scenery.html">校园风景</a></li><li><a href="thought.html">思想政治</a></li><li><a href="learning.html">学术科技</a></li><li><a href="culture.html">文化体育</a></li><li><a href="#" id="op">意见提交</a></li></ul></div></div></nav><div id="carousel-example-generic" class="carousel slide hidden-xs" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li><li data-target="#carousel-example-generic" data-slide-to="1"></li><li data-target="#carousel-example-generic" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="item active"><img src="images/1.jpg" alt="..." /></div><div class="item"><img src="images/2.jpg" alt="..." /></div><div class="item"><img src="images/3.jpg" alt="..." /></div></div><a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div><div class="container index_text"><h2 class="text-center">学校社团简介篇 | 新生攻略</h2><p class="hidden-xs">亲爱的大一萌新们，欢迎你们加入中德大家庭，开启人生新篇章！作为中德新成员，你想更多的了解学校吗？小德将继续向你全方位介绍中德，让你快速认识中德，读懂中德！</p><p class="hidden-xs">今天，为大家推出学校社团简介。</p></div><div class="container"><div class="row"><div class="col-sm-6 col-md-4 col-xs-12 index"><div class="thumbnail"><a href="thought.html"><div class="img_0"><figcaption><div><h2>思想政治</h2><p>为提升我校学生爱国主义思想，为政治教育培养开辟新道路</p></div><div></div></figcaption></div></a><div class="caption"><h3>思想政治类</h3></div></div></div><div class="col-sm-6 col-md-4 col-xs-12 index"><div class="thumbnail"><a href="learning.html"><div class="img_1"><figcaption><div><h2>学术科技</h2><p>我校建立信息科技协会、3D打印社、恋天航模社、启航机电社</p></div><div></div></figcaption></div></a><div class="caption"><h3>学术科技类</h3></div></div></div><div class="col-sm-6 col-md-4 col-xs-12 index"><div class="thumbnail"><a href="learning.html"><div class="img_2"><figcaption><div><h2>文化体育类</h2><p>为充实校园文化生活，我校建立了涵盖了文化、艺术、体育等多个领</p></div><div></div></figcaption></div></a><div class="caption"><h3>文化体育类</h3></div></div></div></div></div><div class="container-fluid footer"><p class="text-center">版权所有© xxxxxxxx@</p></div><a class="fh" href="#top"><span class="glyphicon glyphicon-eject"></span></a><div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><spanaria-hidden="true">×</span></button><h4 class="modal-title" id="exampleModalLabel">意见提交</h4></div><div class="modal-body"><form><div class="form-group"><label for="recipient-name" class="control-label">您的联系方式:</label><input type="text" class="form-control" id="recipient-name"></div><div class="form-group"><label for="message-text" class="control-label">您的意见:</label><textarea class="form-control" id="message-text"></textarea></div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">提交</button></div></div></div></div></body></html>

💒CSS样式代码

* {margin: 0;padding: 0;}html {scroll-behavior: smooth;overflow-y: auto;}body {padding-top: 51px;}ul li {list-style: none;}a {text-decoration: none;}/* 首页样式 *//* #region *//* 导航栏 *//* #region */.container-fluid {padding-right: 30px;padding-left: 30px;}.navbar {border: none;border-radius: 0;margin-bottom: 0;border-bottom: 1px solid #d69e67;background: linear-gradient(to right, rgb(168, 237, 234) 0%, rgb(254, 214, 227) 100%);}.navbar-inverse .navbar-nav > .active > a {background: linear-gradient(33deg, #d279ee, #f8c390);}.logo_img {height: 46px;}.navbar-brand {padding: 2px 15px;}/* #endregion *//* 轮播 *//* #region */.carousel-inner > .item > img {width: 100%;height: 500px;object-fit: cover;}/* #endregion *//* 卡片 *//* #region */.index .thumbnail a > div:nth-of-type(1) > figcaption > div:nth-of-type(1) > h2 {color: #fff;}.index .thumbnail a > div:nth-of-type(1) > figcaption > div:nth-of-type(1) > p {color: #fff;margin-top: 60px;}.index .thumbnail a > div:nth-of-type(1) > figcaption > div:nth-of-type(1) > h2 {opacity: 0;font-size: 15px;font-weight: 700;text-transform: uppercase;padding-top: 30%;transition: transform 0.35s;}.index .thumbnail a > div:nth-of-type(1) > figcaption:hover div:nth-of-type(1) > h2 {opacity: 1;transform: translate3d(0, 20px, 0);}.index .thumbnail a > div:nth-of-type(1) > figcaption > div:nth-of-type(1) > p {font-size: 13px;font-weight: 500;opacity: 0;transition: opacity 0.35s, transform 0.35s;overflow: hidden;text-overflow: ellipsis;line-clamp: 2;display: -webkit-box;box-orient: vertical;}.index .thumbnail a > div:nth-of-type(1) > figcaption:hover div:nth-of-type(1) > p {opacity: 1;transform: translate3d(0, -20px, 0);}.index .thumbnail a > div:nth-of-type(1) > figcaption {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;cursor: pointer;padding: 20px;}.index .thumbnail a > div:nth-of-type(1) > figcaption > div:nth-of-type(1) {position: absolute;z-index: 4;left: 50%;top: 60%;text-align: center;transform: translate(-50%, -50%);}.index .thumbnail a > div:nth-of-type(1) > figcaption > div:nth-of-type(2) {background: #333;opacity: 0;width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: opacity 0.35s;}.index .thumbnail a > div:nth-of-type(1) > figcaption:hover div:nth-of-type(2) {opacity: 0.5;}.index .thumbnail a > div:nth-of-type(1) > figcaption::before {border-top: 1px solid #fff;border-bottom: 1px solid #fff;position: absolute;content: '';z-index: 5;transform: scale(0, 1);width: 80%;height: 80%;top: 30px;right: 30px;bottom: 30px;left: 30px;transition: opacity 0.35s, transform 0.35s;}.index .thumbnail a > div:nth-of-type(1) > figcaption:hover::before {transform: scale(1, 1);}.index .thumbnail a > div:nth-of-type(1) > figcaption:hover::after {transform: scale(1, 1);}.index .thumbnail a > div:nth-of-type(1) > figcaption::after {position: absolute;top: 30px;right: 30px;bottom: 30px;left: 30px;content: '';transform: scale(1, 0);width: 80%;transition: opacity 0.35s, transform 0.35s;z-index: 5;border-right: 1px solid #fff;border-left: 1px solid #fff;}.index .thumbnail a > div:nth-of-type(1) {height: 300px;width: 100%;background-size: cover;position: relative;}.caption > h3 {overflow: hidden;text-overflow: ellipsis;line-clamp: 1;display: -webkit-box;box-orient: vertical;}.img_0 {background: url('../images/4.jpg') no-repeat center;}.img_1 {background: url('../images/5.jpg') no-repeat center;}.img_2 {background: url('../images/6.jpg') no-repeat center;}/* #endregion *//* 底部 *//* #region */.footer {height: 40px;padding: 0;background: linear-gradient(33deg, #99e5a2, #d4fc78);}.footer > p {margin: 0;line-height: 40px;}.fh {bottom: 40px;position: fixed;right: 20px;width: 40px;background: linear-gradient(80deg, #f0b2c3, #fff2a5);height: 40px;text-align: center;line-height: 40px;text-decoration: none;border-radius: 5px;}.fh:hover {background: linear-gradient(80deg, #c98d9d, #cfc486);}.fh > span::before {color: #fff;font-size: 16px;}/* #endregion *//* #endregion *//* 风景 *//* #region */.sec_con {margin-top: 20px;}.sce {padding: 0;border-radius: 0;overflow: hidden;}.sce img {height: 200px;width: 100%;object-fit: cover;transition: 0.6s;}.sce img:hover {box-shadow: 0 0 10px #686161;transform: scale(1.1);}/* #endregion *//* 思想 *//* #region */.act_con {background-color: #fff;box-shadow: 0 0 10px #ee9c0e;border-radius: 10px;padding: 30px;margin-top: 10px;}.act_con h2.title {margin-bottom: 30px;overflow: hidden;}.act_con h2.title span {display: block;width: 8px;height: 28px;background-color: #f00102;margin-top: 11px;float: left;}.act_con h2.title p {color: #f00102;line-height: 50px;font-size: 24px;font-weight: 400;float: left;margin-left: 15px;}.wz {padding: 3%;overflow: hidden;}.wz p {line-height: 35px;text-indent: 2em;font-size: 14px;margin-bottom: 10px;}.wz .act {overflow: hidden;}.wz img {object-fit: cover;transition: 0.6s;width: 100%;}.wz img:hover {transform: scale(1.1);}/* #endregion *//* 媒体查询 */@media screen and (max-width: 768px) {/* .index_text {margin-top: 50px;} */.sce img {height: 400px;}}

六、🥇 如何让学习不再盲目

程序员总结给编程菜鸟的16条忠告

入门期间不要盲目看太多书，找一本网上或身边有经验程序员推荐的教材，先系统的学习。多看帮助文档，帮助文档就像一个游戏的玩法说明通关秘籍，该看就看别太自信。菜鸟容易被对象、属性、方法等词汇迷惑？那是你连最基础知识都还没掌握。不要忽视没一个看起来不起眼的问题，经常总结做到举一反三。没积累足够知识和经验前，你是开发不出一个完整项目的。把最新技术挂在嘴边，还不如把过时技术牢记心中。活到老学到老，只有一招半式是闯不了江湖的。看得懂的书，仔细看；看不懂的书，硬着头皮也要看完。书读百遍其义自见，别指望读一遍就能掌握。请把教程里的例子亲手实践下，即使案例中有完整源码。把在教程中看到的有意义的例子扩充；并将其切实的运用到自己的工作中。不要漏掉教程中任何一个习题——请全部做完并做好笔记。水平是在不断的实践中完善和发展的，你与大牛差的只是经验的积累。每学到一个难点的时候，尝试对朋友或网上分享你的心得,让别人都能看得懂说明你真的掌握。做好保存源文件的习惯，这些都是你的知识积累。遇到问题不要张口就问，要学会自己找答案，比如google、百度和w3cschool上都有很多编程相关资料，你只要输入关键字就能找到你的答案。