html网页设计大学生作业成品——公益校园网站设计与实现(HTML+CSS+JavaScript)

news2024/12/25 8:58:35

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码:【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码: 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南: 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师,技术组长,教学总监;曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰,难凉热血;多年过去,历经变迁,物是人非。 然而,对于技术的探索和追求从未停歇。 💪坚持原创,热衷分享,初心未改,继往开来!


📂文章目录

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


一、👨‍🎓网站题目

💗 爱心公益网页设计 、关爱老人网页、公益校园安全、公益扫黑除恶、等网站的设计与制作。


二、✍️网站描述

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

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

  1. 页面分为页头、菜单导航栏(最好可下拉)、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接,可到二三级页面,有多页面组成。
  3. 页面样式风格统一布局显示正常,不错乱,使用Div+Css技术。
  4. 菜单美观、醒目,二级菜单可正常弹出与跳转。
  5. 可选有JS特效,如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素,如gif、视频、音乐,表单技术的使用。
  7. 页面清爽、美观、大方,不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来,还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

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

📓网站程序方面:计划采用最新的网页编程语言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>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div class="main" >

<div  class="content12">
<div class="daohang">





<div class="img"><img src="images/1.jpg"></div>
 


<ul>
<li class="active"><a href="index.html">首页</a>
</li>
<li ><a href="guanyu.html">关于</a></li>
<li ><a href="xiaochuyinhuan.html">消除隐患</a></li>
<li ><a href="anquanchangshi.html">安全常识</a></li>
<li ><a href="yingduifangfa.html">应对方法</a></li>
<li ><a href="anquanbiaoyu.html">安全标语</a></li>
<li ><a href="anjianshili.html">案件实例</a></li>
<li ><a href="dengluzhuce.html">登录注册</a></li>
 
</ul>





</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="guanggaotupian">


<div class="img">
<img src="images/2.jpg"></div>
 

</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="taitou">








<div class="title">
关于<span><i></i></span>
<div class="stitle">GUANYU</div>
					

				</div>




	  	  </div>
<div class="gy">













<div class="text">


<div class="list">
<img src="images/3.jpg" class="img" >
 
</div>

校园安全与每个师生、家长和社会都有着密切的关系。从广义上讲,校园事故是指学生在校期间,由于某种偶然突发的因素而导致的人为伤害事件。就其特点而言,一般是因为责任人疏忽大意过失失职而不是因为故意而导致事故的发生。<br><br>2017年12月,校园安全入选2017年民生热词榜。
</div>


<div class="clear"></div>

<div class="slist">
<img src="images/4.jpg" class="simg" >
 
</div>


 














</div>
</div>
<div class="clear"></div>

<div  class="content4">
<div class="taitou">








<div class="title">
消除隐患<span><i></i></span>
<div class="stitle">XIAOCHUYINHUAN</div>
					

				</div>




	  	  </div>
<div class="xcyh">







<ul>
<li>

<div class="text">
<div class="img"><img src="images/5.jpg"></div>
<div class="desc"><div class="title">提高意识</div></div>
</div>

<div class="stext">
<div class="sdesc">地方各级教育行政部门和中小学校要与当地公安机关和共青团、少先</div>
</div>
<div class="clear"></div>


</li>
<li>

<div class="text">
<div class="img"><img src="images/6.jpg"></div>
<div class="desc"><div class="title">齐抓共管</div></div>
</div>

<div class="stext">
<div class="sdesc">地方各级教育行政部门要继续加强与公安、安监、卫生、文化、建设</div>
</div>
<div class="clear"></div>


</li>
<li>

<div class="text">
<div class="img"><img src="images/7.jpg"></div>
<div class="desc"><div class="title">落实措施</div></div>
</div>

<div class="stext">
<div class="sdesc">落实《公安机关维护校园及周边治安秩序八条措施》&nbsp;
</div>
</div>
<div class="clear"></div>


</li>
 
</ul>

</div>
</div>

<div  class="content4">
<div class="taitou">








<div class="title">
美图<span><i></i></span>
<div class="stitle">MEITU</div>
					

				</div>




	  	  </div>
<div class="xiangceliebiao">



<ul>
<li>
<div class="img"><img src="images/8.jpg"></div>
</li>
<li>
<div class="img"><img src="images/9.jpg"></div>
</li>
<li>
<div class="img"><img src="images/10.jpg"></div>
</li>
 
