[西安|结业弟子]JS-刘思安|2020年03月24日的日报-技能树.IT修真院

发表于： 2020-03-24 22:47:24

4 1211

今日完成

task7首页添加轮播图

task8页面一

明日计划

完成task8页面二

成果

主要难点是对移动端的适应

在如何学习模块使用格栅对不同分辨率设备进行换行自适应

html

<div class="main-items main-items-02">
                <h3>如何学习</h3>
                <div class="row">
                    <div class="main-item02-block col-sm-5 col-xl ">
                        <div class="main-item02-order">1</div>
                        <p>匹配你现在的个人情况 寻找适合自己的岗位</p>
                    </div>

                    <div class="main-item02-arrow d-none d-sm-block col-sm col-xl-1"></div>

                    <div class="main-item02-block col-sm-5 col-xl">
                        <div class="main-item02-order">2</div>
                        <p>了解职业前景薪金待遇、 竞争压力等</p>
                    </div>

                    <div class="main-item02-arrow d-none d-xl-block col-xl-1"></div>

                    <div class="main-item02-block col-sm-5 col-xl">
                        <div class="main-item02-order">3</div>
                        <p>掌握行业内顶级技能</p>
                    </div>

                    <div class="main-item02-arrow d-none d-sm-block col-sm col-xl-1"></div>

                    <div class="main-item02-block col-sm-5 col-xl">
                        <div class="main-item02-order">4</div>
                        <p>查看职业目标任务</p>
                    </div>
                </div>
                <div class="row">
                    <div class="main-item02-block col-sm-5 col-xl ">
                        <div class="main-item02-order">5</div>
                        <p>参考学习资源，掌握 技能点，逐个完成任务</p>
                    </div>

                    <div class="main-item02-arrow d-none d-sm-block col-sm col-xl-1"></div>

                    <div class="main-item02-block col-sm-5 col-xl">
                        <div class="main-item02-order">6</div>
                        <p>加入班级，和小伙伴们 互帮互助，一块学习</p>
                    </div>

                    <div class="main-item02-arrow d-none d-xl-block col-xl-1"></div>

                    <div class="main-item02-block col-sm-5 col-xl">
                        <div class="main-item02-order">7</div>
                        <p>选择导师，一路引导，加速自己成长</p>
                    </div>

                    <div class="main-item02-arrow d-none d-sm-block col-sm col-xl-1"></div>

                    <div class="main-item02-block col-sm-5 col-xl">
                        <div class="main-item02-order">8</div>
                        <p>完成职业技能，升级业界大牛</p>
                    </div>
                </div>
            </div>

css

.main-item02-block {
    display: flex;
    align-items: center;
    margin: 1rem 0;
}

.main-item02-block p {
    padding-left: 2rem;
    font-size: 1.4rem;
    line-height: 2.8rem;
    color: #999;
}

.main-item02-order {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7rem;
    height: 7rem;
    background-color: #fff;
    border-radius: 50%;
    font-size: 1.8rem;
    font-weight: bold;
    color: #32c086;
    flex-shrink: 0;
    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, .2);
}

.main-item02-arrow {
    background: url(../img/task8/task8_arrow.png) no-repeat center;
    background-size: 3.2rem 3rem;
}

导航条通过滑动门组件实现移动端

<div class="nav-wrap clearfix">
            <div class="m-nav-wrap">
                <div class="container">
                    <button data-toggle="collapse" data-target="#top-nav" aria-expanded="false" class="btn-menu"><i
                            class="iconfont icon-menu"></i></button>
                </div>
            </div>
            <div class="container">
                <ul id="top-nav" class="top-nav collapse">
                    <li class="nav-active"><a href="#">首页</a></li>
                    <li><a href="#">职业</a></li>
                    <li><a href="#">推荐</a></li>
                    <li><a href="#">关于</a></li>
                </ul>
            </div>
        </div>

css

/* ---- 导航条 ---- */
@media screen and (min-width:767px) {
    .nav-wrap {
        background-color: #29b078;
    }

    .m-nav-wrap {
        display: none;
    }

    #top-nav {
        display: block;
    }

    .top-nav {
        float: right;
        padding: 0;
        margin: 0;
        list-style: none;
        font-size: 2rem;
        color: #fff;
    }

    .top-nav li {
        float: left;
        height: 10rem;
        margin: 0 1rem;
        padding: 0 1rem;
        line-height: 10rem;
    }

    .top-nav li:last-child {
        margin-right: -1rem;
    }

    .top-nav a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .top-nav li:hover,
    li.nav-active {
        border-bottom: 0.3rem solid #fff;
    }

}

/* ----- 移动端导航条 -------- */
@media screen and (max-width:767px) {
    .nav-wrap {
        position: relative;
    }

    .btn-menu {
        float: right;
        margin-top: 1rem;
        width: 4rem;
        height: 4rem;
        background-color: #47d197;
        border: none;
        border-radius: 0.4rem;
    }

    .btn-menu i {
        font-size: 2.5rem;
        color: #33956c;
    }

    .btn-menu:hover {
        background-color: #26a26f;
    }

    .btn-menu:focus {
        outline: none;
    }

    .top-nav {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .m-nav-wrap {
        height: 6rem;
        background-color: #29b078;
    }

    .top-nav li {
        width: 100%;
        height: 5rem;
        text-align: center;
        font-size: 2rem;
        color: #fff;
        line-height: 5rem;
        background-color: #29b078;
    }

    .top-nav a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .nav-wrap>.container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .top-nav li:hover,
    li.nav-active {
        background-color: #36c388;
        border: none;
    }

}