学校官网
<!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;
/* border: 1px solid red; */
}
.nav-contnet{
width: 69.5%;
float: right;
height: 100px;
/* border: 1px solid black; */
}
.nav-top{
height: 50px;
/* border: 1px solid yellow ; */
}
.nav-top>input{
float: right;
height: 50%;
border-radius: 15%;
vertical-align: middle;
}
.nav-botttom>div{
float: left;
color: white;
margin-right: 3.5%;
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;
}
.nav-3>li>a{
color: black;
text-decoration: none;
}
.nav-3{
text-align: center;
font-size: 13px;
margin-left:150px ;
margin-top: -50px;
width: 150px;
background-color: white;
display: none;
list-style: none;
position: absolute;
}
.nav-2>li{
position: relative;
}
.nav-2>li:hover>.nav-3{
display: block;
}
.banner-image{
width: 100%;
}
.model-1{
width: 100%;
height: 700px;
/* background-color: aqua; */
}
.model-content{
width: 80%;
height: 700px;
/* background-color: antiquewhite; */
margin: auto;
}
.m-content{
width: 100%;
height:150px;
/* background-color: cornflowerblue; */
}
.title{
width:700px;
float: right;
padding-top: 90px;
/* border: 1px solid red; */
}
.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;
/* background-color: gainsboro; */
}
.img-1>img{
width: 690px;
height:400px;
margin-top: 35px;
}
.text>h2{
text-align: center;
padding-top:40px ;
}
#square-1{
/* border: 1px solid rebeccapurple; */
background-color: #3D3BB8;
width: 80px;
height: 10px;
margin: auto;
margin-top: 10px;
border-radius:30%;
}
.m-con-2{
float:right;
width: 800px;
height: 550px;
/* background-color:gold; */
}
.m-con-2>div{
width: 800px;
height:75px;
/* border: 1px solid red; */
margin-top: 5%;
}
.samll-title>.st-1>img{
float: left;
height: 75px;
width: 80px;
/* border: 1px solid rebeccapurple; */
}
.samll-title>.st-2{
float: right;
width: 700px;
height: 75px;
/* border: 1px solid greenyellow; */
}
.model-2{
width: 100%;
height: 900px;
background-color:lavender;
}
.video-content{
width: 80%;
height: 800px;
/* background-color: antiquewhite; */
margin: auto;
}
#video-title{
width: 100%;
height:40px;
/* border: 1px solid red; */
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="./pic/主页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>
<ul class="nav-3">
<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>
</ul>
</li>
<li>
<a href="#">二级学院</a>
<ul class="nav-3">
<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>
</ul>
</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="./pic/跟党走.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="./pic/通知-1.jpg" alt="">
</div>
<div class="text">
<h2>部门动态</h2>
<div id="square-1"></div>
</div>
</div>
<div class="m-con-2">
<div class="samll-title">
<div class="st-1"><img src="./pic/18.png" 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="./pic/15.png" alt=""></div>
<div class="st-2">
<h3>华珠举办2023年参军入伍学生欢送座谈会</h3>
<p></p>
</div>
</div>
<div class="samll-title">
<div class="st-1"><img src="./pic/13-1.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="./pic/13-1.png" 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="./vido/2022迎新花絮-1.mp4" controls="controls" muted="muted" autoplay="autoplay"></video>
</div>
</div>
</div>
</div>
</body>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
