暑假学习
完善华为官网
/轮播图/
var ImgListLi = document.getElementsByClassName(“ImgListLi”);
var leftBtn = document.getElementsByClassName(“leftBtn”)[0];
var rightBtn = document.getElementsByClassName(“rightBtn”)[0];
var imglistT = document.getElementsByClassName(“imglistT”);
var index = 0;
var timer = setInterval(function() {
index++;
if (index >= 3) {
index = 0;
ImgListLi[2].style.opacity = “0”;
ImgListLi[0].style.opacity = “1”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index - 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e667”;
}, 3000);
leftBtn.onclick = function() {
clearInterval(timer);
index–;
if (index <= -1) {
index = 2;
ImgListLi[index].style.opacity = “1”;
ImgListLi[0].style.opacity = “0”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index + 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e667”;
timer = setInterval(function() {
index++;
if (index >= 3) {
index = 0;
ImgListLi[2].style.opacity = “0”;
ImgListLi[0].style.opacity = “1”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index - 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e6667”;
}, 4000);
}
rightBtn.onclick = function() {
clearInterval(timer);
index++;
if (index >= 3) {
index = 0;
ImgListLi[index].style.opacity = “1”;
ImgListLi[2].style.opacity = “0”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index - 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e6667”;
timer = setInterval(function() {
index++;
if (index >= 3) {
index = 0;
ImgListLi[2].style.opacity = “0”;
ImgListLi[0].style.opacity = “1”;
} else {
ImgListLi[index].style.opacity = “1”;
ImgListLi[index - 1].style.opacity = “0”;
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = “#dfdcd9”;
}
imglistT[index].style.backgroundColor = “#4e6667”;
}, 4000);
}
var inde;
for (var i = 0; i < 3; i++) {
imglistT[i].num = i;
imglistT[i].onclick = function() {
clearInterval(timer);
inde = this.num;
for (var e = 0; e < 3; e++) {
ImgListLi[e].style.opacity = “0”;
}
ImgListLi[inde].style.opacity = "1";
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = "#dfdcd9";
}
imglistT[inde].style.backgroundColor = "#4e6667";
timer = setInterval(function() {
index++;
if (index >= 3) {
index = 0;
ImgListLi[2].style.opacity = "0";
ImgListLi[0].style.opacity = "1";
} else {
ImgListLi[index].style.opacity = "1";
ImgListLi[index - 1].style.opacity = "0";
}
for (var i = 0; i < 3; i++) {
imglistT[i].style.backgroundColor = "#dfdcd9";
}
imglistT[index].style.backgroundColor = "#4e6667";
}, 4000);
}
}
bootstrap复习
Width auto:加边界是往里面扣掉的 流体容器
Width 100%:边界是往外加的 固定容器
小于768 auto
3.栅格系统
4.Lg具有阈值的概念
!!栅格源码分析
container-fix:用来清除浮动 继承清除浮动的属性
bootstrap下载安装
可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本。
Download Bootstrap:下载 Bootstrap。点击该按钮,您可以下载 Bootstrap CSS、JavaScript 和字体的预编译的压缩版本。不包含文档和最初的源代码文件。
Download Source:下载源代码。点击该按钮,您可以直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
网格系统布局(grid)
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。
《/div>
1
2
3
注意:项目只能是容器的顶层子元素,不包含项目的子元素,比如上面代码的
元素就不是项目。Grid 布局只对项目生效。
单元格
行和列的交叉区域,称为"单元格"(cell)。
正常情况下,n行和m列会产生n x m个单元格。比如,3行3列会产生9个单元格。
网格线
划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。
正常情况下,n行有n + 1根水平网格线,m列有m + 1根垂直网格线,比如三行就有四根水平网格线。
grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距)。
排版
Bootstrap 中定义了所有的 HTML 标题(h1 到 h6)的样式
我是标题1 h1
我是标题2 h2
我是标题3 h3
我是标题4 h4
我是标题5 h5
我是标题6 h6
表格 如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:实例
名称 | 城市 |
---|---|
Tanmay | Bangalore |
Sachin | Mumbai |
Jq引入方式
自己调用自己的循环被称为递归
Bootstrap中移动优先