当前位置: 首页 > news >正文

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="#">新闻头条&nbsp;&nbsp;</a></span><span><a href="#">部门动态&nbsp;&nbsp;</a></span><span><a href="#">学院通告&nbsp;&nbsp;</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第三方库&#xff1a; pip install py7zr如果python环境有问题&#xff0c;执行上面那一条安装语句老是安装在默认的python环境的话&#xff0c;我们可以执行下面这条语句&#xff0c;将第三方库安装在项目的虚拟…...

从Hive源码解读大数据开发为什么可以脱离SQL、Java、Scala

从Hive源码解读大数据开发为什么可以脱离SQL、Java、Scala 前言 【本文适合有一定计算机基础/半年工作经验的读者食用。立个Flg&#xff0c;愿天下不再有肤浅的SQL Boy】 谈到大数据开发&#xff0c;占据绝大多数人口的就是SQL Boy&#xff0c;不接受反驳&#xff0c;毕竟大…...

RocketMQ 事务消息 原理及使用方法解析

&#x1f34a; Java学习&#xff1a;Java从入门到精通总结 &#x1f34a; 深入浅出RocketMQ设计思想&#xff1a;深入浅出RocketMQ设计思想 &#x1f34a; 绝对不一样的职场干货&#xff1a;大厂最佳实践经验指南 &#x1f4c6; 最近更新&#xff1a;2023年3月24日 &#x…...

为什么 ChatGPT 输出时经常会中断,需要输入“继续” 才可以继续输出?

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;蚂蚁集团高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《EffectiveJava》独家解析》专栏作者。 热门文章推荐…...

PyTorch 之 基于经典网络架构训练图像分类模型

文章目录一、 模块简单介绍1. 数据预处理部分2. 网络模块设置3. 网络模型保存与测试二、数据读取与预处理操作1. 制作数据源2. 读取标签对应的实际名字3. 展示数据三、模型构建与实现1. 加载 models 中提供的模型&#xff0c;并且直接用训练的好权重当做初始化参数2. 参考 pyto…...

Scrapy的callback进入不了回调方法

一、前言 有的时候&#xff0c;Scrapy的callback方法直接被略过了&#xff0c;不去执行其中的回调方法&#xff0c;可能排查好久都排查不出来&#xff0c;我来教大家集中解决方法。 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提示思路&#xff1a;理论补充&#xff1a;完全平方数的一个性质&#xff1a;完全平方数的质因子的指数一定为偶数最终思路&#xff1a;小插曲&am…...

Linux编辑器-vim

一、vim简述1&#xff09;vi/vim2&#xff09;检查vim是否安装2)如何用vim打开文件3)vim的几种模式命令模式插入模式末行模式可视化模式二、vim的基本操作1)进入vim&#xff08;命令行模式&#xff09;2)[命令行模式]切换至[插入模式]3)[插入模式]切换至[命令行模式]4)[命令行模…...

5G将在五方面彻底改变制造业

想象一下这样一个未来&#xff0c;智能机器人通过在工厂车间重新配置自己&#xff0c;从多条生产线上组装产品。安全无人机处理着从监视入侵者到确认员工停车等繁琐的任务。自动驾驶汽车不仅可以在建筑物之间运输零部件&#xff0c;还可以在全国各地运输。工厂检查可以在千里之…...

http和https的区别?

http和https的区别&#xff1f;HTTPHTTPSHTTP与HTTPS区别HTTPS相比于HTTP协议的优点和缺点HTTP http是超文本传输协议 HTTP协议是基于传输层的TCP协议进行通信&#xff0c;通用无状态的协议。80端口 HTTPS https—安全的超文本传输协议 是以安全为目标的HTTP通道&#xff0c;…...

【Spring Cloud Alibaba】4.创建服务消费者

文章目录简介开始搭建创建项目修改POM文件添加启动类添加配置项添加Controller添加配置文件启动项目测试访问Nacos访问接口查看端点检查简介 接下来我们创建一个服务消费者&#xff0c;本操作先要完成之前的步骤&#xff0c;详情请参照【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&#xff0c;指令作用 以v-开头&#xff0c;由vue提供的attribute&#xff0c;为渲染DOM应用提供特殊的响应式行为&#xff0c;也即是在表达式的值发生变化的时候响应式的更新DOM。其内容为可以被求值的js代码&#xff0c;可以写在return后面被返回的表达式。 指令的简写指令简…...

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

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

从暴力递归到动态规划(2)小乖,你也在为转移方程而烦恼吗?

前引&#xff1a;继上篇我们讲到暴力递归的过程&#xff0c;这一篇blog我们将继续对从暴力递归到动态规划的实现过程&#xff0c;与上篇类似&#xff0c;我们依然采用题目的方式对其转化过程进行论述。上篇博客&#xff1a;https://blog.csdn.net/m0_65431718/article/details/…...

Leetcode.1638 统计只差一个字符的子串数目

题目链接 Leetcode.1638 统计只差一个字符的子串数目 Rating &#xff1a; 1745 题目描述 给你两个字符串 s和 t&#xff0c;请你找出 s中的非空子串的数目&#xff0c;这些子串满足替换 一个不同字符 以后&#xff0c;是 t串的子串。换言之&#xff0c;请你找到 s和 t串中 恰…...

KoTime:v2.3.9新增线程管理(线程统计、状态查询等)

功能概览 KoTime的开源版本已经迭代到了V2.3.9&#xff0c;目前功能如下&#xff1a; 实时监听方法&#xff0c;统计运行时长web展示方法调用链路&#xff0c;瓶颈可视化追踪追踪系统异常&#xff0c;精确定位到方法接口超时邮件通知&#xff0c;无需实时查看线上热更新&…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...