发表于： 2020-05-01 20:51:18
0 1407
一.今日完成的内容和收获：
（一）完成任务八的技能树首页，使用了bootstrap框架，只完成了中等屏幕和大屏幕的结构布局，使用了bootstrap 的轮播图插件
（二）轮播图
1.demo
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>轮播图</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<style>
#myCarousel {
width: 1024px;
}
.carousel-caption {
top: 30rem;
}
</style>
</head>
<body>
<!-- carousel 轮播插件 -->
<!-- data-ride="carousel" 设置自动切换 -->
<div class="carousel" id="myCarousel" data-ride="carousel">
<!-- 指示器(下方圆点) -->
<!-- data-slide-to= 图片顺序，第一张图片为0 data-targer 选择轮播图的插件ID，因为一个页面可能有多个轮播插件 -->
<ul class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ul>
<!-- 滑块(内容图片) -->
<!-- item active 默认显示图片 -->
<div class="carousel-inner">
<div class="item active">
<img src="1.jpg" alt="">
<!-- 在图片上加入文字 -->
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<div class="item ">
<img src="2.jpg" alt="">
</div>
<div class="item ">
<img src="3.jpg" alt="">
</div>
<div class="item ">
<img src="4.jpg" alt="">
</div>
</div>
<!-- 控制器（左右剪头） -->
<!-- 前一张图片 -->
<a href="#myCarousel" class="carousel-control left" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!-- 后一张图片 -->
<a href="#myCarousel" class="carousel-control right" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" ></span>
</a>
</div>
</body>
</html>
2.效果图
二.遇到的问题
三.明天的计划
1.完善小屏幕和超小屏幕下的页面布局
2.进行任务八第二个页面
返回列表
评论