电脑基础 · 2023年3月26日

学校官网的制作

学校官网

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.top{
				background-color: #3D3BB8;
				width: 100%;
				position: fixed;
				padding: 20px 0 12px 0;
			}
			.box{
				width: 75%;
				height: 80px;
				margin: 0 auto;
			}
			.logo{
				width: 326.2px;
				height: 58.8px;
				float: left;
				margin-top: 10px;
			}
			.right{
				float: left;
			}
			.logo img{
				display: block;
				width: 326.2px;
				height: 58.8px;
			}
			.right div:nth-child(1){
				margin-left: 528px;
				position: relative;
			}
			.right div:nth-child(2){
				height: 27px;
				margin-top: 25px;
			}
			.right div:nth-child(1) input{
				padding: 11px 70px 11px 40px;
				border-radius: 23px;
			}
			.right div:nth-child(1) button{
				background-image: url("");
				width: 20px;
				height: 20px;
				position: absolute;
				left: 210px;
				top: 25%;
				border: none;
				background-color: white;
			}
			.right_two li{
				list-style: none;
				float: left;
				text-align: center;
				font-size: 13px;
				color: white;
				margin-left: 30px;
				position: relative;
			}
			.one, .one img{
				width: 100%;
				display: block;
			}
			.two{
				width: 100%;
				height: 795px;
				background-repeat: no-repeat;
				background-position: right;
				background-image: url("");
			}
			.two_box{
				width: 75%;
/* 				height: 795px; */
				margin: 0 auto;
/* 				padding: 88px 0; */
			}
			.two_box ul{
				list-style: none;
				float: right;
				margin-right: 12px;
			}
			.two_box ul li{
				float: left;
				margin-left: 35px;
				font-size: 18px;
			}
			.box_one{
				margin-top: 50px;
			}
			.box_one div:nth-child(1){
				width: 400px;
				height: 400px;
				float: left;
			}
			.box_one div:nth-child(2), .box_one div:nth-child(2) ul{
				float: left;
				width: 725px;
				height: 530px;
			}
			.box_one div:nth-child(1) img{
				width: 400px;
				height: 400px;
			}
			.box_one div:nth-child(2) li{
				margin-bottom: 30px;
				height: 79px;
				width: 100%;
			}
			.time{
				height: 79px;
				width: 65px;
				background-color: blue;
				display: inline-block;
				color: white;
				float: left;
			}
			.time i{
				font-size: 36px;
				margin-left: 8px;
			}
			.time em{
				font-size: 15px;
				margin-left: 2px;
			}
			.text{
				width: 600px;
				height: 79px;
				display: inline-block;
				float: left;
				font-size: 15px;
				margin-left: 24px;
			}
			.text:hover{
				color: blue;
			}
			.three{
				height: 125px;
				width: 400px;
				float: left;
				text-align: center;
				position: relative;
			}
			.three span{
				font-size: 40px;
				position: absolute;
				top: -20px;
				left: 141px;
				color: rgba(0, 0, 0, 0.2);
			}
			.three h2::after{
				content: '';
				width: 100px;
				height: 9px;
				background-color: blue;
				border-radius: 10px;
				display: block;
				position: absolute;
				left: 150px;
				margin-top: 5px;
			}
			.four{
				width: 100%;
				height: 795px;
				padding: 50px 0;
				background-image: url("");
			}
			.title_one span{
				display: block;
				text-align: center;
			}
			.title_one span:nth-child(1){
				font-size: 22px;
				font-weight: 900;
				color: rgba(255, 255, 255, 0.7);
			}
			.title_one span:nth-child(2){
				font-size: 19px;
				font-weight: 900;
			}
			.four .title_one::after{
				content: '';
				width: 80px;
				height: 9px;
				background-color: blue;
				border-radius: 10px;
				display: block;
				position: absolute;
				left: 720px;
				margin-top: 5px;
			}
			video{
				width: 100%;
			}
			.title_two{
				width: 100%;
				height: 520px;
				margin-top: 44px;
			}
			video{
				height: 100%;
			}
			.top_list{
				width: 112px;
				position: absolute;
				right: -30px;
				background-color: white;
				margin-top: 21px;
				display: none;
			}
			.top_list li{
				color: black;
				font-size: 15px;
				margin-left: 25px;
				margin-top: 10px;
			}
			.top_list li:hover{
				color: blue;
			}
			.right_two li:hover .top_list{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="top">
			<div class="box">
				<div class="logo">
					<img src="" alt="加载失败">
				</div>
				<div class="right">
					<div>
						<form action="#">
							<input type="text" placeholder="请输入搜索内容">
							<button></button>
						</form>
					</div>
					<div class="right_two">
						<ul>
							<li>首页</li>
							<li>
								学校概况
								<ul class="top_list">
									<li>学校简介</li>
									<li>现任领导</li>
									<li>校长寄语</li>
									<li>师资队伍</li>
									<li>校园风光</li>
									<li>华珠大事记</li>
									<li>华珠荣誉</li>
									<li>专业介绍</li>
								</ul>
							</li>
							<li>信息公开专栏</li>
							<li>
								机构设置
								<ul class="top_list">
									<li>行政部门</li>
									<li>二级学院</li>
								</ul>
							</li>
							<li>党建网</li>
							<li>教务管理</li>
							<li>
								招生就业
								<ul class="top_list">
									<li>招生网</li>
									<li>小北就业</li>
								</ul>
							</li>
							<li>OA管理</li>
							<li>
								数字资源
								<ul class="top_list" style="width: 165px; right: -50px;">
									<li>数字图书资源</li>
									<li>图书系统</li>
									<li>图书搜索</li>
									<li>资产系统</li>
									<li>在线教学平台</li>
									<li>京广图书</li>
									<li>五车图书</li>
									<li>学工管理</li>
									<li>数字化实习实训平台</li>
									<li>实训平台</li>
									<li>校友系统</li>
									<li>心理测评</li>
								</ul>
							</li>
							<li>加入我们</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="one">
			<div>
				<img src="" alt="加载失败">
			</div>
		</div>
		<div class="two">
			<div class="two_box" style="height: 795px; padding: 88px 0;">
				<ul>
					<li>新闻头条</li>
					<li>部门动态</li>
					<li>学院通告</li>
				</ul>
				<div class="box_one">
					<div>
						<img src="" alt="加载失败">
					</div>
					<div>
						<ul>
							<li>
								<span class="time">
									<i>21</i>
									<em>2023.03</em>
								</span>
								<span class="text">
									<strong>华珠信息工程学院举办“随机建模与联邦学习框架的研究”学术论坛</strong>
								</span>
							</li>
							<li>
								<span class="time">
									<i>20</i>
									<em>2023.03</em>
								</span>
								<span class="text">
									<strong>热土之上,“乡”遇未来 | 华珠第十四届主持人大赛决赛精彩来袭!</strong>
								</span>
							</li>
							<li>
								<span class="time">
									<i>19</i>
									<em>2023.03</em>
								</span>
								<span class="text">
									<strong>资讯速递 | 华珠2023届毕业生春季空中双选会助力就业</strong>
								</span>
							</li>
							<li>
								<span class="time">
									<i>18</i>
									<em>2023.03</em>
								</span>
								<span class="text">
									<strong>职场直通车 | 广东省2023届高校毕业生线下校园双选会华珠站入驻企业招募中</strong>
								</span>
							</li>
						</ul>
					</div>
					<div class="three">
						<h2>
							新闻头条
						</h2>
						<span>NEWS</span>
					</div>
				</div>
			</div>
		</div>
		<div class="four">
			<div class="two_box" style="height: 618px; ">
				<div class="title_one">
					<span>VIDEO SHOW</span>
					<span>视频展播</span>
				</div>
				<div class="title_two">
					<video src="https://www.scauzj.edu.cn/wp-content/uploads/sites/20/2022/11/2022迎新花絮-1.mp4" controls="controls"></video>
				</div>
			</div>
		</div>
	</body>
</html>