发表于: 2019-11-08 19:51:42

1 1122


今天完成的事情

今天是继续写任务八的一个过程,在导航栏里遇到了许多的问题。直接引用了bootstrap中文文档中的导航栏组件,需要的样式也自己做了删减。另外是轮播图的使用,也是用了中文文档的轮播图,里面的图片再自己找找。

        <nav class="navbar navbar-default " role="navigation">

            <div class="container-fluid">

                <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                        <span class="sr-only">Toggle navigation</span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                        <span class="icon-bar"></span>

                    </button>

                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                    <ul class="nav navbar-nav">

                        <li class="active ce">

                            <a href="">首页</a>

                        </li>

                        <li class="active ce">

                            <a href="">职业</a>

                        </li>

                        <li class="active ce">

                            <a href="">推荐</a>

                        </li>

                        <li class="active ce">

                            <a href="">关于</a>

                        </li>

                    </ul>

                </div>

        </nav>

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

            <!-- Indicators -->

            <ol class="carousel-indicators">

                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

                <li data-target="#carousel-example-generic" data-slide-to="1"></li>

                <li data-target="#carousel-example-generic" data-slide-to="2"></li>

            </ol>

 

            <!-- Wrapper for slides -->

            <div class="carousel-inner" role="listbox">

                <div class="item active">

                    <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/9c2b8d09-82ba-4e16-905d-ec7c7e9371ca.png"

                        alt="...">

 

                </div>

                <div class="item">

                    <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/548d9b7b-5f2d-4e00-ba85-59a927c6559a.png"

                        alt="...">

 

                </div>

                <div class="item">

                    <img src="http://jns.img.bucket.ks3-cn-beijing.ksyun.com/skill/1/9c2b8d09-82ba-4e16-905d-ec7c7e9371ca.png"

                        alt="...">

 

                </div>

            </div>

 

            <!-- Controls -->

            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

                <span class="sr-only">Previous</span>

            </a>

            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

                <span class="sr-only">Next</span>

            </a>

        </div>

明天要完成的事情

明天遇到的问题可能相对来说不会有多少了,所以尽可能如果能把后面两个页面结束掉是最号的。

今天遇到的问题

今天遇到的问题也主要是在导航栏中的问题,开始手敲代码进入发现代码一样但是并没起效果,然后就只能复制粘贴了。但又除了一个问题是,缩放到小比例时按钮只能把它展开并不能把下面的部分收回,这样导致了查原因也一直查不出,后发现在引用js文件时我在body部分和在head部分都使用上了,可能是这样产生了冲突,删去头部后就成功了。而在轮播图中则是采用了菜鸟教程上的轮播图样式没成功,一开始以为是bootstrap版本的问题,再去官网上找的一个轮播图样式就没什么问题。

收获

今天的收获是对bootstrap框架里的组件大体有了一个初步的认识,以后还需要细细的琢磨才能吃的比较透。



返回列表 返回列表
评论

    分享到