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>

效果图:
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/3346.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

mybatis如何解析常用的标签

通过这三行就解析好了一个mybatis配置文件&#xff0c;我们看看如何工作的&#xff1f; String resource "mybatis-config.xml"; Reader reader Resources.getResourceAsReader(resource); SqlSessionFactory sqlSessionFactory new SqlSessionFactoryBuilder().b…

【进阶C语言】qsort库函数(详解)

qsort库函数1. qsort到底是什么&#xff1f;2. qsort库函数的功能3. qosrt函数详解4. 冒泡排序的实现5. qsort库函数如何实现冒泡排序6. qsort库函数排序结构体数据7. 使用冒泡排序的思想来实现类似于qsort1. qsort到底是什么&#xff1f; qsort是C语言库函数里面的一种&#x…

【Flutter·学习实践·配置】认识配置文件pubspec.yaml

目录 简介 pubspec.yaml 添加Pub仓库 其他依赖方式 依赖本地包 依赖Git 简介 简单说就是包管理工具&#xff0c;类似于Android 提供了 Gradle 来管理依赖&#xff0c;iOS 用 Cocoapods 或 Carthage 来管理依赖&#xff0c;Node 中通过 npm 等。 让我们能很好的管理第三…

固定优先级仲裁器设计

前言仲裁器Arbiter是数字设计中非常常见的模块&#xff0c;应用也非常广泛。定义就是当有两个或两个以上的模块需要占用同一个资源的时候&#xff0c;我们需要由仲裁器arbiter来决定哪一个模块来占有这个资源。一般来说&#xff0c;提出占有资源的模块要产生一个请求(request)&…

电脑硬盘文件数据误删除/格式化为什么可以恢复? 怎么恢复?谈谈文件删除与恢复背后的原理

Hello 大家好&#xff0c; 我是元存储~ 主页&#xff1a;元存储的博客_CSDN博客 1. 硬盘数据丢失场景 我们在每天办公还是记录数据的时候&#xff0c;文件存储大多数都是通过硬盘进行存储的&#xff0c;因此&#xff0c;使用多了&#xff0c;各种问题就会出现&#xff0c;比如…

【C++初阶】五、内存管理

