暑假學習
完善華為官網
/輪播圖/
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>

注意：專案只能是容器的頂層子元素，不包含專案的子元素，比如上面代碼的

元素就不是專案，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

實體

Jq引入方式

自己呼叫自己的回圈被稱為遞回
Bootstrap中移動優先