第二周周记3.28

第二周周记：

完成目标：
1.实现大部分的动态效果
2.修改代码，使代码尽可能简洁

---

遇到的bug：

1.关于下载app显示的二维码的定位问题：
绝对定位相对于的是整个body，页面缩放时会脱离原先的位置
原先方法：给整个导航栏加相对定位，结果仍与原先一致
解决方法：
给装有文字“下载app”的小li添加相对定位,再给二维码所在盒子添加绝对定位即可解决
（课程那里的下拉菜单也是同理）

<li style="position: relative;">
                    <a href="#" class="app">下载APP</a>
<li/>

2.关于编辑推荐下面广告栏两边的箭头问题：
为实现图片的轮播效果需要将溢出的图片进行隐藏，但同时会将两边的箭头一起隐藏
解决方法：
这里设置两个盒子大小形状相同，以嵌套形式布局，将图片全部放在嵌套内的盒子里，将箭头图标放在嵌套内的盒子外。
这里注意：
1.实现箭头的定位需要给父盒子添加相对定位
2.实现动画效果需要也给ul加绝对定位

<!-- 广告栏模块 -->
    <div class="adv_all">//父盒子
        <div class="adv">//子盒子（overflow: hidden;）
            <ul>
                <li><img src="./upload/adv.png" alt=""></li>
                <li><img src="./upload/adv1.png" alt=""></li>
                <li><img src="./upload/adv2.png" alt=""></li>
                <li><img src="./upload/adv4.png" alt=""></li>
                <li><img src="./upload/adv5.png" alt=""></li>
                <li><img src="./upload/adv6.png" alt=""></li>
            </ul>
        </div>
        <img src="./images/jiantour.png" alt="" class="advr1">
        <img src="./images/left-arrow.png" alt="" class="advl1">
    </div>

.adv_all {
    float: left;
    position: relative;
    width: 100%;
    height: 110px;
    margin-top: 45px;
}
 .adv {
    position: absolute;
    width: 100%;
    height: 110px;
    overflow: hidden;
}
.adv ul {
    position: absolute;
    /* 千万注意动画效果要加定位！！ */
    width: 200%;
}

3.记一个教训：
下次写静态页面布局时要考虑到后期加js动画所需要的条件。好比后期编辑推荐，精彩评价那里的滚动模块，需要将其中滚动的元素放在ul里面，同时要给父盒子添加相对定位。这些前期要注意，不然后期加入js时再修改代码会很麻烦。
4.关于头部导航栏的固定
解决方法：采用css中的定位，再将top调为0即可实现头部导航栏的固定，注意层级z-index要设置为999，否则可能会被其他元素覆盖。

position: sticky;

补充：头部导航栏利用sticky,但侧边栏的固定得使用fixed才行
关于sticky和fixed的区别：
fixed相对于相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。不管视口如何滚动，它的位置始终不变。
fixed如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。
而sticky则是在目标区域内随着页面的滚动而保持在固定位置，超出这个区域后就就随着目标区域滚动。
sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离"，浏览器把它当作sticky的生效门槛。
指路：
原文链接：https://blog.csdn.net/x_i_a_o_b_a_i/article/details/104382951

5.关于字体图标：复制得到的代码记得修改路径，否则图标不显示

 @font-face {
            font-family: 'iconfont';
            src: url('./font/iconfont.eot');
            src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
                url('./font/iconfont.woff2') format('woff2'),
                url('./font/iconfont.woff') format('woff'),
                url('./font/iconfont.ttf') format('truetype'),
                url('./font/iconfont.svg#iconfont') format('svg');
        }

初始给定的代码路径是需要修改的，路径修改取决于font文件放置的位置。（之前一直显示不出来找了好久才发现。。。）
另外下次制作网页时把需要的图标全部下载好，会方便一点，不然到时候缺了又得去下载弄得非常麻烦，以至于这次网页的大部分图标都是以图片形式下载的。

本周总结：

  本周大致完成了原网页的动态交互效果，但有些效果因为知识水平有限没能做出来，有关轮播图图片的渐入效果，更多部分的盒子展开（这个研究了好久没琢磨出来！！），还有底部播放模块，隐藏盒子出现的延迟效果，有时间再多研究一下。另外完善了部分模块，例如本周课程排名等有轮播模块的效果；计算机，外语，工学等课程的tab栏切换；侧边栏在页面滚动出现的返回顶部的盒子以及隐藏盒子出现时侧边栏的上移效果。熟悉了有关js的tab栏切换的知识：1.排他思想 2.对应元素的显示与隐藏 。
  最大的感触估计就是在完成静态页面布局的时候一定要注意到之后添加j效果所需要满足的条件，不然到后来添加js时再修改代码会非常浪费时间和精力！！好比轮播图需要将轮播的图片放在ul里面；本周课程排名那里的轮播部分需要与顶部的标题分割开来。还有关于超过3页以上的轮播图左右箭头的隐藏，写的if判断还有点欠缺，有空再细化改善一下。
  第一次独立完成一个网页的布局（虽然说是临摹），但成就感还是满满的，毕竟从原先的一片空白到现在丰富的页面，经历的两周时间说长不长，每天晚上都在与各种bug和页面崩坏相纠缠，又学习巩固的许多知识，加上这些知识并不是从学校课堂学到的，是凭借自己一分一毫的努力堆积起来的，虽然掌握的还是一些皮毛，但打码之路永不止境。悄悄说一句，感觉写作业和打码穿插进行还挺愉快的，平时被三门数学弄的崩溃打起码居然还挺愉快的不是 。
  总之再接再厉吧！

---