学校官网的制作

news/2024/11/20 11:36:16/

学校官网

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}.top{background-color: #3D3BB8;width: 100%;position: fixed;padding: 20px 0 12px 0;}.box{width: 75%;height: 80px;margin: 0 auto;}.logo{width: 326.2px;height: 58.8px;	float: left;margin-top: 10px;}.right{float: left;}.logo img{display: block;width: 326.2px;height: 58.8px;				}.right div:nth-child(1){margin-left: 528px;position: relative;}.right div:nth-child(2){height: 27px;margin-top: 25px;}.right div:nth-child(1) input{padding: 11px 70px 11px 40px;border-radius: 23px;}.right div:nth-child(1) button{background-image: url("https://www.scauzj.edu.cn/wp-content/themes/hnny/img/ser_btn.png");width: 20px;height: 20px;position: absolute;left: 210px;top: 25%;border: none;background-color: white;}.right_two li{list-style: none;float: left;text-align: center;font-size: 13px;color: white;margin-left: 30px;position: relative;}.one, .one img{width: 100%;display: block;}.two{width: 100%;height: 795px;background-repeat: no-repeat;background-position: right;background-image: url("https://www.scauzj.edu.cn/wp-content/themes/hnny/img/home_index1_bg.png");}.two_box{width: 75%;
/* 				height: 795px; */margin: 0 auto;
/* 				padding: 88px 0; */}.two_box ul{list-style: none;float: right;margin-right: 12px;}.two_box ul li{float: left;margin-left: 35px;font-size: 18px;}.box_one{margin-top: 50px;}.box_one div:nth-child(1){width: 400px;height: 400px;float: left;}.box_one div:nth-child(2), .box_one div:nth-child(2) ul{float: left;width: 725px;height: 530px;}.box_one div:nth-child(1) img{width: 400px;height: 400px;}.box_one div:nth-child(2) li{margin-bottom: 30px;height: 79px;width: 100%;}.time{height: 79px;width: 65px;background-color: blue;display: inline-block;color: white;float: left;}.time i{font-size: 36px;margin-left: 8px;}.time em{font-size: 15px;margin-left: 2px;}.text{width: 600px;height: 79px;display: inline-block;float: left;font-size: 15px;margin-left: 24px;}.text:hover{color: blue;}.three{height: 125px;width: 400px;float: left;text-align: center;position: relative;}.three span{font-size: 40px;position: absolute;top: -20px;left: 141px;color: rgba(0, 0, 0, 0.2);}.three h2::after{content: '';width: 100px;height: 9px;background-color: blue;border-radius: 10px;display: block;position: absolute;left: 150px;margin-top: 5px;}.four{width: 100%;height: 795px;padding: 50px 0;background-image: url("https://www.scauzj.edu.cn/wp-content/themes/hnny/img/home_index2_bg.png");}.title_one span{display: block;text-align: center;}.title_one span:nth-child(1){font-size: 22px;font-weight: 900;color: rgba(255, 255, 255, 0.7);}.title_one span:nth-child(2){font-size: 19px;font-weight: 900;}.four .title_one::after{content: '';width: 80px;height: 9px;background-color: blue;border-radius: 10px;display: block;position: absolute;left: 720px;margin-top: 5px;}video{width: 100%;}.title_two{width: 100%;height: 520px;margin-top: 44px;}video{height: 100%;}.top_list{width: 112px;position: absolute;right: -30px;background-color: white;margin-top: 21px;display: none;}.top_list li{color: black;font-size: 15px;margin-left: 25px;margin-top: 10px;}.top_list li:hover{color: blue;}.right_two li:hover .top_list{display: block;}</style></head><body><div class="top"><div class="box"><div class="logo"><img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/%E4%B8%BB%E9%A1%B5logo.png" alt="加载失败"></div><div class="right"><div><form action="#"><input type="text" placeholder="请输入搜索内容"><button></button></form></div><div class="right_two"><ul><li>首页</li><li>学校概况<ul class="top_list"><li>学校简介</li><li>现任领导</li><li>校长寄语</li><li>师资队伍</li><li>校园风光</li><li>华珠大事记</li><li>华珠荣誉</li><li>专业介绍</li></ul></li><li>信息公开专栏</li><li>机构设置<ul class="top_list"><li>行政部门</li><li>二级学院</li></ul></li><li>党建网</li><li>教务管理</li><li>招生就业<ul class="top_list"><li>招生网</li><li>小北就业</li></ul></li><li>OA管理</li><li>数字资源<ul class="top_list" style="width: 165px; right: -50px;"><li>数字图书资源</li><li>图书系统</li><li>图书搜索</li><li>资产系统</li><li>在线教学平台</li><li>京广图书</li><li>五车图书</li><li>学工管理</li><li>数字化实习实训平台</li><li>实训平台</li><li>校友系统</li><li>心理测评</li></ul></li><li>加入我们</li></ul></div></div></div></div><div class="one"><div><img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/111-1-scaled.jpg" alt="加载失败"></div>	</div><div class="two"><div class="two_box" style="height: 795px; padding: 88px 0;"><ul><li>新闻头条</li><li>部门动态</li><li>学院通告</li></ul><div class="box_one"><div><img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2023/03/1-8.jpg" alt="加载失败"></div><div><ul><li><span class="time"><i>21</i><em>2023.03</em></span><span class="text"><strong>华珠信息工程学院举办“随机建模与联邦学习框架的研究”学术论坛</strong></span></li><li><span class="time"><i>20</i><em>2023.03</em></span><span class="text"><strong>热土之上,“乡”遇未来 | 华珠第十四届主持人大赛决赛精彩来袭!</strong></span></li><li><span class="time"><i>19</i><em>2023.03</em></span><span class="text"><strong>资讯速递 | 华珠2023届毕业生春季空中双选会助力就业</strong></span>								</li><li><span class="time"><i>18</i><em>2023.03</em></span><span class="text"><strong>职场直通车 | 广东省2023届高校毕业生线下校园双选会华珠站入驻企业招募中</strong></span>								</li></ul></div><div class="three"><h2>新闻头条</h2><span>NEWS</span></div></div></div></div><div class="four"><div class="two_box" style="height: 618px; "><div class="title_one"><span>VIDEO SHOW</span><span>视频展播</span></div><div class="title_two"><video src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/2022迎新花絮-1.mp4" controls="controls"></video></div></div></div></body>
</html>

