班级校园网页设计作业 静态HTML我的班级网页 DW班级网站模板下载 大学生简单班级网页作品代码 我的大学网页制作 学生班级网页设计作业

news2024/10/6 6:47:42

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 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 ><a href="guanyu.html">关于</a>
      

	 </li>
    <li ><a href="banjixinwen.html">班级新闻</a>
      

	 </li>
    <li ><a href="banjixiangmu.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="content8">
<div class="taitou">







<div class="title">
            <span class="cntitle">班级项目</span>
            <span class="pytitle">BANJIXIANGMU</span>
			<em></em>
			</div>


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

	 

	  	  </div>
<div class="bjxm">







<ul>
<li>
<div class="img"><img src="images/3.jpg"></div>
<div class="desc">
<div class="title">辩论赛</div>
<div class="clear"></div>

辩论赛也叫论辩赛，还叫做辩论会。它在形式上是参赛双方就某一问题进行辩论的一种竞赛活动，实际上是围绕辩论的问题而展开的一种相关知识的竞赛，思维反应能力的竞赛，语言表达能力的竞赛，也是综合能力的竞赛。<button>查看详情</button>
</div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
<div class="desc">
<div class="title">足球赛</div>
<div class="clear"></div>
<button>查看详情</button>
</div>
</li>
 
</ul>









</div>
</div>

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







<div class="title">
            <span class="cntitle">留言方式</span>
            <span class="pytitle">LIUYANFANGSHI</span>
			<em></em>
			</div>


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

	 

	  	  </div>
<div class="lybd">





<form id="form" class="form">




<div class="list extral">
<div class="title">呢称</div>
<input  type="input" name="input "  class="input"  id="ziduan1" />
</div>


 












<div class="list extral">
<div class="title">邮件</div>
<input  type="input" name="input "  class="input"  id="ziduan2" />
</div>


 












<div class="list extral">
<div class="title">电话</div>
<input  type="input" name="input "  class="input"  id="ziduan3" />
</div>


 



















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

<div>
<div class="title">兴趣</div>
<input class="checkbox" type="checkbox" name="checkbox" value="打篮球"   />打篮球<input class="checkbox" type="checkbox" name="checkbox" value="游戏"   />游戏<input class="checkbox" type="checkbox" name="checkbox" value="下棋"   />下棋</div>
<div class="clear"></div>








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

<div>
<div class="title">年龄</div>
<select class="select" name="select5" >
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>

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



















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

<div>
<div class="title">性别</div>
<input class="radio" type="radio" name="radio6" value="男"/>男<input class="radio" type="radio" name="radio6" value="女"/>女</div>
<div class="clear"></div>










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

<div>
<div class="title">介绍</div>
<textarea    class="textarea" name="textarea" ></textarea>
</div>
<div class="clear"></div>







<div class="subpart">
<button type="button"  class="submit" id="sub"   >提交</button>  <button type="button"  class="submit" id="reset"   >重置</button>
</div>
 
</form>
</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;float:left;

}

.daohang .img{

text-align:center;
}

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



.daohang ul{
width:1200px;background:#FF0033;float:left;
}
.daohang ul li{
float:left;
;
width:100px;height:40px;line-height:40px;text-align:center;padding:10px 0px;
position: relative;
 z-index: 3;
}
.daohang ul li a.active{
color:#ffffff;}
.daohang ul li a{
color:#ffffff;}
 
.daohang li:hover a{
color:#ffffff;}





.yonghubiaodan 
{
width:1200px;overflow: hidden;
}




.yonghubiaodan ul li
{
padding-left:10px;
margin-bottom:10px;
padding:5px;
border-bottom-color:#dddddd;border-bottom-style:solid;border-bottom-width:1px;

}








.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;
}

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

overflow:hidden;
vertical-align:middle;
height:40px;height:40px;line-height:40px;
}


.yonghubiaodan input{
width:1180px;text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;

}

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

}


.yonghubiaodan .title
{
margin:0px 10px;
}
.yonghubiaodan button{
width:100%;

text-align:center;
line-height:40px;height:40px;line-height:40px;background:#FF0033;color:#ffffff;
}



.shuoming .title{
margin:10px 0px;
padding:15px;
border-radius:15px;
text-align:center;
font-size:20px;
font-weight:bold;

}
.shuoming .desc{

}

.shuoming .img{
text-align:center;
}

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

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/86697.html

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

相关文章

LeetCode刷题复盘笔记—一文搞懂动态规划之121. 买卖股票的最佳时机问题（动态规划系列第二十篇）

LeetCode刷题复盘笔记—一文搞懂动态规划之121. 买卖股票的最佳时机问题（动态规划系列第二十篇）

