用HTML+CSS做一个漂亮简单大学生校园班级网页

news2025/1/10 19:11:38

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 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="xiaoyuanhuodong.html">校园活动</a></li>
<li ><a href="xiaoyuanxinwen.html">校园新闻</a></li>
<li ><a href="wodexiaoyuan.html">我的校园</a></li>
<li ><a href="yonghuliuyan.html">用户留言</a></li>
<li ><a href="zhucedenglu.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">
<div class="stitle">校园生活</div>  <a href="#" class="more"></a>
</div>
 
</div>
<div class="xysh">






<ul>
<li>
<div class="img"><img src="images/3.jpg"></div>
<div class="desc">
<div class="title">一座城池</div>
<div class="clear"></div>
<br>学院网 讯一座城池 到达上海的时候不是凌晨,是一个清晨。 由于卧铺车非常的热,大家都没有睡好,走出地铁站,清冽的空气涌来,顿时清醒了一半。<button>查看详情</button>
</div>
</li>
<li>
<div class="img"><img src="images/4.jpg"></div>
<div class="desc">
<div class="title">中矿大智慧对决,辩场争锋――信控学院举办2017级新生辩论赛半决赛</div>
<div class="clear"></div>
<br>学院网 讯经过一个多月的激烈比拼,信控学院2017级4个班级在新生辩论赛小组赛中脱颖而出,12月4日,信控学院2017级新生辩论赛半决赛在博学楼五号楼举行。<button>查看详情</button>
</div>
</li>
 
</ul>









</div>
</div>

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

<div class="title">
<div class="stitle">校园新闻</div>  <a href="#" class="more"></a>
</div>
 
</div>
<div class="xyxw">







<ul>
<li>

<div class="img"><img src="images/5.jpg"></div>
<div class="desc">                 3月22日下午,我校与德国F+U萨克森非盈利性教育培训中心合作成立德国大学预科培训中心签字仪式在实训中心举行。叶小明院长与F+U总裁Meinhold博士代表合作双方签约。吴茂昶副院长及应用外语系、外事办负责人等出席了签字仪式。<br /> 该中心的成立,为志在留学德国的广大学生提供优质的德语预科课程培训,为加强我校与德国职业教育机构及德国高校的合作提供平台。</div>

</li>
 
</ul>

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

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

<div class="title">
<div class="stitle">用户留言</div>  <a href="#" class="more"></a>
</div>
 
</div>
<div class="lybd">





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




<div>

<input  type="input" name="input"  class="input"  id="ziduan1" value="呢称" />
</div>
<div class="clear"></div>













<div>

<input  type="input" name="input"  class="input"  id="ziduan2" value="电话" />
</div>
<div class="clear"></div>





















<div>
<input class="radio" type="radio" name="radio3" value=""  checked /><input class="radio" type="radio" name="radio3" value=""   /></div>
<div class="clear"></div>










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







<button type="button"  class="submit" id="sub"   >提交</button>

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

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

}

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



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

}





.content8{width:800px;float:left;}


.taitou .title{



border-bottom-color:#FF6600;border-bottom-style:solid;border-bottom-width:1px;



overflow:hidden;
margin-bottom:10px;
margin-top:10px;
margin-left:10px;
margin-right:10px;
}
.taitou .stitle{text-align:center;padding:10px 20px;font-weight:bold;float:left;


color:#000000;
}
.taitou .more{
padding-top:10px;
float:right;
margin-right:10px;
font-weight:bold;

}



