前端作业之完成学校官方网页的制作-编程知识

（未使用框架，纯html和css制作）
注：由本人技术限制，代码复用性极差
代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>xxx大学</title><style>.head_one{border-radius: 20px;}span{vertical-align: middle;}.top1{width: 100%;height: 25.67px;background-color: #c32929;}/* 回到首页 */a{text-decoration: none;}.a{vertical-align: text-bottom;font-size: smaller;color: aliceblue;}.b{display:inline-block;float: right;font-size: smaller;vertical-align: text-bottom;color: aliceblue;}.top2{height: 160px;width: 100%;background-color: #c32929;vertical-align: middle;}.c{width: 322px;height: 90px;margin-left: 22px;margin-top: 32px;}.d{width: 240px;height: 34px;/* margin-left: 820px; */border: 0;padding-left: 10px;outline: none;line-height: 28px;font-size: 12px;position: absolute;left: 1220px;top: 100px;display: block;}.e{width: 42px;height: 34px;position: absolute;left: 250px;top: 0px;background-image: url(./学校门互网站素材/搜索图标.png);border: 0px;background-color: transparent;outline: none;position: absolute;left: 1460px;top: 100px;display: block;}.f{display: flex;width: 100%;height: 45px;justify-content: center;position: relative;top: 0;left: 0;}.f>ul{position: absolute;top:auto;}.f1{width: 109px;height: 45px;position: relative;top: 0;left: 0;}.f1>a{color: #990100;position: absolute;top: 12px;left: 22px;}.f2{display: none; }/* ul{display: none;} */.f1:hover{background-color: #ff7f00;}.f1:hover.f2{display: inline-block;background-color: #990100;}.g1{width: 100%;height: 280px;}.main{position: relative;width: 100%;height: 450px;overflow: hidden;border-radius: 5px;}.item{position: absolute;top: 0;width: 100%;height: 100%;transition: all 0.5s;background-size: cover;}.item1{background-image: url(./img/1.jpg);}.item2{background-image: url(./img/4.jpg);left: 100%;}.item3{background-image: url(./img/11.jpg);left: 200%;}input{position: relative;z-index: 100;display: none;}.select{position: absolute;bottom: 10px;left: 50%;transform: translateX(-50%);width: 60px;height: 10px;z-index: 1;display: flex;justify-content: space-between;align-items: center;         }.select>label{width: 10px;height: 10px;background-color: rgb(255, 255, 255);border-radius: 50%;cursor: pointer;border: 1.5px solid white;}.main input:nth-of-type(1):checked ~ .select label:nth-of-type(1){background-color: rgb(26, 26, 26);}.main input:nth-of-type(2):checked ~ .select label:nth-of-type(2){background-color: rgb(26, 26, 26);}.main input:nth-of-type(3):checked ~ .select label:nth-of-type(3){background-color: rgb(26, 26, 26);}.main input:nth-of-type(1):checked ~ .item{transform: translateX(0);}.main input:nth-of-type(2):checked ~ .item{transform: translateX(-100%);}.main input:nth-of-type(3):checked ~ .item{transform: translateX(-200%);}.h{background-color: #dddddd;width: 100%;height: 294px;position: relative;top: 0;left: 0;}.h0{display: flex;width: 80%;height: 290px;position: absolute;left: 20%;}/* .h1{background-color: #990100;} */.h2_1{width: 398px;height: 40px;font-size: 20px;color: #990100;/* background-color: gold; */}.h1_1{/* background-color: aquamarine; */width: 660px;height: 40px;font-size: 20px;color: #990100;/* display: table-cell;text-align: center; *//* border-bottom: 1px #990100 solid; *//* text-align: center; */}.h1-1-1{margin: 0;float: left;display: block;list-style-type: none;/* flex-direction: column； */}.h1-1-1 li{padding-top: 10px;}.h1_1_1{margin: 0;float: right;display: block;list-style-type: none;/* flex-direction: column； */}.h1_1_1 li{padding-top: 10px;}li{list-style-type: none;}.h2-2-2{float: left;}.h2_2_1 li{padding-bottom:15px;padding-top: 2px;}.h2_2_2>a{color: black;}.x {width: 48px;text-align: center;color: #fff;background: #990100;line-height: 16px;font-size: 12px;display: block;}.s {width: 48px;text-align: center;color: #4E4E4E;line-height: 26px;font-size: 18px;display: block;background: #F5F5F6;}.h2-2-2-2{float: right;}.h2-2-2-1{float: left;}.h2-2-1-1{width: 398px;margin-top: 0px;float: left;}.i{width: 1004px;/* height: auto; */margin: 0 auto;}.i1{width: 1004px;height: 40px;line-height: 10px;font-size: 20px;color: #990100;border-bottom: 1px #990100 solid;}.i1-1{float: left;}.i1-2{float: right;}.j{width: 1004px;height: 300px;display :grid;grid-template-columns:repeat(3,1fr) ;grid-template-rows: repeat(2,1fr);}.j1{width: 320px;height: 136px;background-color: #990100;margin: 0;display: flex;}/* .j1-1{width: 316px;height: 135px;margin-right: 28px;margin-bottom: 20px;background: #dddddd;float: left;} */.k{width: 1130px;height: 210px;margin: 0 auto 30px;display: grid;grid-template-columns:repeat(8,1fr) ;/*  设置当前网格有多少行 */grid-template-rows: repeat(2,1fr);}.k1{height: 100px;width: 135px;/* background-color: #990100; */}.l{width: 100%;height: 255px;background: #990100;}.l1{width: 1004px;height: 255px;margin: 0 auto;background: #ff7f00;text-align: center;line-height: 120px;}</style>
</head>
<body><div class="head_one"><div class="top1">&nbsp&nbsp&nbsp&nbsp<a class="a" href="">回到首页</a><span>|</span><a class="a" href="">English</a><div class="b"> <span >本站支持IPv6</span>&nbsp&nbsp&nbsp&nbsp&nbsp</div></div><div class="top2"><img class="c" src="./学校门互网站素材/学校名称.png" alt=""><input class="d" type="search"><input class="e" type="submit" value="  "></div><div class="f"><div class="f1"><a href="">首页</a></div><div class="f1"><a href="">学校概况</a></div><div class="f1"><a href="">院部设置</a></div><div class="f1"><a href="">组织机构</a></div><div class="f1"><a href="">人才培养</a></div><div class="f1"><a href="">科学研究</a></div><div class="f1"><a href="">学科建设</a></div><div class="f1"><a href="">师资力量</a></div><div class="f1"><a href="">招生就业</a></div><div class="f1"><a href="">校园生活</a></div></div><ul class="f2"><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 class="main"><!-- 三个单选按钮，先默认选择第一个 --><input type="radio" name="choose" id="choose1" checked><input type="radio" name="choose" id="choose2"><input type="radio" name="choose" id="choose3">      <!-- 放三张图片，用背景图片表示 --><div class="item item1"><a href=""><img width="100%" height="450px" src="./学校门互网站素材/永远跟党走.jpg" alt=""></a></div><div class="item item2"><a href=""><img width="100%" height="450px" src="./学校门互网站素材/永远跟党走.jpg" alt=""></a></div><div class="item item3"><a href=""><img width="100%" height="450px" src="./学校门互网站素材/永远跟党走.jpg" alt=""></a></div><!-- 三个label标签 --><span class="select"><label for="choose1"></label><label for="choose2"></label><label for="choose3"></label></span></div><div width="100%" height="150px">&nbsp;<br>&nbsp;</div><div class="h"><div class="h0"><div class="h1"><div class="h1_1"><ul class="h1-1-1"><li>奋斗新征程  建工新时代</li></ul><ul class="h1_1_1"><li><a href="">+Mare</a></li></ul></div><hr><ul class="h2-2-2"><li><a href=""><img src="./学校门互网站素材/不忘新征程.png" width="269px" height="200px" alt=""></a></li></ul><ul class="h2_2_1"><li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li><li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li><li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li><li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li><li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li><li class="h2_2_2"><a href="">>榜样力量之六十一:让科研更&ZeroWidthSpace;有温度...</a>&nbsp;&nbsp;<span style="font-size:12px;">2024-03-07</span></li></ul></div><div class="h2"><div class="h2_1"><ul class="h1-1-1"><li>通知公告</li></ul><ul class="h1_1_1"><li><a href="">+Mare</a></li></ul></div><hr><div class="h2-2-1-1"><ul class="h2-2-2-1"><li><span class="s">06</span><span class="x">2024.03</span></li></ul><ul class="h2-2-2-2"><li><a href="">关于学生体质健康测试免测申请通知</a></li></ul></div><div class="h2-2-1-1"><ul class="h2-2-2-1"><li><span class="s">17</span><span class="x">2023.03</span></li></ul> <ul class="h2-2-2-2"><li><a href="">关于学生体质健康测试免测申请通知</a></li></ul></div><div class="h2-2-1-1"><ul class="h2-2-2-1"><li><span class="s">19</span><span class="x">2022.03</span></li></ul> <ul class="h2-2-2-2"><li><a href="">关于学生体质健康测试免测申请通知</a></li></ul></div></div></div></div><div width="100%" height="100px">&nbsp;<br>&nbsp;</div><div class="i"><div class="i1"><ul class="i1-1"><li>讲座报告</li></ul><ul class="i1-2"><li><a href="">+Mare&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li></ul></div><!-- <hr> --><div class="j"><div class="j1"><div class="j1-1"><img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px"></div><div class="j1-1"><ul><li>科技大讲堂</li><li>报告人：张三</li><li>时间：3月15日（周五）16：00</li><li>地点：图书馆</li></ul></div></div><div class="j1"><div class="j1-1"><img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px"></div><div class="j1-1"><ul><li>科技大讲堂</li><li>报告人：张三</li><li>时间：3月15日（周五）16：00</li><li>地点：图书馆</li></ul></div></div><div class="j1"><div class="j1-1"><img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px"></div><div class="j1-1"><ul><li>科技大讲堂</li><li>报告人：张三</li><li>时间：3月15日（周五）16：00</li><li>地点：图书馆</li></ul></div></div><div class="j1"><div class="j1-1"><img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px"></div><div class="j1-1"><ul><li>科技大讲堂</li><li>报告人：张三</li><li>时间：3月15日（周五）16：00</li><li>地点：图书馆</li></ul></div></div><div class="j1"><div class="j1-1"><img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px"></div><div class="j1-1"><ul><li>科技大讲堂</li><li>报告人：张三</li><li>时间：3月15日（周五）16：00</li><li>地点：图书馆</li></ul></div></div><div class="j1"><div class="j1-1"><img src="./学校门互网站素材/人物.png" alt="" width="99px" height="136px"></div><div class="j1-1"><ul><li>科技大讲堂</li><li>报告人：张三</li><li>时间：3月15日（周五）16：00</li><li>地点：图书馆</li></ul></div></div></div></div><div class="k"><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>教务在线</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>研究生教育</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>图书资源</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>财务平台</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>信息公开</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>校园邮箱</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>校园一卡通</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>教务在线</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>研究生教育</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>图书资源</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>财务平台</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>信息公开</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>校园邮箱</a></div><div class="k1"><a href=""><div><img  src="./学校门互网站素材/邮箱图片.png" alt="" width="88px" height="60px"></div>校园一卡通</a></div></div><div class="l"><div class="l1"> <ul><li>地址：中国</li><li>联系我们：xxx@.com</li></ul></div></div></div></body>
</html>