今日主要总结一下动态规划的一道题目&#xff0c;121. 买卖股票的最佳时机 题目&#xff1a;121. 买卖股票的最佳时机 Leetcode题目地址 题目描述&#xff1a; 给定一个数组 prices &#xff0c;它的第 i 个元素 prices[i] 表示一支给定股票第 i 天的价格。 你只能选择 某一…
阅读更多...
QML入门教程：QML和QtQuick简介以及QML实例

QML入门教程：QML和QtQuick简介以及QML实例

从 Qt 4.7 开始&#xff0c;Qt 引入了一种声明式脚本语言&#xff0c;称为 QML&#xff08;Qt Meta Language 或者 Qt Modeling Language&#xff09;&#xff0c;作为 C 语言的一种替代。而 Qt Quick 就是使用 QML 构建的一套类库。 QML 是一种基于 JavaScript 的声明式语言。…
阅读更多...
激光焊接3系铝合金的工艺分析

激光焊接3系铝合金的工艺分析

随着汽车行业的不断壮大&#xff0c;纯电动汽车和燃料电池汽车将共同主导中国新能源汽车市场的未来发展。电动车轻量化和燃料电池的大量使用&#xff0c;必然涉及到越来越多的铝合金焊接工艺。铝合金具有良好的物理、化学和机械性能&#xff0c;是工业生产中一种重要的轻金属材…
阅读更多...
搜索引擎搜索特定网站的方法 :site

搜索引擎搜索特定网站的方法 :site

前言 从13开始的贴吧时代&#xff0c;还记得当时在贴吧里要搜索某些特定的帖子或者关键字的时候&#xff0c;用的都是“吧内搜索”&#xff0c;但用过的人都知道&#xff0c;这个所谓的吧内搜索其实很难用&#xff0c;大家都是用关键字空格贴吧之类的办法去搜索相关的内容。我…
阅读更多...
2025年350万辆市场空间！舱驾一体「抢」行泊/舱泊风头

2025年350万辆市场空间！舱驾一体「抢」行泊/舱泊风头

过去三年是汽车智能化「细分作战」阶段&#xff0c;无论是智能驾驶还是智能座舱&#xff0c;由于品牌、车型定位不同&#xff0c;导致在不同价位区间、不同品牌、不同车型&#xff0c;舱内舱外智能化功能组合并不一致。 而随着跨域融合、中央计算平台带动汽车行业进入新的增长…
阅读更多...
《树莓派项目实战》第九节 使用PCF8591模块和光敏电阻传感器测量光照强度

《树莓派项目实战》第九节 使用PCF8591模块和光敏电阻传感器测量光照强度

目录 8.1 PCF8691模块引脚介绍 8.2 工作原理 8.3 开启I2C接口 8.4 连接到树莓派 8.5 编写代码测量光照强度 在上一节我们使用光敏电阻传感器检测了环境中的光照是否达到了设定的阈值。在本节&#xff0c;我们将使用PCF8591模块和光敏电阻度传感器测量环境中光照强度的具体…
阅读更多...
Continua CI捆绑的PostgreSQL数据库服务

Continua CI捆绑的PostgreSQL数据库服务

Continua CI捆绑的PostgreSQL数据库服务 捆绑的PostgreSQL数据库服务已升级到15.1版。 现在可以使用表达式和变量在“配置存储库分支映射”对话框中为每个存储库指定默认分支。 在“停止”操作中添加了“将失败视为错误”选项。如果选中此项并且该操作位于“Try”块内&#xff…
阅读更多...
Qt 模型视图编程之可编辑数据模型

Qt 模型视图编程之可编辑数据模型

背景 Qt 模型视图编程中模型定义了标准接口对数据进行访问&#xff0c;可根据需求继承对应的抽象模型类来实现自定义的数据模型。一个基本的数据模型至少要实现以下虚函数&#xff1a; ①&#xff0e;rowCount&#xff1a;行数&#xff0c;返回要显示多少行&#xff1b; ②&…
阅读更多...
SpringBoot+Vue实现在线电子小说网站

SpringBoot+Vue实现在线电子小说网站

文末获取源码 开发语言&#xff1a;Java 使用框架&#xff1a;spring boot 前端技术&#xff1a;JavaScript、Vue.js 、css3 开发工具&#xff1a;IDEA/MyEclipse/Eclipse、Visual Studio Code 数据库&#xff1a;MySQL 5.7/8.0 数据库管理工具&#xff1a;phpstudy/Navicat JD…
阅读更多...
伙伴福利，100个项目彻底精通Java！【开源】

伙伴福利，100个项目彻底精通Java！【开源】

为了帮助更多的小伙伴&#xff0c;快速成长进步&#xff0c;冲进大厂中厂&#xff0c;我分享了很多的项目哟&#xff0c;例如&#xff1a; java项目精品实战案例 | JavaSwing实战项目 但很多小伙伴&#xff0c;还觉得不够&#xff0c;好吧&#xff01;今天就拿出压箱底的项目…
阅读更多...
CPU工作原理概述

