发表于： 2018-08-31 21:53:02
1 643
今天完成的事情：
1.学会了轮播图中的制作
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- 指示符 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1" class="active"></li>
<li data-target="#demo" data-slide-to="2" class="active"></li>
</ul>
<!-- 轮播图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="image" src="Image.jpg">
<div class="carousel-caption">
<p>作为一个初级菜鸟，你是否想了解</p>
<h3>50万</h3>
<p class="gill">年薪的程序员，都会哪些技能</p>
</div>
</div>
<div class="carousel-item">
<img class="image" src="Image.jpg">
<div class="carousel-caption">
<p>作为一个初级菜鸟，你是否想了解</p>
<h3>50万</h3>
<p class="gill">年薪的程序员，都会哪些技能</p>
</div>
</div>
<div class="carousel-item">
<img class="image" src="Image.jpg">
<div class="carousel-caption">
<p>作为一个初级菜鸟，你是否想了解</p>
<h3>50万</h3>
<p class="gill">年薪的程序员，都会哪些技能</p>
</div>
</div>
</div>
<!-- 左右切换按钮 -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
2.了解了hover的使用
.nav-item:hover .white{
display:block;
}
3.对栅格布局有了更充分的理解
<div class="container">
<ul class="row">
<li class="content col-xs-12 col-sm-6 col-lg-3">
<img src="rocket.jpg" alt="">
<h6>高效</h6>
<p class="work">将五到七年的成长时间，缩短 到一年到三年。</p>
</li>
<li class="content col-xs-12 col-sm-6 col-lg-3">
<img src="archive.jpg" alt="">
<h6>高效</h6>
<p class="work">标准的实战教程，不会走弯路</p>
</li>
<li class="content col-xs-12 col-sm-6 col-lg-3">
<img src="Shape.jpg" alt="">
<h6>高效</h6>
<p class="work">同班好友，同院学长，技能大师，入学就混入职脉圈，为以后铺平道路。</p>
</li>
<li class="content1 col-xs-12 col-sm-6 col-lg-3">
<div>
<img src="user.jpg" alt="">
<span class="number">12400</span>
</div>
<p class="work">累计在线学习人数</p>
<div>
<img src="user.jpg" alt="">
<span class="number">12400</span>
</div>
<p class="work">学员已经找到满意工作</p>
</li>
</ul>
</div>
4.学习了修改指示符的默认样式
.carousel-indicators li{
width:10px;
height:10px;
border-radius: 50%;
}
明天计划的事情：
1.继续任务8/9
2.继续学习栅格布局
遇到的问题：暂无
收获：由于对伪元素理解的不是特别深刻，导致编码过程中使用了一些复杂的代码，经过师兄讲解，有了更充分的认识。
还有就是比较熟练地掌握了轮播图。
返回列表
评论