学校官网的设计与制作（学校官网的制作）

时间2025-07-12 16:51:47分类IT科技浏览4790

导读：学校官网代码...

学校官网

代码

<!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>