HTML+CSS大作业:基于HMTL校园学校网页设计题材【我的学校网站】

news2024/10/7 10:12:56

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

<div class="title">
<div class="stitle"> 关于</div> 
<div class="trianglerrb"></div>


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



</div>
<div class="jbxx">












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

<p><p>    学院始办于1993年,2001年经广东省人民政府批准成立,集医药健康类、现代制造类、财经管理类、电子通信类、创意设计类和建筑工程类专业为主体;学院现有广州和清远两大校区(部分专业采用2+1管理模式,即两年在清远,一年在广州),总面积1316亩,校舍总建筑面积逾47万平方米,设17个二级学院,47个招生专业,在校生16300余人,培养高职毕业生近5万余人。</div>






 










</div>
</div>

<div  class="content5">
<div class="taitou">

<div class="title">
<div class="stitle"> 校园生活</div> 
<div class="trianglerrb"></div>


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



</div>
<div class="xysh">



<ul>
<li>
<div class="img"><img src="images/4.jpg"></div><div class="title">疑似桂花香 体味生活-精致点滴</div>
</li>

<li>
<div class="img"><img src="images/5.jpg"></div><div class="title">保留他们的天真可爱,愿美好一直伴你左...</div>
</li>

 
</ul>

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

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

<div class="title">
<div class="stitle"> 校园新闻</div> 
<div class="trianglerrb"></div>


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



</div>
<div class="xyxw">




<ul>
<li>
<div class="img">
<img src="images/6.jpg">
<div class="cover"></div>
<div class="desc">7月7日上午,我校南海移动大学生社会实践基地在广东移动南...</div>
</div>

</li>
<li>
<div class="img">
<img src="images/7.jpg">
<div class="cover"></div>
<div class="desc">我校旅游系酒管01级毕业生张丹凤,现任白天鹅宾馆前台职员...</div>
</div>

</li>
<li>
<div class="img">
<img src="images/8.jpg">
<div class="cover"></div>
<div class="desc">8月7日,我校男子足球队再次力克劲旅,赢得小组出线的关键...</div>
</div>

</li>
<li>
<div class="img">
<img src="images/9.jpg">
<div class="cover"></div>
<div class="desc">9月29日为全省统一的“青春献祖国”活动日。</div>
</div>

</li>
 
</ul>

</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:#CC0033;float:left;

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

}

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



.daohang ul{
width:934px;
background:#CC0033;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;

}





.content7{width:700px;float:left;}


.taitou .title{



border-bottom-color:#CC0033;border-bottom-style:solid;border-bottom-width:3px;



overflow:hidden;
margin-bottom:10px;
margin-top:10px;
margin-right:10px;
margin-left:10px;
margin-right:10px;
}
.taitou .stitle{text-align:center;padding:0px 10px;font-weight:bold;float:left;
color:#ffffff;background:#CC0033;height:50px;
line-height:50px;
}

.trianglerrb{ width: 0;height: 0;border-top: 50px solid transparent;
border-left: 40px solid #CC0033;
float:left;
margin-right:10px;

}
.stitle img{vertical-align: middle;}


.jbxx 
{
width:700px;}

.jbxx  img
{
margin-top:10px;
margin-bottom:10px;
width:690px;height:200px;
float:left;
}
.jbxx  .desc
{

padding:10px;
text-align:left;
}



.content5{width:500px;float:left;}


.xysh ul
{
width:500px;}
.xysh ul li{
width:480px;float:left;
padding:10px;
text-align:center;
}
.xysh ul li:hover{
}

.xysh ul li img
{
width:480px;height:180px;

display:block;
}
.xysh ul li .title{padding:10px 0px;

}








.xyxw ul
{
width:1200px;}
.xyxw ul li{
width:580px;float:left;
padding:10px;
text-align:center;
position: relative;
}
.xyxw ul li img
{
width:580px;height:294px;position: relative;
}
.xyxw ul li .desc{
padding:10px 0px;
position: absolute;
text-align: center;
color:#fff;display:block;
width:580px;background:#CC0033;position: absolute;
bottom:30px;
opacity: 0.8;
}

