学校官网总结

前言

对于这次的学校官网编写我感觉总体收获颇丰，作为新手小白的我在经历了八天集训之后，第一次独立且较为完全地写出了学校官网的首页，对此我感到颇为开心，但同时也让我更加明白了自身的不足，且在编写过程中也遇到了不少问题，都是我亟待改变和吸纳新知并进步的地方。

总体思路介绍

对于官网的架构问题我开始先进行了一个大致盒子的排版，大致上是采用上中下分布，其中，中间部分用一个大盒子包裹住中间四个小盒子，并采用flex布局将他们变成四份平均分配，且上下都要注意留白，因为要用色差来体现四个背景为白色的小盒子，使其轮廓清晰。下面则采用两个宽度为100%的大盒子，一个用flex布局放置学校各部门图标，一个封底放商标和网络安全证书。最后将每个在最外面的大盒子排布好之后，便开始细分每个版块之内的小盒子，并进行定位。在此不一一赘述。

编写过程中的问题及解决方法

在集训考核中我其实已经写了一个总体的大概框架，但我感觉很多地方写的十分冗余，于是我花了8个小时重新写了一遍，以下是前后对比。

集训考核成果图

重写后

虽然写的不好，但总归有点进步了。

1.在编写过程中我发现的第一个问题即对各种函数的掌握不是很熟练，在调取时常常会出现卡壳的现象，解决方法：经常复习练习，反复调取。

2.第二个问题即二级菜单的下拉问题，开始语法逻辑没整明白所以一直会出现二级菜单出不来的现象，解决方法：

先给

.box10>ul{
            display: none;
            width: 134px;
            background-color: white;
            position: relative;
            z-index: 999;
        }

​
<div class="box8">
                <ul>
                    <li class="box9">
                        <div class="box10">学院概况
                        <ul>
                            <li>学院简介</li>
                            <li>理事会</li>
                            <li>监事会</li>
                            <li>院长书记寄语</li>
                            <li>学院领导及分工</li>
                            <li>校园风光</li>
                        </ul>
                        </div>
                    </li>
                </ul>
            </div>

​

先给二级菜单加上display：none将其隐藏

​
.box9:hover .box10>ul{
            display: block;
        }

​

再给包裹住二级菜单的li和div加上一个hover效果并在里面用display：block将其元素转化为块级元素使其实现轻触下拉效果。

3.第三个则是最下面的学校各部门图标问题，因为查官网原图时我发现它是一整张大图，无法分离出单一图标。

<div class="picture" >
            <div style="background: url(icon.png) no-repeat -5px;"></div>
            <p>教务系统</p>
        </div>

解决方法：我没有裁切，而是用了精灵图的方法即用这张大图通过挪动位置来达到只显示其中之一图标的效果。而显示图标的盒子都采用flex布局，使之排列居中整齐。

核心代码讲解

在整个官网中最核心的部分当属轮播图了，但因为能力有限，我只能用css写，首先是对于图片的获取，先在官网中获取每一张原图，然后用三层盒子逐一叠加，最外面的盒子按所需比例大小显示，第二层盒子则设置宽度足够把所有图片盒子装下，即至少为第三层所有小盒子宽度的总和，第三层盒子就根据图片大小设置宽高放在第二层盒子里，并在css中设置上float，使其浮动排列在同一行，然后在最外层盒子那加上overfloat：hidden 即溢出隐藏。大致如下图

.box15-1{
            width: 520px;
            height: 140px;
            margin: auto;
            overflow: hidden;
        }
        .box17{
            width: 5200px;
            animation: identifier1 10s linear infinite;
        }
        .box18{
            float: left;
            width: 520px;
            height: 140px;
        }

<div class="box15-1">
                    <div class="box17">
                        <div class="box18">
                            <img src="screenshot20231011.png" alt="">
                        </div>
                        <div class="box18">
                            <img src="screenshot20231011 (3).png" alt="">
                        </div>
                        <div class="box18">
                            <img src="screenshot20231011 (1).png" alt="">
                        </div>
                        <div class="box18">
                            <img src="screenshot20231011 (2).png" alt="">
                        </div>
                        <div class="box18">
                            <img src="screenshot20231011.png" alt="">
                        </div>
                      </div>
                </div>

模型做好后就是轮播效果编写了如图

@keyframes identifier1 {
        0%{
           transform: translateX(0);
           } 
        5%{
            transform: translateX(-520px);
        } 
        25%{
            transform: translateX(-520px);
        } 
        30%{
            transform: translateX(-1040px);
        } 
        50%{
            transform: translateX(-1040px);
        } 
        55%{
            transform: translateX(-1560px);
        } 
        75%{
            transform: translateX(-1560px);
        } 
        80%{
            transform: translateX(-2080px);
        } 
        100%{
            transform: translateX(-2080px);
        } 

百分比为轮播进程，为了显示出轮播停顿效果，5%的时间用于轮换图片，20%用于中间停顿效果，transform：translateX即在x轴方向上移动的距离，通常设置为图片宽度大小，即正好轮换一张图片，同时为了达到首尾轮换效果，在最后一张轮换图片后面要在放上第一张图片，这样就可以在视觉上达到重复轮换的效果。

.box17{
            width: 5200px;
            animation: identifier1 10s linear infinite;
        }

最后在第二层盒子的css中用animation语法使动画效果生效，然后是时间和轮换速度的设置，这里我选的是10s linear匀速虽然与实际官网轮换速度不一样但可以根据需要再调整，最后为了让他一直进行轮换就要加上infinite即无限轮换作用，至此就完成了。

总结心得

在经过实战之后我发现我是真的菜，还有很多地方要向各位大佬学习的地方，还有很多地方亟待改进，最后希望能与诸君共勉，共同进步。