用web前端写出一个高校官网

所实现的效果如链接：

http://127.0.0.1:5500/school.html

<!DOCTYPE html>

<html>

<head>

<title>xigongshang</title>

<style>

* {margin: 0;padding: 0;}

text-decoration: none;

}

ol, ul {

list-style: none;

}

ul > li >a{

color: rgb(255, 255, 255);

font-size: 22px;

}

.header{

background: #fff;

position: fixed;

z-index: 2;

width: 100%;

transition: all .5s;

}

.box{

width: 1200px;

height:60px;

margin: auto;

}

.box > img {

width: 400px;

height: 60px;

}

.box > input{

position: absolute;

left: 1200px;

top: 10px;

width: 200px;

padding:10px 10px;

border-radius:5px;

border-color: #B8B8B8;

box-sizing: border-box;

font-size: 15px;

}

.nav {

height: 60px;

background-color: #A7232D;

}

.nav > ul {

width: 1300px;

margin: auto;

height: 60px;

}

.nav > ul > li {

height: 60px;

width: 140px;

float: left;

text-align: center;

line-height: 60px;

}

.nav > ul >li :hover {

color: rgb(108, 32, 32);

background-color: rgb(255, 253, 253);

display: block;

}

.nav > ul :hover .box1 {

display: block;

}

.box1{

background-color: #fff;

color: rgb(201, 27, 27);

display: none;

height: 240px;

width: 400px;

cursor: pointer;

}

.box1 >p> img{

margin-top: 20px;

width: 150px;

height: 190px;

float: left;

margin-left: 10px;

cursor: pointer;

}

.box1 > p >a{

color: #000000;

text-decoration: none;

margin-right: 20px;

font-size: 20px;

font-weight: bold;

font-family: 宋体;

}

.body1{

background: #8d1d26;

}

.body1> img {

margin-top: 120px;

width: 100%;

height: 900px;

}

.body2{

width: 2000px;

height: 900px;

background-color: #8d1d26;

position: relative;

margin: auto;

}

.title{

width: 1200px;

height: 100px;

left: 400px;

top: 50px;

position: absolute;

}

.title > span{

font-size: 60px;

color: #fff;

margin-left: 500px;

}

.title > p{

font-size: 20px;

color: #fff;

margin-left: 275px;

font-family: 宋体;

}

.body2 > .p1 > div:hover{

background: #de6262ae;

color: #ffffff;

cursor: pointer;

}

.p1 {

width: 450px;

height: 470px;

position: absolute;

top: 190px;

left: 280px;

background: url(./wb前端/img/zp1.png);

}

.p1 > div{

width: 400px;

height: 100px;

position: absolute;

left: 15px;

top:350px;

background-color: #ffffff98;

font-size: 22px;

/*white-space: nowrap;文字后面三点*/

overflow: hidden;

text-overflow: ellipsis;

color: #000000

}

.p2 :hover{

background-color: #b3353f;

color: #ffffff;

}

.p2 {

width: 500px;

height: 470px;

position: absolute;

top: 190px;

left: 780px;

}

.p2_1{

width: 450px;

height: 230px;

position: absolute;

background-color: rgb(252, 252, 252);

}