.xyxw ul li:hover .desc{
background:#000000;
}






.dibu .desc
{

text-align:center;color:#ffffff;
background:#CC0033;padding:20px 0px;
margin-top:10px;
}

.dibu img
{


}



.xiaoyuanshenghuoliebiao table
{
width:1180px;}



.xiaoyuanshenghuoliebiao table .img
{
width:130px;height:200px;}
.xiaoyuanshenghuoliebiao table .img img
{
width:120px;padding:5px;
height:190px;}

.xiaoyuanshenghuoliebiao table   .title{margin:10px 0px;
font-weight:bold;
font-size:16px;
}
.xiaoyuanshenghuoliebiao table   .desc
{
width:130px;text-align:left;padding:5px;
}








.xiaoyuanxinwenliebiao ul
{
width:1200px;
}
.xiaoyuanxinwenliebiao ul li{
width:300px;height:250px;float:left;
position: relative;
text-align:center;
}
.xiaoyuanxinwenliebiao ul li .img
{
display:block;
}


.xiaoyuanxinwenliebiao ul li .cover{
position: absolute;
opacity: 0.6;
display:none;
width:300px;height:200px;background:#CC0033;
opacity: 0.6;
top:0px;
}


.xiaoyuanxinwenliebiao ul li:hover .cover{

display:block;

}

.xiaoyuanxinwenliebiao ul li:hover .button{
display:block;
}

.xiaoyuanxinwenliebiao ul li .button{
position: absolute;
opacity: 0.6;
display:none;
width:300px;height:200px;opacity: 0.6;
top:0px;
}

.xiaoyuanxinwenliebiao ul li .button button{
padding:10px 20px;
margin:0 auto;
margin-top:80px;background:#ffffff;
border-radius:5px;
}

.xiaoyuanxinwenliebiao .img .img0{
width:300px;height:200px;display: block;
background:url(../images/15.jpg) 100% center no-repeat ;
position: relative;
background-size: 100%;
}
.xiaoyuanxinwenliebiao .img .img1{
width:300px;height:200px;display: block;
background:url(../images/16.jpg) 100% center no-repeat ;
position: relative;
background-size: 100%;
}
.xiaoyuanxinwenliebiao .img .img2{
width:300px;height:200px;display: block;
background:url(../images/17.jpg) 100% center no-repeat ;
position: relative;
background-size: 100%;
}
.xiaoyuanxinwenliebiao .img .img3{
width:300px;height:200px;display: block;
background:url(../images/18.jpg) 100% center no-repeat ;
position: relative;
background-size: 100%;
}
.xiaoyuanxinwenliebiao .img .img4{
width:300px;height:200px;display: block;
background:url(../images/19.jpg) 100% center no-repeat ;
position: relative;
background-size: 100%;
}
.xiaoyuanxinwenliebiao .img .img5{
width:300px;height:200px;display: block;
background:url(../images/20.jpg) 100% center no-repeat ;
position: relative;
background-size: 100%;
}
.xiaoyuanxinwenliebiao .img .img6{
width:300px;height:200px;display: block;
background:url(../images/21.jpg) 100% center no-repeat ;
position: relative;
background-size: 100%;
}
.xiaoyuanxinwenliebiao .img .img7{
width:300px;height:200px;display: block;
background:url(../images/22.jpg) 100% center no-repeat ;
position: relative;
background-size: 100%;
}
 

.xiaoyuanxinwenliebiao ul li .title{width:300px;
font-weight:bold;
line-height:50px;
text-align:center;
color:#000000;
}









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

}
.jieshaoneirong .desc{

}

.jieshaoneirong .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/27981.html

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

相关文章

专精特新企业三个层级