http://www.ppmy.cn/news/34806.html

相关文章

ROS CallBack函数和spinOnce()的触发机制,和消息队列的理解

ROS Subscriber的callback函数的触发条件 当循环到spinOnce()函数时&#xff0c;会调用subscriber的callback函数&#xff0c;此时会检查订阅到的消息队列的大小&#xff0c; 如果此时subscriber的消息队列的size为n&#xff0c;则会执行n次callback ROS消息队列的理解 主要…

css绘制一个Pinia小菠萝

效果如下&#xff1a; pinia小菠萝分为头部和身体&#xff0c;头部三片叶子&#xff0c;菠萝为身体 头部 先绘制头部的盒子&#xff0c;将三片叶子至于头部盒子中 先绘制中间的叶子&#xff0c;利用border-radius实现叶子的效果&#xff0c;可以借助工具来快速实现圆角的预想…

linux实验之shell编程基础

这世间&#xff0c;青山灼灼&#xff0c;星光杳杳&#xff0c;秋风渐渐&#xff0c;晚风慢慢 shell编程基础熟悉shell编程的有关机制&#xff0c;如标准流。学习Linux环境变量设置文件及其内容/etc/profile/etc/bashrc/etc/environment~/.profile~/.bashrc熟悉编程有关基础命令…

java面试准备8

什么是类装载的执行过程 类加载主要分为五个步骤&#xff1a; 加载&#xff1a;根据类路径&#xff08;ClassPath&#xff09;找到对象的class文件然后导入。 验证&#xff1a;检查加载的class文件的正确性。 准备&#xff1a;给类中的静态变量分配内存空间。 解析&#xff1a…

成果VR虚拟3D展厅让内容更丰富饱满

随着数字技术的不断发展和普及&#xff0c;数字化展厅成为了一种重要的展示形式。线上虚拟展厅作为数字化展示的一种新形式&#xff0c;采用虚拟现实技术&#xff0c;能够克服时空限制&#xff0c;打破传统展览业的展示模式&#xff0c;为用户提供更加丰富、立体、沉浸式的展览…

【大数据处理与可视化】三 、Pandas库的运用

【大数据处理与可视化】三 、Pandas库的运用实验目的实验内容实验步骤一、使用pandas库分别创建Series对象和DataFrame对象&#xff0c;并对创建的对象使用索引、排序等相关操作&#xff1b;练习DataFrame对象的统计计算和统计描述的功能。1&#xff06;2、创建一个DataFrame(d…

(只需五步)注册谷歌账号详细步骤,解决“此电话号码无法验证”问题

目录 第一步&#xff1a;打开google浏览器 第二步&#xff1a;设置语言为英语&#xff08;美国&#xff09; 第三步&#xff1a;点击重新启动&#xff0c;重启浏览器 第四步&#xff1a;开始注册 第五步&#xff0c;成功登录google账号&#xff01; 如果出现这样的原因&…

第2篇|文献研读|nature climate change|减缓气候变化和促进热带生物多样性的碳储量走廊

研究背景 从 2000 年到 2012 年&#xff0c;潮湿和干燥热带地区的森林总损失超过 90,000 平方公里 yr-1&#xff0c;这主要是由农业扩张驱动的。热带森林砍伐向大气中排放 0:95 Pg C yr-1 并导致广泛的生物多样性丧失。保护区的生物多样性取决于与保护区所在的更广泛景观的生态…