.xysh ul
{
width:800px;
}
.xysh ul li
{
width:780px;padding:5px;
float:left;





.yonghubiaodan 
{
width:1200px;overflow: hidden;
text-align:center;
}




.yonghubiaodan ul li
{
padding-left:10px;
margin-bottom:10px;
width:370px;margin-right:10px;
float:left;
}

.yonghubiaodan .list
{
border-bottom-color:#dddddd;border-bottom-style:solid;border-bottom-width:1px;border-top-color:#dddddd;border-top-style:solid;border-top-width:1px;border-left-color:#dddddd;border-left-style:solid;border-left-width:1px;border-right-color:#dddddd;border-right-style:solid;border-right-width:1px;
}






.yonghubiaodan  form
{
line-height:40px;
}
.yonghubiaodan select{
width:380px;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:280px;text-align:left;
margin:0px 10px;
overflow:hidden;
vertical-align:middle;
height:40px;line-height:40px;}

.yonghubiaodan textarea{
width:250px;text-align:left;
margin:0px 0px;
overflow:hidden;
vertical-align:middle;
font-size: 16px;
height:100px;

}


.yonghubiaodan .title
{
margin:0px 10px;
}
.yonghubiaodan button{
width:100%;
text-align:center;
margin:0px 5px;
line-height:42px;height:42px;line-height:42px;background:#000000;color:#ffffff;
}




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

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

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

相关文章

数据时代,漫谈数据建模

不管什么样的模型都可以理解为一种预设&#xff0c;比如像一张大宽表&#xff0c;它的维度和指标在大宽表中就是固定的&#xff0c;只是维度列多一些&#xff0c;指标多一些&#xff0c;给了用户更多的一种组合维度和指标的可能&#xff0c;并不是说就没有模型的概念。 在理解…

Python实战案例,PyQt5模块,实现疫情信息快速查看工具(附源码)

前言 今天给大家介绍的是Python疫情信息快速查看工具&#xff0c;在这里给需要的小伙伴们代码&#xff0c;并且给出一点小心得。 PyQt概述 PyQt5是Qt框架的Python语言实现&#xff0c;由Riverbank Computing开发&#xff0c;是最强大的GUI库之一。PyQt提供了一个设计良好的窗…

springcloud3 EurekaClient单机搭建2

一 EurekaClient-provider提供者搭建 工程架构 1.1 搭建步骤 1.1.1 复制模块 复制mscloud-provider模块变成 mscloud-provider8004 1.1.2.修改pom 新增eureka-client的依赖 完整代码 <dependency><groupId>junit</groupId><artifactId>junit</…

Pluggy源码解读----pluggy源码解读基础准备

【原文链接】Pluggy源码解读----pluggy源码解读基础准备 解读pluggy源码&#xff0c;直接使用pytest环境中安装的pluggy即可&#xff0c;比如这里安装的pluggy版本是1.0.0&#xff0c;为了更好的理解源码&#xff0c;这里首先使用如下应用代码作为应用实例&#xff0c;从如下代…

ASEMI电磁炉整流桥KBJ2510参数和性能

编辑-Z ASEMI电磁炉整流桥KBJ2510参数和性能怎么样呢&#xff1f;ASEMI采用波峰的GPP大芯片&#xff0c;工艺制造&#xff0c;稳定性高&#xff0c;抗冲击性强。KBJ2510具体参数为&#xff1a;正电流&#xff1a;25A&#xff0c;反向耐压&#xff1a;1000V&#xff0c;反向电流…

openai注册流程

前置条件 1、注册登陆的时候需要使用梯子&#xff0c;梯子使用美国的&#xff0c;其他地区的梯子不一定正常使用 2、海外短信验证码 3、整个流程使用梯子 4、登陆后可以不用梯子-正常使用 openai网址 https://chat.openai.com https://openai.com https://beta.openai.…

四面阿里斩获offer定级为P7+ 2022年最新阿里巴巴70道高级面试题

前言 **四面阿里的面经总结&#xff1a;**我觉得有一个能够找一份大厂的 offer的想法&#xff0c;这是很正常的&#xff0c;这并不是我们的饭后谈资而是每个技术人的追求。像阿里、腾讯、美团、字节跳动、京东等等的技术氛围与技术规范度还是要明显优于一些创业型公司 / 小公司…

鸿翼档案信创管理系统——为您的数字资产加上“安全锁”

为了应对日益复杂的国际形势&#xff0c;确保关键技术自主可控、保障关键技术自主可控、保障网络信息安全&#xff0c;我国再近几年提出了信息技术应用创新战略&#xff08;简称“信创”&#xff09;。 通俗来讲&#xff0c;信创就是在核心芯片、基础硬件、操作系统、中间件、…

K_A08_012 基于 STM32等单片机驱动 DRV8833 模块按键控制直流电机正反转

目录 一、资源说明 二、基本参数 参数 引脚说明 三、驱动说明 驱动时序 对应程序: 四、部分代码说明 接线说明 STC89C52RCDRV8833模块 STM32F103C8T6DRV8833模块 五、基础知识学习与相关资料下载 六、视频效果展示与程序资料获取 七、项目所有材料清单 八、注意事项 九…

《自己动手写CPU》学习记录(4)——第4章/Part 2

目录 引言 致谢 拥有Linux开发环境 1、Linux虚拟机安装 2、共享文件夹 GNU工具链安装 Makefile RAM.ld Bin2Mem.exe 注意 路径 测试 引言 上篇文章实现了 ori 指令&#xff0c;并且搭建验证平台&#xff0c;验证了功能的正确性。但是有一个问题就是&#xff0c;当…

寻找网络1020的结构平衡点

( A, B )---2*n*2---( 1, 0 )( 0, 1 ) 用网络分类A和B&#xff0c;让A是&#xff08;0&#xff0c;1&#xff09;&#xff08;0&#xff0c;0&#xff09;&#xff0c;让B是&#xff08;1&#xff0c;0&#xff09;&#xff08;0&#xff0c;0&#xff09;。记为网络1020.AB的…

湖南中医药大学宿舍无线网络一体化项目

第二次上大王老师的课&#xff0c;上学期的微机这学期的计网&#xff0c;这学期一开学就是一个大项目&#xff0c;对于零基础&#xff0c;零经验的我们来说&#xff0c;老师布置给我们一项比较重大的任务就是——从零开始为我们学校宿舍部署无线网络。刚开始觉得这肯定完不成&a…

CRM客户管理系统能为小微型企业带来哪些优势?

回款&销售排名看板CRM&#xff08;顾客关系管理工作控制系统&#xff09;在亚洲地区发展了三十余年&#xff0c;让众多民营企业管理工作形式成功的从实体店转至线上&#xff0c;因此协助民营企业展开管理工作上的高效率提高&#xff0c;CRM控制系统做为两个能协助各类民营企…

python学习中的各种迷一样的问题之一

神秘一 Argument name should be lowercase oneX这个变量名可以改成one_x 神秘二 无缘无故被in 到def里的main() 原因是400行少了个" ) " 神秘三一个文件位置引发的血案 无法执行使用所选元素重构,别用捷克键盘来唬人了 test_03_2022-1202_to_2022-1209.py在…

你不知道13个嵌入式C语言优化技巧

【推荐阅读】 关于如何快速学好&#xff0c;学懂Linux内核。内含学习路线 深入linux内核架构--内存管理 了解ixgbe网卡驱动— 驱动注册&#xff08;纯代码分享&#xff09; 手把手教你如何编写一个Makefile文件 需要多久才能看完linux内核源码&#xff1f; 嵌入式系统受其使用的…

H02-RCNN和SPPNet

目录 1.目标检测-Overfeat模型 1.1 滑动窗口 1.2 Overfeat模型总结 2.目标检测-RCNN模型 2.1 完整的R-CNN结构 2.1.1 候选区域(Region of lnterest)得出(了解) 2.1.2 CNN网络提取特征 2.1.3 特征向量训练分类器SVM 2.1.4 非最大抑制&#xff08;NMS&#xff09; 2.1.…

Mybatis-plus 源码执行全流程解析

Mybatis-plus 源码执行全流程解析 废话 少数流程开始&#xff1a; 1、业务入口&#xff1a;userMapper.insertBatch(entityList); 执行到代理类&#xff1a; $Proxy222 (com.sun.proxy) 开始走代理流程&#xff0c;然后到了代理类&#xff1a; idea 执行流程取出栈信息&…

Mybatis增删改查

Mybatis增删改查 1&#xff0c;配置文件实现CRUD 1.1 环境准备 数据库表&#xff08;tb_brand&#xff09;及数据准备 -- 删除tb_brand表 drop table if exists tb_brand; -- 创建tb_brand表 create table tb_brand (-- id 主键id int primary key auto_increment,…

string的认识和使用

目录 一、网站上查看string类 1.网站 2.网站上的string类 二、string类的成员函数 1.默认成员函数 &#xff08;1&#xff09;构造函数、拷贝构造函数和析构函数 &#xff08;2&#xff09;赋值运算符重载 &#xff08;3&#xff09;容量操作 &#xff08;4&#xff09…

JavaWeb用户信息查看的登录、增删改查案例

黑马JavaWeb案例整理记录 文章目录案例源码&#xff1a;一、需求二、设计1、技术选型2、数据库设计三、开发步骤四、详细过程1、创建web项目&#xff0c;部署tomcat&#xff0c;导入jar包2、编写首页index.jsp3、编写servlet、servie、daomain、dao五、案例升级实现1、实现内容…