专精特新企业也是分层级的。工信部2022年6月印发《优质中小企业梯度培育管理暂行办法》里面明确提出中小企业培育的3个梯度&#xff0c;分别是创新型中小企业、专精特新中小企业和专精特新小巨人企业&#xff0c;刚好构成中小企业发展层级金字塔。这就意味着企业想要发展崛起&a…

19 04-读取DTC快照信息

诊断协议那些事儿 诊断协议那些事儿专栏系列文章&#xff0c;19服务作为UDS中子功能最多的服务&#xff0c;一共有28种子功能&#xff0c;本文将介绍常用的19 04服务&#xff1a;读取快照信息。 关联文章&#xff1a; 19服务List 19 01-通过状态掩码读取DTC数目 $19服务:DTC…

1.2 C++编译器对指针的解释方式(深度理解c++指针)

1.2 指针 1.2.1 指针解释方式 从内存的角度&#xff0c;一个指向类对象的指针与一个指向整数类型的指针或一个指向数组的指针&#xff0c;三者之间是没有任何区别的&#xff0c;它们内部都只存储了一个机器地址值(word)。不同类型指针的区别仅在于其寻址出来的object类型的不…

div+css布局实现个人网页设计(HTML期末作业)

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

Spring源码深度解析:七、bean的加载① - doGetBean概述

我们先通过getBean()流程图&#xff0c;来了解Spring的getBean()方法的工作流程&#xff0c;接着根据这个工作流程一步一步的阅读源码 一、前言 文章目录&#xff1a;Spring源码分析&#xff1a;文章目录 getBean()方法是spring ioc的核心&#xff0c;阅读getBean()方法的源…

【Spring Boot+Vue.js+JPA+Mysql】实现前后端分离的名片系统(附源码 超详细必看 可作为大作业使用)

需要项目源码请点赞关注收藏后评论区留言并且私信~~~ 一、项目简介 前后端分离的核心思想时前端页面通过掉用后端的RESTfulApI进行数据交互。本次项目使用Spring BootSpring Data JPA实现后端系统&#xff0c;使用Vue.js实现前端系统&#xff0c;数据库采用mysql&#xff0c;集…

磨金石教育摄影技能干货分享||如何将平凡的窗户拍出美感

窗户有着天然的构图优势&#xff0c;一直是摄影爱好者们喜欢拍的场景。都说眼睛是心灵的窗户&#xff0c;窗户其实就是房间窥探世界的眼睛。 特别是在中国文化中&#xff0c;对窗户的艺术雕刻&#xff0c;总是那么侧重。一间房子好不好看&#xff0c;窗户的设计往往是较为重要…

Java里的异常机制

一、什么是异常 软件程序在运行过程中&#xff0c;遇到用户输入不符合要求、文件路径不存在、文件格式错误、非法参数等的异常问题&#xff0c;叫做异常&#xff08;Exception&#xff09;。 二、简单分类 1.检查性异常 最具代表的检查性异常就是用户错误或问题引起的异常&…

计算机网络:网络层

网络层 网络层主要是解决寻址连接问题&#xff0c;例如两个主机在网络上通过IP进行连接通信 1.网络层概述 网络层的主要任务是实现网络互联&#xff0c;进而实现数据包在各网络之间的传输 需要解决的主要问题&#xff1a; 因特网 使用TCP/IP协议栈通过学习TCP/IP协议栈的网…

Nginx:handler 模块的实现

文章目录1、模块的分类2、模块的基本结构2.1、模块配置结构2.2、模块配置命令2.3、模块上下文结构2.4、模块的定义3、http 请求处理3.1、请求处理阶段3.2、获取用户请求3.3、发送响应4、例&#xff1a;流量限制模块4.1、操作共享内存4.1.1、红黑树4.1.2、双向链表4.2、编写模块…

APS排程软件在压铸行业的应用