文章目录1. C/C内存分布2. C语言中动态内存管理3. C中动态内存管理方式new/delete操作内置类型new和delete操作自定义类型4.C和C在内存申请失败时处理方式的区别5. operator new与operator delete函数6. new和delete的实现原理内置类型自定义类型7. 定位new表达式(placement-ne…

【 Spark编程基础 】实验1

文章目录第1部分&#xff1a;虚拟机的准备工作1.1 下载安装虚拟机1.2 修改主机名1.3 主机ip映射安装SSH服务端SFTP连接&#xff0c;传输安装包安装Java环境第2部分 Hadoop安装2.1 安装Hadoop第3部分 配置集群环境第4部分 Spark安装第1部分&#xff1a;虚拟机的准备工作 1.1 下…

【设计模式-工厂方法】想象力和创造力:你考虑过自动化实现工厂吗?

无限思维-想象力和创造力&#xff1a;自动化实现工厂方法前言一、《大话设计模式》对应的Java版本工厂方法类图先行&#xff1a;代码实现&#xff1a;思考升华&#xff1a;二、想象力&#xff1a;创新型思维解决思路战略上&#xff1a;以无限思维的角度去想问题&#xff1a;部署…

SpringBoot整合数据可视化大屏使用

1 前言 DataV数据可视化是使用可视化应用的方式来分析并展示庞杂数据的产品。DataV旨让更多的人看到数据可视化的魅力,帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用,满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求, 访问地址:h…

文件上传的多种利用方式

文件上传的多种利用方式 文件上传漏洞除了可以通过绕过检测进行webshell的上传之外&#xff0c;还有多种其它的漏洞可以进行测试。 XSS漏洞 文件名造成的XSS 当上传任何文件时&#xff0c;文件名肯定是会反显示在网页上&#xff0c;可以使用 XSS Payload做文件名尝试将其上传到…

upload—labs(9-12)

pass9直接查看的源码&#xff0c;得知是黑名单过滤&#xff0c;而且过滤也都很全通过查看wp&#xff0c;得知我们可以使用. .(点空格点)进行绕过利用bp抓包进行更改trim删除文件名末尾的点&#xff0c;得到shell.php.空格&#xff0c;然后进行首尾去空得到shell.php.,黑名单过滤…

Java并发高频面试题

分享50道Java并发高频面试题。 线程池 线程池&#xff1a;一个管理线程的池子。 为什么平时都是使用线程池创建线程&#xff0c;直接new一个线程不好吗&#xff1f; 嗯&#xff0c;手动创建线程有两个缺点 不受控风险频繁创建开销大 为什么不受控&#xff1f; 系统资源有…

【机器学习基础 3】 sklearn库

目录 一、sklearn库简介 二、sklearn库安装 三、关于机器学习 四、sklearn库在机器学习中的应用 1、数据预处理 2、特征提取 3、模型选择与评估 五、常用的sklearn函数 1、数据集划分 2、特征选择 3、特征缩放 4、模型训练 5、模型预测 一、sklearn库简介 Scikit-l…

基于卷积神经网络进行股价预测(Matlab代码实现)

目录 &#x1f4a5;1 概述 &#x1f4da;2 运行结果 &#x1f389;3 参考文献 &#x1f468;‍&#x1f4bb;4 Matlab代码 &#x1f4a5;1 概述 CNN是一种人工神经网络&#xff0c;CNN的结构可以分为3层&#xff1a; 卷积层(Convolutional Layer) - 主要作用是提取特征。 …

C语言基础——流程控制语句

文章目录一、流程控制语句 -- 控制程序的运行过程 9条&#xff08;一&#xff09;、条件选择流程控制语句&#xff1a;if语句if……else……语句if……else if……语句switch语句&#xff08;二&#xff09;、循环流程控制语句&#xff1a;for语句while语句do while……语句co…

Linux学习之端口、网络协议及查看端口占用情况

端口&#xff1a;设备与外界通讯交流的出口 网络协议&#xff1a;   网络协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则。 HTTP协议&#xff1a;   HTTP协议&#xff08;超文本传输协议&#xff09;是一种网络通信协议&#xff0c;它允许将超…

Mac和Linux安装Mongodb教程

Mac教程 在mongodb的官网中有mac环境的安装配置说明 在mac上安装mongodb有两种方式&#xff1a; &#xff08;1&#xff09;使用Homebrew来安装&#xff0c;如果电脑中有Homebrew&#xff0c;安装起来就比较简单&#xff0c;如果没有可以安装一个&#xff0c;以后安装其他的…

【C++学习】多态

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 多态&#x1f355;多态&#x1f35f;构成多态的条件&#x1f35f;C11 final override&#x1f35f;重…

thinkphp+vue水果购物商城网站

需要解决的主要问题&#xff1a; 1、网页编程环境和工具。 2、后台数据库的管理。 3、网站的基本功能建设。 4、对比实际应用中的购物网站的功能和运作流程&#xff0c;完善程序功能。 水果购物商城系统的主要使用者分为管理员&#xff1b;个人中心、用户管理、水果分类管理…

支持RT-Thread最新版本的瑞萨RA2E1开发板终于要大展身手了

支持RT-Thread最新版本的瑞萨RA2E1开发板终于要大展身手了 熟悉RT-Thread和瑞萨MCU的朋友都知道&#xff0c;当前RT-Thread仓库的主线代码是不支持RA2E1这个BSP的。刚好&#xff0c;最近我在联合瑞萨推广一个叫《致敬未来的攻城狮计划》&#xff0c;使用的就是RA2E1开发板&…