.p2_1_1{

position: absolute;

top: 15px;

font-size: 27px;

left: 10px;

width: 400px;

height: 40px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.p2_1_2{

position: absolute;

top: 60px;

font-size: 17px;

left: 10px;

width: 400px;

height: 55px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.p2_1_3{

position: absolute;

top: 130px;

font-size: 30px;

left: 10px;

}

.p2_1_4{

position: absolute;

top: 170px;

font-size: 17px;

left: 10px;

}

.p2_2{

width: 450px;

height: 230px;

position: absolute;

top: 240px;

background-color: rgb(255, 255, 255);

}

.p3 :hover{

background-color: #b3353f;

color: #ffffff;

}

.p3 {

width: 500px;

height: 470px;

position: absolute;

top: 190px;

left: 1290px;

}

.p3_1{

width: 450px;

height: 153px;

position: absolute;

background-color: rgb(255, 255, 255);

}

.p3_1_1{

width: 150px;

height: 153px;

position: absolute;

}

.p3_1_1 >div{

top: 20px;

left: 15px;

font-size: 45px;

position: absolute;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

}

.p3_1_1 >span{

top: 75px;

left: 15px;

font-size: 25px;

position: absolute;

}

.p3_1_2{

width: 300px;

height: 153px;

float: right;

}

.p3_1_2 > div{

top: 40px;

left: 150px;

font-size: 27px;

position: absolute;

}

.p3_2{

width: 450px;

height: 153px;

position: absolute;

top: 160px;

background-color: rgb(255, 255, 255);

}

.p3_3{

width: 450px;

height: 153px;

position: absolute;

top:320px;

background-color: rgb(255, 255, 255);

}

.body3{

width: 2000px;

height: 900px;

background-color: #0e1a55d4;

margin: auto;

position: relative;

}

.part{

width: 1600px;

height: 440px;

margin-left:155px;

/* border: 1px solid black; */

position: absolute;

top: 200px;

}

.par {

width: 350px;

height: 430px;

margin-left: 50px;

background-image: url(./wb前端/img/屏幕截图\ 2024-11-06\ 162958.png);

/* background-size: 275px 350px; */

float: left;

/* border: 1px solid black; */

}

.par>.pa {

width: 75px;

height: 75px;

margin-top: 20px;

margin-left: 250px;

padding-top: 15px;

background-color: rgba(107, 104, 104, 0.721);

text-align: left;

color: rgb(3, 3, 3);

/* border: 1px solid black; */

}

.par>.p {

width: 350px;

height: 75px;

margin-top: 245px;

background-color: #696969aa;

overflow: hidden;

text-overflow: ellipsis;

color: rgb(0, 0, 0);

transition: 1s;

}

.par>.p:hover {

margin-top: 45px;

height: 275px;

}

.body4{

width: 2000px;

height: 800px;

background-color: #c1c1c1d4;

margin: auto;

position: relative;

}

.flex-container2{

display: flex;

-webkit-flex-wrap: wrap;

flex-wrap: wrap;

width: 1570px;

height: 450px;

position: absolute;

top: 190px;

left: 280px;

/* background-color: #27855ed4; */

}

.subject{

width: 350px;

height: 200px;

/*background-color: rgb(255, 255, 255); */

margin: 20px;

display: flex;

flex-direction: column;

}

.body5{

width: 2000px;

height: 1400px;

background-image: linear-gradient(rgb(184, 49, 49),rgba(152, 150, 150, 0.74),#ffffff);

margin: auto;

position: relative;

}

.charming_campus {

display: -webkit-flex;

display: flex;

width: 1500px;

height: 470px;

position: absolute;

top: 190px;

left: 280px;

/* background-color: #27855ed4; */

}

.charming {

width: 500px;

height: 500px;

margin: 37px;

display: flex;

flex-direction: column;

justify-content: space-evenly;

/* background-color: #273285d4; */

background: url(./wb前端/img/picture.png);

}

.campus{

width: 400px;

height: 500px;

margin: 37px;

display: flex;

flex-direction: column;

justify-content: space-evenly;

text-transform: uppercase;

transition: all 0.5s;

/* background-color: #273285d4; */

}

.campus :hover{

transform: scale(1.1);

cursor: pointer;

}

.cp1{

width: 400px;

height: 235px;

background: url(./wb前端/img/huiyi.jpg);

position: absolute;

top: 37px;

transition: 1s;

}

.cp{

font-size: 40px;

position: absolute;

top: 80px;

left: 150px;

color: #ffffff;

}

.cp2{

width: 400px;

height: 235px;

position: absolute;

top:305px;

background-color: rgba(197, 183, 29, 0.694);

transition: 1s;

}

.cp3{

width: 400px;

height: 235px;

background-color: rgba(197, 183, 29, 0.568);

position: absolute;

top: 37px;

transition: 1s;

}

.cp4{

width: 400px;

height: 235px;

position: absolute;

top:305px;

background: url(./wb前端/img/sport.jpg);

transition: 1s;

}

.charming_campus1 {

display: -webkit-flex;

display: flex;

width: 1500px;

height: 500px;

position: absolute;

top: 800px;

left: 280px;

/* background-color: #27855ed4; */

text-transform: uppercase;

transition: all 1s;

}

.c1:hover{

transform: scale(1.08)

}

.c1{

/* background-color: rgb(0, 255, 187); */

width: 410px;

height: 500px;

margin-left: 70px;

transition: 1s;

}

.cc1 {

background-color: rgb(255, 255, 255);

width: 410px;

height: 410px;

/* margin: 33px; */

border-radius: 15px;

margin-top: 90px;

}

.cc1_1{

background: url(./wb前端/img/zhoashen.png);

width: 350px;

height: 140px;

border:1px solid #fff;

position: absolute;

top: 10px;

margin-left: 25px;

border-radius: 15px;

}

.cc1_2{

width: 350px;

height: 140px;

border:1px solid #fff;

background: url(./wb前端/img/jiaoyu.png);

position: absolute;

top: 10px;

margin-left: 25px;

border-radius: 15px;

}

.cc1_21{

font-size: 30px;

margin-left: 10px;

top: 160px;

position: absolute;

}

.cc1_22{

width: 340px;

font-size: 20px;

margin-left: 10px;

top: 210px;

position: absolute;

}

.cc1_3{

background: url(./wb前端/img/jiuye\ \(2\).png);

width: 350px;

height: 140px;

border:1px solid #fff;

position: absolute;

top: 10px;

margin-left: 25px;

border-radius: 15px;

}

.more{

width: 175px;

height: 45px;

color: #fff;

font-size: 17px;

border-radius: 20px;

background-color: rgb(184, 49, 49);

float: right;

margin: 7px;

margin-top: 350px;

}

.btn {

margin: 200px;

height: 90px;

width: 400px;

border: none;

background: #f0f0f0;

border-radius: 1rem;

text-transform: uppercase;

transition: all 0.5s;

margin-top: 730px;

margin-left: 800px;

font-size: 40px;

}

.btn:hover {

box-shadow: 5px 0px 20px #dd747d76,

-5px 0px 20px #dd747d76,

0px 5px 20px #dd747d76,

0px -5px 20px #dd747d76;

background: #ccc;

cursor: pointer;

}

.body6{

width: 2000px;

height: 1010px;

/* background-color: #380d38; */

margin: auto;

position: relative;

}

.boss {

display: -webkit-flex;

display: flex;

width: 1500px;

height: 700px;

position: absolute;

top: 200px;

left: 280px;

/* background-color: #27855ed4; */

/* text-transform: uppercase;

transition: all 1s; */

}

.boss1{

width: 540px;

height: 550px;

/* background-color: #b3353f; */

position: absolute;

top: 50px;

margin-left: 50px;

font-size: 25px;

font-family: 宋体;

}

.boss2{

width: 830px;

height: 700px;

/* border: #000000 1px solid; */

margin-left: 700px;

}

.more1{

width: 175px;

height: 50px;

color: #fff;

font-size: 17px;

border-radius: 20px;

background-color: rgb(184, 49, 49);

float: left;

margin: 7px;

margin-top: 55px;

}

</style>

</head>

<body>

</div>

<ul>

</div>

</li>

</div>

</li>

</div>

</li>

<p><a href="#">国际教育学院</a></p>

</div>

</li>

</div>

</li>

</div>

</li>

<li><a href="#">人才招聘会</a>

</div>

</li>

</ul>

</nav>

</div>

</div>

<p>忆往昔，桃李不言，自有风雨话沧桑；看今朝，鹿鸣于野，更续诗篇誉三秦！</p>

</div>

<div >

<a href="#" style="color: #000000;">    为贯彻落实中共中央办公厅、国务院办公厅印发的《深化新时代教育评价改革总体方案》

《关于深化新时代教育督导体制机制改革的意见》等文件精神，按照教育部关于</a>

</div>

</DIV>

<div class="p2_1_1">【专题会议】师德为先，育人为本 |信息工程学院开展师德师风专题会议</div>

<br>

<div class="p2_1_2">为持续改进教学工作，不断提高教学质量，规范教学秩序，充分体现“以生为本”，

艺术与传媒学院于2024年11月1日在下午实验楼301会议室组织开展了2024年秋季学期期中

教学检查学生座谈会</div>

<br>

<hr>

<br>

</div>

</a>

<div class="p2_1_1">【党政培训】西安工商学院成功举办高陵区村“两委”干部素质能力提升培训班</div>

<br>

<div class="p2_1_2">为深入学习贯彻党的二十届三中全会精神，

充分发挥我校对地方经济社会文化发展的服务功能，有效履行学校作为高陵区“新时代文明实践分中心”的职责要求，提升农村基层干部抓党建促乡村振兴的理论素养、

业务水平和履职能力。近日，学校社会公益学院(乡村振兴人才学院)与高陵区委社会工

作部联合举办了全区村“两委”干部素质能力提升培训班，来自高陵区86个行政村“两委”骨干共计

100余人参加了本次培训活动。</div>

<br>

<hr>

<br>

</div>

</a>

</div>

</div>

</div>

</a>

</div>

</div>

</a>

</div>

</div>

</a>

</div>

</div>

<p>忆往昔，桃李不言，自有风雨话沧桑；看今朝，鹿鸣于野，更续诗篇誉三秦！</p>

</div>

<br>

2024-10

</div>

关于2024年课程思政示范项目评审结果的公示

<hr>

根据教育部《高等学校课程思政建设指导纲要》和我省《陕西省教育厅办公室关于开展第三批课程思政示范项目认定工作的通知》文件要求，学校组织开展了课程思政示范项目申报工作，共收到6个教学单位9门课程申报课程思政示范项目。经专家评审，拟推荐《管理学》、《应用统计学》、《影视编剧》、《数字图像处理应用》等四门课程参加陕西省课程思政示范项目遴选。

</div>

<br>

2024-10

</div>

关于推荐申报2024年重点实验室情况的公示

<hr>

根据《陕西省教育厅办公室关于组织申报2024年度陕西省高等学校重点实验室的通知》(陕教技办〔2024〕14 号)文件要求，经学院推荐、学校审查，最终决定推荐我校机电工程学院“智能制造实验室”申报2024年陕西省重点实验室，现将拟推荐申报项目予以公示。

</div>

<br>

2024-10

</div>

关于西安工商学院2024年陕西省高校教师岗前培训暨教师资格教育基础理论知识培训报名人员的公示

<hr>

根据陕西省高等学校师资培训中心、陕西省教师资格认定指导中心《关于2024年陕西省高校教师岗前培训暨教师资格教育基础理论知识培训报名及工作安排的通知》(陕师培〔2024〕2号)要求，我校已完成 2024年陕西省高校教师岗前培训暨教师资格教育基础理论知识培训报名审核工作，现将报名人员名单予以公示(具体名单见附件)。

</div>

<br>

2024-09

</div>

关于图书馆对大一新生借书开放以及借阅制度更新的通知

<hr>

为更好地提升服务质量，提供更便捷、更优质的借阅服务，优化广大学生的借阅体验，自即日起，对新生开放图书借阅。出示学生证或者出示手机app小北学生个人信息页面即可进行借阅，大一新生可以由此方式借书。

</div>

<p>忆往昔，桃李不言，自有风雨话沧桑；看今朝，鹿鸣于野，更续诗篇誉三秦！</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<p>忆往昔，桃李不言，自有风雨话沧桑；看今朝，鹿鸣于野，更续诗篇誉三秦！</p>

</div>

</div>

</div>

<p class="cc1_22"><a href="#" style="color: black;">       西安工商学院招生就业处下设招生办公室是在学校党委和行政领导下负责全日制招生工作的职能部门，主要担任全校专科、专升本、本科招生录取及相关工作。学校招生办公室秉承“阳光招生、为国选才”的工作理念，严格....</a></p>

</div>

<p class="cc1_22"><a href="#" style="color: black;">       西安工商学院教育教学工作坚持以学生为中心，以文化育人，加强课程思政建设，持续优化人才培养方案，不断提升育人效果。注重工程实践，突出创新创业，深入推动教育教学改革与产教融合工作。学校不断优化学科布...</a></p>

</div>

<p class="cc1_22"><a href="#" style="color: black;">       西安工商学院招生就业处下设大学生就业指导服务中心是在学校党委和行政领导下负责学校毕业生就业日常工作、为学生提供就业指导和服务的职能部门，是学校就业工作的窗口，在服务学生就业的同时，搭建企业校园招聘的</a></p>

</div>

<p style="color: #000000;">忆往昔，桃李不言，自有风雨话沧桑；看今朝，鹿鸣于野，更续诗篇誉三秦！</p>

</div>

<a href="#" style="color: #000000;">　西安工商学院(原西安工业大学北方信息工程学院)是经教育部批准设立具有学士学位授予权的本科层次民办

普通高等学校。　　学校位于八水绕长安的渭水之滨西安市高陵区，学校周边商贸发达，交通便利，

乘车四十余分钟即可到达西安市中心、咸阳国际机场和西安北站，即将建成开通的地铁十号线直达校区。

学校坚持“高端化、全球化、个性化”发展战略，形成“躬行致曲、和而不同”校训，践行“以学生为中心

、以文化育人、注重综合实践、突出创新创意”办学理念，经过十八年的建设与发展，取得了良好的办学成效。

软件工程专业获批“双万计划”国家级一流本科专业建设点，机械设计制造及其自动化、财务管理、汉语言文学专业获批省级一流专业建设点...

校园配套设施完善，教...</a>

</div>

</a>