2018.6.28
今天完成的事情:
1.继续任务八
2.轮播图的学习
3.table标签的学习
明天计划的事情:
1.继续任务八
遇到的问题:
收获:
1.table标签
<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
<tr>必须在一个<table></table>里面,它不能单独使用,相当于<table>的属性标签.
<table>标示一个表格,<tr>标示这个表格中间的一个行
<td>标示行中的一个列,需要嵌套在<tr></tr>中间
具体格式是:(两行两列)
<table>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</teble>
<th>和<td>一样,也是需要嵌套在<tr>当中的,<tr>嵌套在<table>当中
<table>...</table> 用于定义一个表格开始和结束
<th>...</th> 定义表头单元格。表格中的文字将以粗体显示，在表格中也可以不用此标签，<th>标签必须放在<tr>标签内
2.轮播图
<code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Carousel</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
/*调整容器大小*/
#myCarousel {
width: 600px;
}
/*调整圆圈链接ol位置*/
.carousel-indicators {
bottom: -5px;
}
/*调整轮播图位置*/
#carousel-example-generic {
top: 100px;
}
</style>
</head>
<body>
<div class="container" id="myCarousel">
<!-- 轮播图容器 -->
<div id="carousel-example-generic" class="carousel slide">
<!-- 轮播图上的圆圈链接 -->
<ol class="carousel-indicators radiou">
<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>
<!-- 轮播图具体内容 -->
<div class="carousel-inner">
<div class="item active">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510071051013&di=fe871132a698a7e62aa1036240aa221b&imgtype=jpg&src=http%3A%2F%2Fimg.evolife.cn%2F2015-01%2Fbde62420fc3165f8_thumb.jpg" style="height: 300px; width:600px">
<!-- 图上文字 -->
<div class="carousel-caption">
<h4>Red Car Fly</h4>
<p>ajsuten hsdfupeia jsdtfua</p>
</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510077934469&di=d7d222fb5b5465fde75425e984cf2b90&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F7a899e510fb30f2478787ac5c295d143ac4b0311.jpg" style="height: 300px; width:600px">
<!-- 图上文字 -->
<div class="carousel-caption">
<h4>White Car Fly</h4>
<p>ajsuten hsdfupeia jsdtfua</p>
</div>
</div>
<div class="item">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510077977327&di=404f5cf97186c344d0a34a343f8be5b2&imgtype=0&src=http%3A%2F%2Fimg.autofan.com.cn%2F2016-12-05%2F16%2Ff206c101380a.JPG" style="height: 300px; width:600px">
<!-- 图上文字 -->
<div class="carousel-caption">
<h4>Blue Car Fly</h4>
<p>ajsuten hsdfupeia jsdtfua</p>
</div>
</div>
</div>
<!-- 轮播图上的向前一图切换链接 -->
<a href="#carousel-example-generic" data-slide="prev" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<!-- 轮播图上的向后一图切换链接 -->
<a href="#carousel-example-generic" data-slide="next" class="right carousel-control">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!-- 引入jquery与bootstrap的js文件 -->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(".carousel").carousel({
interval:2000 //每隔两秒自动轮播
})
</script>
</body>
</html></code>
返回列表
评论