html+css制作
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>校园官网</title><style type="text/css">*{padding: 0;margin: 0;}#logo{width:30%;float: left;}.nav{width: 100%;height: 100px;background-color: #3D3BB8;}.nav-contair{width: 80%;height: 100px;margin: auto;}.nav-contnet{width: 69.5%;float: right;height: 100px;}.nav-top{line-height: 50px;height: 50px;vertical-align: middle;}.nav-top>input{float: right;height: 50%;border-radius: 10px;vertical-align: middle;}.nav-botttom>div{float: left;color: white;margin-right: 2.2%;font-size: 13px;height: 50px;line-height: 50px;}.nav-SY{color: white;text-decoration: none;}.nav-SY:hover{opacity: 0.5;}.nav-2>li>a{color: black;text-decoration: none;}.nav-2>li>a:hover{color: #3D3BB8;}.nav-1>div>a{color: white;text-decoration: none;}.nav-1>div>a:hover{opacity: 0.5;}.nav-1>div{position: relative;}.nav-2{text-align: center;font-size: 13px;margin-left:-20px ;width: 150px;background-color: white;display: none;list-style: none;position: absolute;}.nav-1>div:hover>.nav-2{display: block;}.banner-image{width: 100%;}.model-1{width: 100%;height: 700px;}.model-content{width: 80%;height: 700px;margin: auto;}.m-content{width: 100%;height:150px;}.title{width:700px;float: right;padding-top: 90px;}.title>span>a{font-size: 45px;color: #99999999;text-decoration: none;opacity:1;}.title>span>a:hover{opacity: 1;color: black;font-weight: bold;}.m-con-1{float:left;width: 690px;height: 550px;}.img-1>img{width: 690px;height:400px;margin-top: 35px;}.text>h2{text-align: center;padding-top:40px ;}#square-1{background-color: #3D3BB8;width: 80px;height: 10px;margin: auto;margin-top: 10px;border-radius:30%;}.m-con-2{float:right;width: 800px;height: 550px;}.m-con-2>div{width: 800px;height:75px;margin-top: 5%;}.samll-title>.st-1>img{float: left;height: 75px;width: 80px;}.samll-title>.st-2{float: right;width: 700px;height: 75px;}.model-2{width: 100%;height: 900px;background-color:lavender;}.video-content{width: 80%;height: 800px;margin: auto;}#video-title{width: 100%;height:40px;text-align: center; }.video-content>div:nth-child(2){color: white;opacity: 0.8;font-size: 32px;}.video-content>div:nth-child(3){color: black;font-size: 30px;}#square-2{background-color: #3D3BB8;width: 80px;height: 13px;margin: auto;margin-top: 10px;border-radius:30%;}video{width: 100%;height:650px;}</style></head><body><div class="container"><div class="nav"><div class="nav-contair"><img id="logo" src="华珠logo.png" alt=""><div class="nav-contnet"><div class="nav-top"><input type="text" placeholder="请输入搜索内容"></div><div class="nav-botttom"><div><a class="nav-SY" href="#">首页</a></div><div class="nav-1"><div><a href="#">学校概括</a><ul class="nav-2"><li><a href="#">学校简介</a></li><li><a href="#">现任领导</a></li><li><a href="#">校长寄语</a></li><li><a href="#">师资队伍</a></li><li><a href="#">校园风光</a></li><li><a href="#">华珠大事记</a></li><li><a href="#">华珠荣誉</a></li><li><a href="#">专业介绍</a></li></ul></div></div> <div><a class="nav-SY" href="#">信息公开专栏</a></div><div class="nav-1"><div><a href="#">机构设置</a><ul class="nav-2"><li><a href="#">行政部门</a></li><li><a href="#">二级学院</a></li></ul></div></div><div><a class="nav-SY" href="#">党建网</a></div><div><a class="nav-SY" href="#">教务管理</a></div><div class="nav-1"><div><a href="#">招生就业</a><ul class="nav-2"><li><a href="#">招生网</a></li><li><a href="#">小北就业</a></li></ul></div></div><div><a class="nav-SY" href="#">OA管理</a></div><div class="nav-1"><div><a href="#">教学资源</a><ul class="nav-2"><li><a href="#">数字图书资源</a></li><li><a href="#">图书系统</a></li><li><a href="#">图书搜索</a></li><li><a href="#">资产系统</a></li><li><a href="#">在线教学平台</a></li><li><a href="#">京广图书</a></li><li><a href="#">五车图书</a></li><li><a href="#">学工管理</a></li><li><a href="#">数字化实习实训平台</a></li><li><a href="#">实训平台</a></li><li><a href="#">校友系统</a></li><li><a href="#">心理测评</a></li></div></div><div><a class="nav-SY" href="#">加入我们</a></div></div></div></div></div><div class="banner"><img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/a0dd4ff9189594a13737700e97eb6a9.jpg" alt="" class="banner-image"></div><div class="model-1"><div class="model-content"><div class="m-content"><div class="title"><span><a href="#">新闻头条 </a></span><span><a href="#">部门动态 </a></span><span><a href="#">学院通告 </a></span></div></div><div class="m-con-1"><div class="img-1"><img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2023/03/1-12.jpg" alt=""></div><div class="text"><div id="square-1"></div></div></div><div class="m-con-2"><div class="samll-title"><div class="st-1"><img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/12/1-13.jpg" alt=""></div><div class="st-2"><h3>设计学院师生赴云南开展采风写生教学实践</h3><p>近日，我校设计学院组织2022级戏剧影视美术设计、环境设计专业200余名学生赴云南开展采风<br>写生课程。 采风写生 […]</p></div></div><div class="samll-title"><div class="st-1"><img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2023/03/1-11.jpg" alt=""></div><div class="st-2"><h3>热土之上，“乡”遇未来|华珠第十四届主持人大赛决赛精彩来袭！</h3><p></p></div></div><div class="samll-title"><div class="st-1"><img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/12/12321.png" alt=""></div><div class="st-2"><h3>喜报 | 华珠商学院5项大学生创新创业训练计划项目获2022年国家级、省级立项</h3><p></p></div></div><div class="samll-title"><div class="st-1"><img src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/12/2-3.jpg" alt=""></div><div class="st-2"><h3>喜报三连！华珠信息工程学院再添新誉</h3><p></p></div></div></div></div></div><div class="model-2"><div class="video-content"><div id="video-title"></div><div id="video-title">VIDEO SHOW</div><div id="video-title">视频展播</div><div id="video-title"><div id="square-2"></div></div><div><video src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/2022%E8%BF%8E%E6%96%B0%E8%8A%B1%E7%B5%AE-1.mp4" controls="controls" muted="muted" autoplay="autoplay"></video></div></div></div></div></body>
</html>
效果图：
相关文章：
html+css制作
<!DOCTYPE html> <html><head><meta charset"utf-8"><title>校园官网</title><style type"text/css">*{padding: 0;margin: 0;}#logo{width:30%;float: left;}.nav{width: 100%;height: 100px;background-color…...
Python实现rar、zip和7z文件的压缩和解压
一、7z压缩文件的压缩和解压 1、安装py7zr 我们要先安装py7zr第三方库： pip install py7zr如果python环境有问题，执行上面那一条安装语句老是安装在默认的python环境的话，我们可以执行下面这条语句，将第三方库安装在项目的虚拟…...
从Hive源码解读大数据开发为什么可以脱离SQL、Java、Scala
从Hive源码解读大数据开发为什么可以脱离SQL、Java、Scala 前言 【本文适合有一定计算机基础/半年工作经验的读者食用。立个Flg，愿天下不再有肤浅的SQL Boy】 谈到大数据开发，占据绝大多数人口的就是SQL Boy，不接受反驳，毕竟大…...
RocketMQ 事务消息 原理及使用方法解析
🍊 Java学习：Java从入门到精通总结 🍊 深入浅出RocketMQ设计思想：深入浅出RocketMQ设计思想 🍊 绝对不一样的职场干货：大厂最佳实践经验指南 📆 最近更新：2023年3月24日 &#x…...
为什么 ChatGPT 输出时经常会中断，需要输入“继续” 才可以继续输出？
作者：明明如月学长， CSDN 博客专家，蚂蚁集团高级 Java 工程师，《性能优化方法论》作者、《解锁大厂思维：剖析《阿里巴巴Java开发手册》》、《再学经典：《EffectiveJava》独家解析》专栏作者。 热门文章推荐…...
PyTorch 之 基于经典网络架构训练图像分类模型
文章目录一、 模块简单介绍1. 数据预处理部分2. 网络模块设置3. 网络模型保存与测试二、数据读取与预处理操作1. 制作数据源2. 读取标签对应的实际名字3. 展示数据三、模型构建与实现1. 加载 models 中提供的模型，并且直接用训练的好权重当做初始化参数2. 参考 pyto…...
Scrapy的callback进入不了回调方法
一、前言 有的时候，Scrapy的callback方法直接被略过了，不去执行其中的回调方法，可能排查好久都排查不出来，我来教大家集中解决方法。 yield Request(urlurl, callbackself.parse_detail, cb_kwargs{item: item})二、解决方法 1…...
第二十一天 数据库开发-MySQL
目录 数据库开发-MySQL 前言 1. MySQL概述 1.1 安装 1.2 数据模型 1.3 SQL介绍 1.4 项目开发流程 2. 数据库设计-DDL 2.1 数据库操作 2.2 图形化工具 2.3 表操作 3. 数据库操作-DML 3.1 增加(insert) 3.2 修改(update) 3.3 删除(delete) 数据库开发-MySQL 前言 …...
蓝桥杯每日一真题—— [蓝桥杯 2021 省 AB2] 完全平方数（数论，质因数分解）
文章目录[蓝桥杯 2021 省 AB2] 完全平方数题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1样例 #2样例输入 #2样例输出 #2提示思路：理论补充：完全平方数的一个性质：完全平方数的质因子的指数一定为偶数最终思路：小插曲&am…...
Linux编辑器-vim
一、vim简述1）vi/vim2）检查vim是否安装2)如何用vim打开文件3)vim的几种模式命令模式插入模式末行模式可视化模式二、vim的基本操作1)进入vim（命令行模式）2)[命令行模式]切换至[插入模式]3)[插入模式]切换至[命令行模式]4)[命令行模…...
5G将在五方面彻底改变制造业
想象一下这样一个未来，智能机器人通过在工厂车间重新配置自己，从多条生产线上组装产品。安全无人机处理着从监视入侵者到确认员工停车等繁琐的任务。自动驾驶汽车不仅可以在建筑物之间运输零部件，还可以在全国各地运输。工厂检查可以在千里之…...
http和https的区别？
http和https的区别？HTTPHTTPSHTTP与HTTPS区别HTTPS相比于HTTP协议的优点和缺点HTTP http是超文本传输协议 HTTP协议是基于传输层的TCP协议进行通信，通用无状态的协议。80端口 HTTPS https—安全的超文本传输协议 是以安全为目标的HTTP通道，…...
【Spring Cloud Alibaba】4.创建服务消费者
文章目录简介开始搭建创建项目修改POM文件添加启动类添加配置项添加Controller添加配置文件启动项目测试访问Nacos访问接口查看端点检查简介 接下来我们创建一个服务消费者，本操作先要完成之前的步骤，详情请参照【Spring Cloud Alibaba】Spring Cloud A…...
C语言——动态内存管理 malloc、calloc、realloc、free的使用
目录 一、为什么存在动态内存分配 二、动态内存函数的介绍 2.1malloc和free 2.2calloc 2.3realloc 三、常见的动态内存错误 3.1对NULL指针的解引用操作 3.2对动态开辟空间的越界访问 3.3对非动态开辟的内存使用free释放 3.4使用free释放一块动态开辟内存的一部分 3.5…...
技术分享——Java8新特性
技术分享——Java8新特性1.背景2. 新特性主要内容3. Lambda表达式4. 四大内置核心函数式接口4.1 Consumer<T>消费型接口4.2 Supplier<T>供给型接口4.3 Function<T,R>函数型接口4.4 Predicate<T> 断定型接口5. Stream流操作5.1 什么是流以及流的类型5.2…...
vue基础知识大全
1，指令作用 以v-开头，由vue提供的attribute，为渲染DOM应用提供特殊的响应式行为，也即是在表达式的值发生变化的时候响应式的更新DOM。其内容为可以被求值的js代码，可以写在return后面被返回的表达式。 指令的简写指令简…...
第2篇|文献研读|nature climate change|减缓气候变化和促进热带生物多样性的碳储量走廊
研究背景 从 2000 年到 2012 年，潮湿和干燥热带地区的森林总损失超过 90,000 平方公里 yr-1，这主要是由农业扩张驱动的。热带森林砍伐向大气中排放 0:95 Pg C yr-1 并导致广泛的生物多样性丧失。保护区的生物多样性取决于与保护区所在的更广泛景观的生态…...
从暴力递归到动态规划（2）小乖，你也在为转移方程而烦恼吗？
前引：继上篇我们讲到暴力递归的过程，这一篇blog我们将继续对从暴力递归到动态规划的实现过程，与上篇类似，我们依然采用题目的方式对其转化过程进行论述。上篇博客：https://blog.csdn.net/m0_65431718/article/details/…...
Leetcode.1638 统计只差一个字符的子串数目
题目链接 Leetcode.1638 统计只差一个字符的子串数目 Rating ： 1745 题目描述 给你两个字符串 s和 t，请你找出 s中的非空子串的数目，这些子串满足替换 一个不同字符 以后，是 t串的子串。换言之，请你找到 s和 t串中 恰…...
KoTime：v2.3.9新增线程管理（线程统计、状态查询等）
功能概览 KoTime的开源版本已经迭代到了V2.3.9，目前功能如下： 实时监听方法，统计运行时长web展示方法调用链路，瓶颈可视化追踪追踪系统异常，精确定位到方法接口超时邮件通知，无需实时查看线上热更新&…...
ElevenLabs安徽话输出失真？3类高频崩溃场景+5行Python代码实时修复音频相位偏移
更多请点击： https://codechina.net 第一章：ElevenLabs安徽话语音输出失真现象全景扫描 ElevenLabs 作为当前主流的高质量文本转语音（TTS）服务提供商，其多语言支持能力广受开发者青睐。然而，在面向中文方言…...
SQL 模糊查询 + NULL 空值。LIKE 通配符 % 和_、IS NULL
前言学会精准条件查询后，工作中又会遇到新难题：需要按关键词模糊搜索，比如搜姓张、名字带 “明” 的用户，不会写 LIKE；分不清 % 和 _ 两个通配符到底有什么区别，经常用错；数据表有空值 NULL&…...
2026 AI 培训机构怎么选？6 类人群精准匹配 + 避坑指南
随着大模型、多模态、RAG、Agent 技术持续迭代，企业对于 AI 算法开发、计算机视觉、自然语言处理、工程落地类人才的需求持续上涨。目前国内主流AI学习平台包含咕泡科技、科大讯飞AI大学堂、腾讯云智学堂、深兰科技人工智能教育等，各家平台技术侧重点、课…...
2026 年好用的事业编面试软件盘点：AI 驱动的结构化备考解决方案
文章摘要 随着 2026 年全国事业单位招聘考试进入高峰期，越来越多的考生开始借助专业软件进行面试备考。本文从技术架构、功能完整性、用户体验和备考效果四个维度，对当前市场上主流的事业编面试软件进行全面测评。经过多轮实际测试和用户反馈分析&#…...
如何在JavaScript中精确计算太阳位置和月亮相位：SunCalc终极指南
如何在JavaScript中精确计算太阳位置和月亮相位：SunCalc终极指南 【免费下载链接】suncalc A tiny JavaScript library for calculating sun/moon positions and phases. 项目地址: https://gitcode.com/gh_mirrors/su/suncalc 你是否曾想过，如何…...
：3分钟掌握浏览器资源嗅探的终极解决方案)
猫抓(Cat-Catch)：3分钟掌握浏览器资源嗅探的终极解决方案
猫抓(Cat-Catch)：3分钟掌握浏览器资源嗅探的终极解决方案 【免费下载链接】cat-catch 猫抓 浏览器资源嗅探扩展 / cat-catch Browser Resource Sniffing Extension 项目地址: https://gitcode.com/GitHub_Trending/ca/cat-catch 还在为无法保存在线视频而烦恼…...
突破macOS与Android文件传输瓶颈：OpenMTP的完整用户指南 [特殊字符]
突破macOS与Android文件传输瓶颈：OpenMTP的完整用户指南 🚀 【免费下载链接】openmtp OpenMTP - Advanced Android File Transfer Application for macOS 项目地址: https://gitcode.com/gh_mirrors/op/openmtp 还在为macOS和Android设备间的文件…...
电脑自动化 OpenClaw 安装教程 自然语言操控电脑
告别命令行！Windows OpenClaw 一键安装，5 分钟一键部署 ✨ 前言 OpenClaw（小龙虾）是一款能直接操控电脑的 AI 智能体，无需复杂配置、不用敲命令行，Windows 环境下全程可视化操作，5 分钟即可完…...
快速导出微信聊天记录：WeChatExporter让你轻松备份珍贵对话
快速导出微信聊天记录：WeChatExporter让你轻松备份珍贵对话 【免费下载链接】WeChatExporter 一个可以快速导出、查看你的微信聊天记录的工具 项目地址: https://gitcode.com/gh_mirrors/wec/WeChatExporter 你是否曾担心手机丢失或更换设备时，那…...
Lovable电商系统从零部署：手把手教你用Vue+Node+MongoDB搭建高转化率商城（含完整源码）
更多请点击： https://kaifayun.com 第一章：Lovable电商系统从零部署：手把手教你用VueNodeMongoDB搭建高转化率商城（含完整源码） Lovable电商系统是一套面向中小企业的轻量级高转化率商城解决方案，采用前后…...