前端作业之完成学校官方网页的制作

（未使用框架，纯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>