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 SHOWdiv>
<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>
效果图：
