2018.6.25

今天完成的事情:

1.任务八的首页

明天计划的事情:

1.任务七的总结

2.继续任务八

遇到的问题:

收获:

主要看了轮播图

<div id="picture" class="carousel slide" data-ride="carousel">

        <!-- 指示符 -->

        <ol class="carousel-indicators">

            <li data-target="#picture" data-slide-to="0" class="active"></li>

            <li data-target="#picture" data-slide-to="1"></li>

            <li data-target="#picture" data-slide-to="2"></li>

        </ol>

        <!-- 轮播图片 -->

        <div class="carousel-inner">

            <div class="carousel-item active">

                <img src="img8/cover1.png">

                <div class="carousel-caption">

                    <div class="text">

                        <p class="text1">作为你一个初级菜鸟，你是否想要了解</p>

                        <p class="text2">50万</p>

                        <p class="text3">年薪的程序员，都会哪些技能呢？</p>

                    </div>

                </div>

            </div>

        </div>

        <div class="carousel-item">

            <img src="img8/cover1.png">

        </div>

        <div class="carousel-item">

            <img src="img8/cover1.png">

        </div>

    </div>

    <!-- 左右切换按钮 -->

    <a class="carousel-control-prev" href="#picture" data-slide="prev">

        <span class="carousel-control-prev-icon"></span>

    </a>

    <a class="carousel-control-next" href="#picture" data-slide="next">

        <span class="carousel-control-next-icon"></span>

    </a>

这里.carousel-inner决定了轮播图盒子的大小。然后 内部的img大小决定了占据轮播图盒子的大小。所以需要对.carousel-inner进行高度的设置。

.carousel-indicators是轮播图指示标记的盒子。但是任务是圆形，而bootstrap默认是长方形，所以需要对其进行重写