压铸是一种金属铸造工艺&#xff0c;其特点是利用模具内腔对融化的金属施加高压。模具通常是用强度更高的合金加工而成的&#xff0c;这个过程有些类似注塑成型。大多数压铸铸件都是不含铁的&#xff0c;例如锌、铜、铝、镁、铅、锡以及铅锡合金以及它们的合金。根据压铸类型的…

js:判断文本溢出隐藏生效text-overflow: ellipsis

效果展示 参数汇总 看上图&#xff0c;不难发现&#xff0c;文字有超出的条件是 target.scrollWidth > target.offsetWidth可以通过js判断是否生效&#xff0c;参考element-ui的代码实现 https://github.com/ElemeFE/element/blob/dev/packages/table/src/table-body.js#…

RocketMQ的主要组件及其功能

一、RocketMQ部署的组件 RocketMQ是啥就不多说了&#xff0c;一个基于主题的订阅发布机制的消息中间。下面就是我们部署时的架构&#xff0c;NameServer和Broker需要部署在服务器上&#xff0c;对于消费者和生产者则是我们在自己的程序里启动&#xff0c;去push/pull消息。 消…

rust变量与常量

变量绑定 在rust里有个核心原则&#xff0c;那就是所有权。在其它语言中&#xff0c;我们可以把一个值赋值给变量。但是在rust里&#xff0c;是把值绑定到变量上。任何内存对象都是有主人的&#xff0c;而且一般情况下完全属于它的主人&#xff0c;绑定就是把这块内存绑定给一…

路由器的工作原理,详细介绍

1、路由器的作用 路由器&#xff1a; router 作用&#xff1a;实现跨网段通信&#xff0c;不同的网络之间通信 交换机&#xff1a; switch 作用&#xff1a;组建局域网&#xff0c;就是将电脑通过网络连起来 交换机的原理参考文档&#xff1a;计算机网络之交换机的工作原理…

前端React项目的Next.js项目通过CSS引入自定义字体文件

最近在Web3的项目&#xff0c;需要引入自定义字体&#xff0c;做下记录&#xff1a; 1、 如果是下载的字体文件&#xff0c;直接能使用的就不需要转换&#xff0c;如果是TTF格式则需要转换成eot、svg、woff、woff2&#xff0c;这里提供一个网站Font Squirrel | Create Your Ow…

ROS之话题通信

文章目录理论模型分析流程1. 发布方2. 订阅方3.配置 CMakeLists.txt4.执行5.注意参考理论模型 话题通信实现模型是比较复杂的&#xff0c;该模型如下图所示,该模型中涉及到三个角色: ROS Master (管理者)Talker (发布者)Listener (订阅者) ROS Master 负责保管 Talker 和 Li…

简化javabean开发-->Lombok

目录 一.Lombok 1.Lombok 介绍 1.1Lombok 作用 1.2SpringBoot 和 IDEA 官方支持 2.Lombok 常用注解 3.Lombok 应用实例 3.1在 pom.xml 引入 lombok 3.2. 修改 Furn.java 3.3在 idea 安装 lombok 插件 一.Lombok 1.Lombok 介绍 1.1Lombok 作用 1. 简化 JavaBean 开…

Camtasia2023喀秋莎录屏软件下载操作教程

Camtasia软件2023最新版是一款电脑屏幕录制与视频剪辑的软件&#xff0c;功能强大且操作简单。可以使用该软件对视频进行添加滚动字幕的效果&#xff0c;并且还可以选择注释标注的样式、主题以及形状等。在内置的视频编辑器中对视频进行剪辑时还可以拖放文本、添加效果、添加过…

VTK-vtkImplicitFunction及其子类介绍

简介&#xff1a;本文主要介绍vtkImplicitFunction接口及其子类的实现原理和用途。 目录 1. vtkPlane 2. vtkPolyPlane 1. vtkPlane 描述&#xff1a;vtkPlane提供了各种平面的计算方法&#xff0c;包括点到面的投影&#xff0c;计算点到面的距离及面的法向量等。 Evaluat…