第一周周记3.21

本周完成目标：静态页面布局

第一周计划：
1.完成网页静态框架。
2.尽可能添加多一点动画效果。

---

遇到的bug及解决方法：

有挺多是没留意的愚蠢 错误
1、 写项目分三大文件html，css，js时没在index.html引用文件。
解决方法：

<link rel="stylesheet" href="../第一轮考核/css/base.css">

<link rel="stylesheet" href="../第一轮考核/css/common.css">

（一开始因为没引用css文件，布局整体页面的时候怎么都显示不出布局的颜色。）

2、头部导航栏在页面缩放放大时出现错乱

在页面放大时logo和其他元素会分别向两边靠拢，缩放时右边的搜索栏和登录会换到下一行
解决方法：
将头部导航栏的元素全部放置在一个盒子中，并且在页面居中对齐，两边的元素分别添加向左向右浮动。
  这样在页面比例变化时导航栏都能居中对齐

<section class="nav_all">
    <div class="navBox">
        <!-- 左侧模块 -->
        <div class="fl">
            <img src="../第一轮考核/images/logo.png" alt="">
            <ul>
                <li><a href="#">课程▼</a></li>
                <li><a href="#">学校</a></li>
                <li><a href="#">学校云</a></li>
                <li><a href="#">慕课堂</a></li>
                <li><a href="#">下载APP</a></li>
            </ul>
        </div>
        <!-- 右侧模块 -->
        <div class="fr">
            <!-- 搜索模块 -->
            <div class="search">
                <input type="search" name="" id="" placeholder="搜索感兴趣的课程">
                <button><img src="../第一轮考核/images/fangdajing.png" alt=""></button>
            </div>
            <ul>
                <li><a href="#">登录 | 注册</a></li>
            </ul>
        </div>
    </div>

3、国家精品分类小模块字体始终与左端靠齐，调整内边距会使li的盒子一起向右移动，使得鼠标经过形成的绿色背景与左侧有距离

解决方法：在li中添加一个div盒子专门用来存放文字信息。在调整div的内边距。

            <li>
                <div>
                    <a href="#" style="font-size: 14px;
                color: black;">国家精品</a>
                </div>
            </li>

.bannerOneLeft ul li div {
    padding-left: 10px;
}

4、 鼠标经过，盒子文字颜色同时变化
解决方法：注意里面span和a的位置

.bannerOneLeft ul li div:hover span {
    color: #00c758;
}
.bannerOne .bannerOneLeft ul li a:hover{
    text-decoration: underline;
    color: #00c758;
}

5、很低级的问题 p元素独占一行的解决情况
使得本在同一行的元素无法正常显示

解决方法：给p设置行内块元素，使其宽度与文字长度一致

display: inline-block;

6.关于空心三角形的做法
（课程下拉菜单和下载app显示的二维码边框的三角形）
解决方法：利用span制作两个大小一致的三角形，颜色分别为边框的颜色和白色，对其添加不同的定位，使有边框颜色的三角形被白色的三角形所覆盖，没覆盖的部分即为展示出来的边框颜色。

.fl .sanjiao  span1 {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: 15px;
    top: -9px;//高度略高
    line-height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid grey;
 }//展现边框颜色的三角形
 .fl .sanjiao  span2 {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    right: 15px;
    top: -10px;//高度略低
    line-height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
 }//覆盖颜色的三角形

7.引用js文件实现动态效果网页报错（没有获取元素）
一般原因：没有等页面加载完全部元素，获取完所有元素的属性
解决方法：将代码写在以下函数内，待页面加载完即可获取所有元素的属性。

window.addEventListener('load', function () {}

---

收获心得：

心得：
一轮考核的第一周完成了中国慕课网站静态页面的临摹，实现了轮播图，盒子浮起等相关动态效果。最大的感觉是：实践真的非常重要，先前在b站网课上所学的有关html，css的知识，到真正用起来的时候才发现掌握的不彻底，相关标签的属性记忆模糊，还得返回去查找信息。这是第一次尝试临摹一整个网站，先前还没了解网页的调试，后来才发现是真的非常方便和高效，能够非常直观调试不同区块在网页的位置。
收获：
1.巩固了相关html，css的知识，积累了更多网页开发的经验。虽然说只是临摹网站，但真正完成整个页面布局的那一刻，是非常有成就感的。
2.极大提高了自己的耐心和毅力...有时候遇到的页面崩坏bug要去修改真的挺考验一个人的耐心的。
相关的不足与改进：
1.有些代码过于繁琐，还可以进一步细化节约代码，使整个代码页面更加直观。
2.有一些细节的地方还需要改进：
a.轮播图目前完成基本滚动效果，但还需要改进成原网页的渐入效果。
b.网页底端的视频播放部分：鼠标经过盒子，盒子的颜色变化的键入效果有待改进

---

下周计划：

1.完成所有的动画效果，同时简化部分代码。
（很多相似部分可以套用同一部份的代码）
2.时间有剩余的情况进一步学习接下来的任务。
（还剩下一些css3的动画效果）