</ul>

</div>
</div>

<div  class="content4">
<div class="taitou">








<div class="title">
安全标语<span><i></i></span>
<div class="stitle">ANQUANBIAOYU</div>
					

				</div>




	  	  </div>
<div class="aqby">






















<div class="img">
<img src="images/11.jpg" class="img">
 
</div>

<div class="clear"></div>

<div class="title">安全标语</div>

<div class="clear"></div>




<br><br>

1、营造校园安全氛围,创造温馨学习环境。
<br><br>2、 安全伴我在校园,我把安全带回家。<br><br>3、 维护校园安全,营造和谐环境。<br><br>4、 增强师生防范意识,营造校园安全环境。<br><br>5、 我要安全、我懂安全、事事安全、人人安全。<br><br>6、 生命至高无上,安全责任为天。<br><br>7、 倡导安全文明风尚,提高全民安全意识。<br><br>8、 以人为本,平安为先,加快建设平安校园。<br><br>9、 关注校园安全,构建人文和谐。<br><br>10、 加强安全管理,建设平安校园。<br><br>11、 安全在我心中,生命在我手中。<br><br>12、 跨进校园,走进平安,建设平安校园,你我共同的责任。


<div class="clear"></div>

<div class="list">
<img src="images/12.jpg" class="simg">
<img src="images/13.jpg" class="simg">
 
</div>



 














</div>
</div>
<div class="clear"></div>

<div  class="content12">
<div class="dibu">

<div class="desc">
校园安全 
</div>


</div>
</div>
<div class="clear"></div></div></body></html>



💒CSS样式代码

