发表于: 2020-06-10 22:21:36

1 1221


今天完成的事情:

基本上完成了任务8的3个页面,还有部分要修改


1.学习了使用轮播图,参考网站:https://blog.csdn.net/qq_37844454/article/details/84073389,bootstrap 4开发手册

父元素代码:

<div id="carouselContainer" data-ride="carousel" class="carousel"><div>

id指定控制变化内容

轮播图主要由3部分构成:

1.小圆点,

            <div id="carouselContainer" data-ride="carousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#carouselContainer" data-slide-to="0" class="active">1</li>

class="carousel-indicators":指定本内容为小圆点

data-target="#carouselContainer":指向父容器的id

data-slide-to="0":指向内容的索引(点击li的时候,跳转的地址)

2.轮播代码结构:

                <div class="carousel-inner" style="width: 100%;height: 100%;">
                    <div class="carousel-item active">
                        <a href="">
                            <img class="img-responsive" src="./images/风景1.jpg" />
                        </a>
                        <div class="carousel-caption">

class="carousel-inner":指定本div内容为轮播内容

class=“item”:轮播子项,要轮播多少写多少

class="carousel-caption":轮播内容中的提示信息

3.左右控制:

  1. <a class="left carousel-control" href="#carouselContainer" data-slide="prev">
  2. <span class="glyphicon glyphicon-chevron-left"></span>
  3. </a>

结果自己试验发现left carousel-control;glyphicon glyphicon-chevron-left,无法在4.0版本设置出按钮,改成

carousel-control-prev
carousel-control-prev-icon

后有可以点击的符号。

父元素加上slide,可以经过短暂时间的移动轮播图,而去掉slide会瞬间切换到另一张图

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


2.学习使用网格grid完成任务8第3页的表格部分


明天的计划:完成任务8剩余部分,并且加以优化部分样式


返回列表 返回列表
评论

    分享到