发表于： 2019-06-27 23:05:34
1 680
今天完成的事 ：今天在研究Bootstrap 4 Flex（弹性）布局的用法，踩了好多坑，到下午才搞明白。
晚上在写轮播图，还是好多坑，今天就这吧。
明天的计划：把一些处理不掉的问题先放下，把页面写出来最后在处理。
遇到的问题：第一是弹性盒子的问题，已解决
第二就是轮播图切换不够完美。
收获：搞懂了Bootstrap 4 Flex（弹性）布局的用法，改造框架轮播图。
弹性盒子的写法。
<div class="col-3 d-inline-flex align-items-center">
<!--11111111111-->
<div class="padding-left-10 padding-right-10">
<div class="border-r text-color-Green line-height-70 text-center">1</div>
</div>
<div class="text-color-Gray font-14"><span>匹配你现在的个人情况寻找适合自己的岗位</span></div>
</div>
框架轮播图：
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active d-inline-flex justify-content-around">
<div class="card padding-top-30 padding-right-20 padding-left-20 "
style="width:270px; height:370px;">
<i class="image-1 image-110 " alt="Card image"></i>
<div class="card-body">
<p class="text-color-black text-color-black text-center font-size-18px margin-bottom-20">
技术顾问：罗大佑</p>
<p class="font-14 justify line-height-20 text-spacing-1">
百度技术总监：互联网基础 服务领域，从事虚拟主机、 云服务器、域名。曾任新网 高级技术经理，负责技术研发、团队管理与建设。
</p>
</div>
</div>
<div class="card padding-top-30 padding-right-20 padding-left-20 "
style="width:270px; height:370px;">
<i class="image-1 image-110 " alt="Card image"></i>
<div class="card-body">
<p class="text-color-black text-color-black text-center font-size-18px margin-bottom-20">
技术顾问：罗大佑</p>
<p class="font-14 justify line-height-20 text-spacing-1">
百度技术总监：互联网基础 服务领域，从事虚拟主机、 云服务器、域名。曾任新网 高级技术经理，负责技术研发、团队管理与建设。
</p>
</div>
</div>
<div class="card padding-top-30 padding-right-20 padding-left-20 "
style="width:270px; height:370px;">
<i class="image-1 image-110 " alt="Card image"></i>
<div class="card-body">
<p class="text-color-black text-color-black text-center font-size-18px margin-bottom-20">
技术顾问：罗大佑</p>
<p class="font-14 justify line-height-20 text-spacing-1">
百度技术总监：互联网基础 服务领域，从事虚拟主机、 云服务器、域名。曾任新网 高级技术经理，负责技术研发、团队管理与建设。
</p>
</div>
</div>
<div class="card padding-top-30 padding-right-20 padding-left-20 "
style="width:270px; height:370px;">
<i class="image-1 image-110 " alt="Card image"></i>
<div class="card-body">
<p class="text-color-black text-color-black text-center font-size-18px margin-bottom-20">
技术顾问：罗大佑</p>
<p class="font-14 justify line-height-20 text-spacing-1">
百度技术总监：互联网基础 服务领域，从事虚拟主机、 云服务器、域名。曾任新网 高级技术经理，负责技术研发、团队管理与建设。
</p>
</div>
</div>
</div>
<div class="carousel-item active d-inline-flex justify-content-around">
<div class="card padding-top-30 padding-right-20 padding-left-20 " style="width:270px; height:370px;"></div>
<i class="image-1 image-110 " alt="Card image"></i>
<div class="card-body">
<p class="text-color-black text-color-black text-center font-size-18px margin-bottom-20">
技术顾问：罗大佑</p>
<p class="font-14 justify line-height-20 text-spacing-1">
百度技术总监：互联网基础 服务领域，从事虚拟主机、 云服务器、域名。曾任新网 高级技术经理，负责技术研发、团队管理与建设。
</p>
</div>
</div>
<div class="card padding-top-30 padding-right-20 padding-left-20 "
style="width:270px; height:370px;">
<i class="image-1 image-110 " alt="Card image"></i>
<div class="card-body">
<p class="text-color-black text-color-black text-center font-size-18px margin-bottom-20">
技术顾问：罗大佑</p>
<p class="font-14 justify line-height-20 text-spacing-1">
百度技术总监：互联网基础 服务领域，从事虚拟主机、 云服务器、域名。曾任新网 高级技术经理，负责技术研发、团队管理与建设。
</p>
</div>
</div>
<div class="card padding-top-30 padding-right-20 padding-left-20 "
style="width:270px; height:370px;">
<i class="image-1 image-110 " alt="Card image"></i>
<div class="card-body">
<p class="text-color-black text-color-black text-center font-size-18px margin-bottom-20">
技术顾问：罗大佑</p>
<p class="font-14 justify line-height-20 text-spacing-1">
百度技术总监：互联网基础 服务领域，从事虚拟主机、 云服务器、域名。曾任新网 高级技术经理，负责技术研发、团队管理与建设。
</p>
</div>
</div>
<div class="card padding-top-30 padding-right-20 padding-left-20 "
style="width:270px; height:370px;">
<i class="image-1 image-110 " alt="Card image"></i>
<div class="card-body">
<p class="text-color-black text-color-black text-center font-size-18px margin-bottom-20">
技术顾问：罗大佑</p>
<p class="font-14 justify line-height-20 text-spacing-1">
百度技术总监：互联网基础 服务领域，从事虚拟主机、 云服务器、域名。曾任新网 高级技术经理，负责技术研发、团队管理与建设。
</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
返回列表
评论