CPU工作原理概述

为了了解CPU的完整工作过程&#xff0c;我们需要知道两件事&#xff0c;第一&#xff0c;CPU是如何获取到数据或者指令的&#xff1b;第二&#xff0c;CPU是如何执行指令的。 目录 一、CPU和内存的交互方式 1、地址空间的概念 2、CPU的取值过程 二、CPU内部的执行过程 1、…
阅读更多...
OceanBase-安装

OceanBase-安装

文章目录部署规划机器准备统一配置hosts设置设置机器名和静态ip关闭大页配置信息查看时钟源ntp配置&#xff08;需要所有机器root&#xff09;磁盘规划创建用户配置limits.conf配置sysctl.conf关闭防火墙关闭SELinux克隆虚拟机差异化配置中控机设置无密码SSH登录目标机器时钟源…
阅读更多...
【推送位置苹果群发iMessage推】如果Windows和Linux实现不同的传输层协议，那末因为数据格式的不同

【推送位置苹果群发iMessage推】如果Windows和Linux实现不同的传输层协议，那末因为数据格式的不同

推荐内容IMESSGAE相关 作者推荐内容iMessage苹果推软件 *** 点击即可查看作者要求内容信息作者推荐内容1.家庭推内容 *** 点击即可查看作者要求内容信息作者推荐内容2.相册推 *** 点击即可查看作者要求内容信息作者推荐内容3.日历推 *** 点击即可查看作者要求内容信息作者推荐…
阅读更多...
Qt-Web混合开发-QWebEngineView加载网页最小示例（2）

Qt-Web混合开发-QWebEngineView加载网页最小示例（2）

Qt-Web混合开发-QWebEngineView加载网页最小示例 2&#x1f30d; 文章目录Qt-Web混合开发-QWebEngineView加载网页最小示例 2&#x1f30d;1、概述&#x1f310;2、实现效果&#x1f9ed;3、实现功能&#x1f685;4、关键代码&#x1f69a;5、源代码&#x1f680;更多精彩内容&…
阅读更多...
高斯定理的理解——工程电磁场 P2~P5

高斯定理的理解——工程电磁场 P2~P5

证明&#xff1a;静电场是无旋场 根据斯托克斯公式上式等于 电位的引入 由于静电场是无源场&#xff0c;我们可以得到 又因为 再结合电场的物理意义&#xff0c;我们可以定义 功函数表达式的化简 原先功函数表达式 高斯定律的理解 不管是导体还是电解质&#xff0c;对于电…
阅读更多...
【图像处理】FAST、BRIEF、ORB算法原理

【图像处理】FAST、BRIEF、ORB算法原理

整理FAST、BRIEF、ORB算法的原理。 FAST算法 一、FAST简介 FAST&#xff08;features from accelerated segment test&#xff09;是一种角点检测算法&#xff0c;可以用于提取特征点&#xff0c;后来也长用于目标跟踪等计算机视觉任务中。FAST角点检测算法最初由 Edward Ro…
阅读更多...
LL(1)文法分析程序

LL(1)文法分析程序

一、实验目的 设计一个非递归预测分析器&#xff0c;实现对表达式语言的分析&#xff0c;理解自上而下语法 分析方法的基本思想&#xff0c;掌握设计LL&#xff08;&#xff09;文法分析程序设计的基本原理和方法。 根据给定LL&#xff08;1&#xff09;分析表&#xff0c;输入…
阅读更多...
22-31-spark-核心编程-RDD概念及理解

22-31-spark-核心编程-RDD概念及理解

22-spark-核心编程-RDD概念&#xff1a; 分布式计算基础测试&#xff1a; big-data-study\Spark-demo\src\main\java\spark\core\com\zh\test02 Spark 核心编程 Spark 计算框架为了能够进行高并发和高吞吐的数据处理&#xff0c;封装了三大数据结构&#xff0c;用于处理不同的…
阅读更多...
vscode 离线安装ssh

vscode 离线安装ssh

首先打开官方插件地址&#xff1a;https://marketplace.visualstudio.com/VSCode 然后输入ssh 下载这两个插件&#xff1a; 安装这两个插件&#xff1a; 这样便在windows下安装成功了ssh。 接下来需要在服务器端进行配置。 首先查看windows上的vscode版本&#xff1a; 这…
阅读更多...
Arduino 崩溃或挂起的 7 种方式及如何防止

Arduino 崩溃或挂起的 7 种方式及如何防止

Arduino 崩溃或挂起的 7 种方式&#xff08;以及如何防止它发生&#xff09; 作者&#xff1a;Chris in Arduino 查看原文 为了帮助防止Arduino崩溃或挂起&#xff0c;我进行了一系列实验&#xff0c;以确定Arduino崩溃&#xff0c;挂起&#xff0c;重置&#xff0c;冻结&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023