发表于: 2019-11-08 19:51:42
1 1123
今天完成的事情
今天是继续写任务八的一个过程,在导航栏里遇到了许多的问题。直接引用了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框架里的组件大体有了一个初步的认识,以后还需要细细的琢磨才能吃的比较透。
评论