@charset "utf-8";
*{margin:0;padding:0;}
body{margin:0 auto}
.clear{ clear:both;}
a{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
li{list-style-type:none;}
img{width:auto;max-width:100%;}
.main{width:1200px;margin:0 auto;overflow:visible;}

.content12{width:1200px;margin:0 auto;}


.daohang {
width:1200px;background:#990033;float:left;

}
.daohang .img{
width:226px;
float:left;

}

.daohang .img img{
width:200px;height:90px;
float:left;
}



.daohang ul{
width:934px;
background:#990033;float:left;
}

.daohang ul li{
float:left;
width:100px; 
text-align:center;
height:90px;line-height:90px;color:#fff;position: relative;
}


.daohang ul li a.active{
color:#fff;}
.daohang ul li a{
color:#fff;}
 
.daohang li:hover a{
color:#fff;}









.guanggaotupian
{
text-align:center;

}
.guanggaotupian img
{
width:1200px;

}





.taitou .title {
margin-bottom: 40px;
    text-align: center;
    font-size: 24px;
	margin-left:5px;
	margin-right:5px;
	margin-top: 10px;
}

.taitou  span {
    display: block;
    border-bottom: 1px solid #eee;
    margin-top: 10px;
}



.taitou  i {
    display: block;
    height: 2px;
    width: 70px;
    content: '';
    background:#990033;
    margin: 0 auto -1px;
}

.taitou  .stitle {
display: block;
    margin-top: 10px;
    font-size: 12px;
    text-transform: uppercase;
}






.yonghubiaodan 
{
width:1200px;

}

.yonghubiaodan  form
{

line-height:40px;
}
.yonghubiaodan select{
width:1180px;text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#000000;border-top-style:solid;border-top-width:1px;border-left-color:#000000;border-left-style:solid;border-left-width:1px;border-right-color:#000000;border-right-style:solid;border-right-width:1px;
}

.yonghubiaodan checkbox,radio{
text-align:left;
margin:0px 10px;

overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#000000;border-top-style:solid;border-top-width:1px;border-left-color:#000000;border-left-style:solid;border-left-width:1px;border-right-color:#000000;border-right-style:solid;border-right-width:1px;
}


.yonghubiaodan input{
width:1180px;text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#000000;border-top-style:solid;border-top-width:1px;border-left-color:#000000;border-left-style:solid;border-left-width:1px;border-right-color:#000000;border-right-style:solid;border-right-width:1px;

}

.yonghubiaodan textarea{
width:1180px;text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
width:300px;

height:100px;line-height:100px;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#000000;border-top-style:solid;border-top-width:1px;border-left-color:#000000;border-left-style:solid;border-left-width:1px;border-right-color:#000000;border-right-style:solid;border-right-width:1px;

}


.yonghubiaodan .title
{
margin:0px 10px;
}
.yonghubiaodan button{
width:1180px;
padding:5px 10px;
margin:10px 0px  0px 10px;
text-align:center;
line-height:40px;height:40px;line-height:40px;border-bottom-color:#000000;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#000000;border-top-style:solid;border-top-width:1px;border-left-color:#000000;border-left-style:solid;border-left-width:1px;border-right-color:#000000;border-right-style:solid;border-right-width:1px;
}






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

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

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

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦!

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者,一起探讨 前端 Node 知识,互相学习」!

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/65668.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1.Spring概述(Spring官方文档总结)

目录 1.1jdk环境依赖 1.2 Spring介绍 1.3 Spring历史 1.4 设计理念 1.1 jdk环境依赖 从Spring Framework 5.1开始&#xff0c;Spring需要JDK 8 (Java SE 8)&#xff0c;并提供对JDK 11 LTS的开箱即用支持。建议将Java SE 8 update 60作为Java 8的最低补丁版本&#xff0c;但…

由于找不到qt5core.dll,无法继续执行代码的问题

由于找不到qt5core.dll,无法继续执行代码的问题处理&#xff0c;其实和平常的dll缺失处理方法是差不多的 一. 下载qt5core.dll文件来解决 1.在百度搜索qt5core.dll这个dll文件&#xff0c;并且下载到自己的电脑 2.或者是直接在别人的电脑找qt5core.dll&#xff0c;然后拷贝到…

(附源码)ssm医护服务平台 毕业设计 260954

SSM医护服务平台 摘 要 随着互联网趋势的到来&#xff0c;各行各业都在考虑利用互联网将自己推广出去&#xff0c;最好方式就是建立自己的互联网系统&#xff0c;并对其进行维护和管理。在现实运用中&#xff0c;应用软件的工作规则和开发步骤&#xff0c;采用Java技术建设医护…

XFINIUM.PDF CROSS-PLATFORM BUNDLE 11.1.2

轻松将您的 PDF 应用程序移植到其他平台。 XFINIUM.PDF CROSS-PLATFORM BUNDLE 是一个用于跨平台 PDF 开发的库。在所有支持的平台&#xff08;.NET、Windows Forms、Xamarin.Mac、ASP.NET Webforms 和 MVC、控制台应用程序、Windows 服务、Mono、Windows Presentation Foundat…

Python.02.语法进阶

目录 基本运算符 比较运算符 赋值运算符 多变量赋值 逻辑运算符 案例&#xff1a; 案例实现源码如下 三元运算符 条件语句 循环语句 1.计算0-100的求和 2.for循环数组求和 3.range定义一个1-100的奇数数组,for循环求出数组的和 4.while...else...语法 基本运算符 比较…

联通物联网卡激活方法

科技的发展日新月异&#xff0c;我们国家的发展战略也是支持高新科技公司的发展&#xff0c;所以越来越多的高新科技公司出现&#xff0c;但凡是高新科技公司&#xff0c;在设备的联网中&#xff0c;都会用到物联卡&#xff0c;所以物联卡的市场也愈发火爆&#xff0c;那么今天…

Web前端大作业——基于HTML+CSS+JavaScript仿英雄联盟LOL游戏网站

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

pytorch复习笔记--nn.Embedding()的用法

目录 1--nn.Embedding()的用法 2--实例展示&#xff1a; 3--注意的问题 1--nn.Embedding()的用法 import torch.nn as nnembedding nn.Embedding(num_embeddings 10, embedding_dim 256) nn.Embedding()产生一个权重矩阵weight&#xff0c;其shape为&#xff08;num_em…

图解:Go Mutext

Mutex 可能处于两种不同的模式&#xff1a;正常模式和饥饿模式。 正常模式下获取Mutex 在正常模式下&#xff0c;新来的G会尝试自旋获取锁&#xff0c;如果自旋获取失败&#xff0c;则会按照FIFO的顺序排队获取锁。 当Mutex被释放&#xff0c;会唤醒等待队列中第一个等待者G&…

[附源码]计算机毕业设计求职招聘网站Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Spring框架的介绍、工厂设计模式以及Spring环境的搭建

spring崇尚&#xff1a;不重复的造轮子 二、工厂设计模式 工厂设计模式&#xff1a;工厂生产对象(配置文件properties反射) Spring创建对象的实现原理: 根据配置文件的id得到对应的class属性值,根据反射,通过类全路径创建对象; 通过配置文件,通过工厂设计模式,有反射动态创…

matlab knn方法快速实现,手把手教学

目录介绍话不多说&#xff0c;进入实战注意事项KNN算法的优势和劣势介绍 1968年&#xff0c;Cover和Hart提出K近邻算法。该算法既可以用于回归也可以用于分类&#xff0c;其用于分类时其输入为实例的特征向量&#xff0c;输出为实例的类别。假设给定一个训练数据集&#xff0c…

PsiQuantum宣布在容错量子计算架构方面取得新突破

&#xff08;图片来源&#xff1a;网络&#xff09; 12月2日&#xff0c;PsiQuantum宣布了一项突破性技术&#xff0c;该技术将使编译应用程序在运行时效率提高约50倍。可以更有效地实现容错量子计算。 该技术专门针对容错量子计算机的算法&#xff0c;而不是非容错的NISQ系统。…

linux倒序查看占用cpu或内存最多的进程

一、获取当前系统占用CPU最高的前10个进程 命令&#xff1a;ps aux|head -1;ps aux|sort -rn -k3|head -10 该命令组合由2条独立的命令组成&#xff1a; ps aux|head -1&#xff1a;这一句是为了获取标题&#xff08;USER PID %CPU %MEN VSZ RSS TTY STAT START TIME COMMAND…

儿童学生护眼台灯哪个牌子好?双十二儿童护眼台灯精选

我国儿童以及青少年的近视人数迅速增加&#xff0c;主要是不注意用眼时间&#xff0c;不良好的照明光线&#xff0c;拥有一个明亮舒适的光线环境&#xff0c;能大大减少近视概率&#xff0c;推荐合适的儿童护眼台灯给大家。 TOP1&#xff1a;南卡护眼台灯L1 推荐指数&#xf…

每天一个面试题:ThreadLocal底层原理和实现Demo(12.6.2022)

ThreadLocal底层原理和实现Demo每天一个面试题&#xff1a;ThreadLocal实现ThreadLocal的DemoThreadLocal底层原理为什么ThreadLocalMap的key设计为弱引用今天开始一个新专栏&#xff1a;每天一个面试题系列 也没有拿到令人心动的offer&#xff0c;看来自己学习方式和能力还是差…

霸榜!这本《程序员如何向架构师转型》在Github已持续置顶两月

前言 企业架构在过去十年中取得了长足的进步。随着越来越多新技术出现&#xff0c;充分利用这些因素来将企业架构创建得更好十分重要。通过将新技术集成到企业架构中&#xff0c;即使在困难时期&#xff0c;也能取得丰硕的成果。现代企业架构师的 5 个特征&#xff1a; 1. IT…

PyQt利用QScrollArea+QGridLayout制作一个滑动的Grid布局(QT Designer)

目录前言制作ui文件推送结语前言 有需求需要做一个滑动的Grid布局结构&#xff0c;网上找了很多的文章都是介绍直接用代码去生成的&#xff0c;没有看到用QT Designer做好后再怎么处理&#xff0c;这里研究了一下&#xff0c;以作记录和参考 制作ui文件 新建一个MainWindow 我…

本周推荐 | 基于 canvas 实现 H5 丝滑看图体验

推荐语&#xff1a;随着机器算力及性能的提升&#xff0c;基于原生Web体系的富交互体验也可以媲美原生&#xff0c;本文作者通过Canvas Web手势从零实现了大图浏览的交互效果&#xff0c;并在体验上不输Native&#xff0c;是一次不错的技术尝试&#xff0c;欢迎阅读。——大淘…

家庭宽带相关知识及工具

1.FTTH、FTTR、FTTB FTTH&#xff0c;光纤到户&#xff0c;需要用到光猫&#xff0c;目前主流&#xff0c;最高到千兆(1G)&#xff0c;局域网内为网线(超五类、六类等)连接。 FTTR&#xff0c;光纤到房间&#xff0c;或者说是光纤到终端&#xff0c;全光网&#xff0c;最高到万…