发表于: 2019-08-19 22:32:24
1 1032
今天完成的事情:完成了任务八的第一个页面,学会了轮播图的套用方法,学习了一些Visual Studio的一些比较方便的快捷键
明天计划的事情:完成任务八的个页面
遇到的问题:暂无
收获:
Bootstrap轮播图组件分三部分:
(1)图片部分:用于展示内容的图片。
(2)计数器:用于计算当前切换的图片索引。
(3)控制器:控制图片的显示对象。
第一步:
定义一个(div)容器,这个容器用class=”carousel”样式,并且给这个容器定义一个id值,方便后面采用 data 属性来声明触发:
<div id="carouselDemo" class="carousel"></div>
第二步:
轮播图片的计数器,用于显示图片的播放顺序。就是图片下方的那个白色小圆点,标记当前播放到哪张图片了。
<ol 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>
</ol>
第三步:
设置轮播图片。
<div class="carousel-inner">
<div class="item active">
<img src="../images/img1.jpg" alt="First slide">
</div>
<div class="item">
<img src="../images/img2.jpg" alt="Second slide">
</div>
<div class="item">
<img src="../images/img3.jpg" alt="Third slide">
</div>
</div>
第四步:
给图片添加文字。有时候我们需要在图片底部添加一些文字和链接,作为图片的说明信息。我们可以使用class=”carousel-caption”样式;
<div class="carousel-caption">
<h2>标题一</h2>
<p>这是第一张图片</p>
</div>
第五步:
控制器:是手动操作图片左右切换的按钮。
<a class="carousel-control left" href="#carouselDemo" data-slide="prev">Prev</a>
<a class="carousel-control right" href="#carouselDemo" data-slide="next">Next</a>
以上是轮播图的基本构成,下面来详细解释其中一些属性:
(1)data-ride=”carousel”:作用于class=”carousel”最外层容器上,标记轮播在页面加载时就开始动画播放。
(2)data-target:作用于class=”carousel-indicators”的每个子元素(li)上,data-target=”#class=‘carousel’外层容器的ID或者其他选择器”。
(3)data-slide:接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
(4)data-slide-to:用来传递某个帧的下标,可以用来直接跳转到某个指定的帧,帧的下标是从0开始的,定义在( li )元素上
编译器快捷键
1、打开一个新窗口: Ctrl+Shift+N
2、关闭窗口: Ctrl+Shift+W
3、同时打开多个编辑器(查看多个文件)
4、新建文件 Ctrl+N
5、文件之间切换 Ctrl+Tab
6、切出一个新的编辑器(最多 3 个) Ctrl+\,也可以按住 Ctrl 鼠标点击 Explorer 里的文件名
7、左中右 3 个编辑器的快捷键 Ctrl+1 Ctrl+2 Ctrl+3
8、3 个编辑器之间循环切换 Ctrl+
9、编辑器换位置, Ctrl+k然后按 Left或 Right
10、代码行缩进 Ctrl+[ 、 Ctrl+]
11、Ctrl+C 、 Ctrl+V 复制或剪切当前行/当前选中内容
12、代码格式化: Shift+Alt+F,或 Ctrl+Shift+P 后输入 format code
13、上下移动一行: Alt+Up 或 Alt+Down
14、向上向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down
15、在当前行下边插入一行 Ctrl+Enter
16、在当前行上方插入一行 Ctrl+Shift+Enter
评论