兩欄自適應布局
/*html body代碼*/
<div class="layout">
<div class="left">left</div>
<div class="right">right</div>
<div class="mian">mian</div>
</div>
/*less代碼*/
.clearfix() {
&:after {
content: '';
display: block;
clear: both;
}
}
.layout {
.clearfix();
border: 5px solid red;
.left {
border: 5px solid orange;
width: 100px;
float: left;
opacity: .5;
/*透明度*/
}
.mian {
border: 5px solid blue;
margin-left: 100px;
margin-right: 100px;
}
.right {
border: 5px solid green;
width: 100px;
float: right;
}
}
引入JavaScript
- 可以直接在script標簽里寫js代碼芋酌，如：
alert('hello world'); /*刷新網頁的時候回彈出hello world*/
- script要放到單獨的文件中烈掠，在html中用script引用在塔，格式如下：
<script src="script.js"></script>;
給元素加內容
- 用選擇器選中要修改的元素，如：
/*把label的名字從‘顏色值’改為‘hello world’*/
var label = document.querySelector('.color-mixer .label');/*選中.color-mixer .label選擇器卸例，label和選擇器可以改*/
label.innerHTML = 'helloworld';
排查js錯誤
-
使用Chrome開發(fā)者工具中的Console面板排查錯誤，常見錯誤：
1.單詞拼寫錯誤肌毅，如大小寫錯誤筷转，提示出錯的行數：
1.png
2.英文半角全角錯誤。
3.選擇器單詞拼寫錯誤芽腾，提示null旦装，如：
2.png
4.元素單詞拼寫錯誤，提示not defined摊滔，如：
3.png
給元素添加樣式
var indicator = document.querySelector('.color-mixer .indicator');/*選中需要添加樣式的元素*/
console.log(indicator);/*確定選中該元素*/
indicator.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';/*給該元素添加樣式*/
查詢和筆記
- 常用瀏覽器
IE阴绢、Edge、Firefox艰躺、Chrome呻袭、Safari、iOS Safari腺兴、Opera Mini左电、Chrome for Android、UC Browser for Android页响、Samsung Internet篓足、QQ Browser。 - 常用瀏覽器的主流版本
IE：IE8闰蚕、IE11栈拖。
Edge：Edge16、Edge17没陡、Edge18涩哟。
Firefox：Firefox59、Firefox60盼玄、Firefox61贴彼。
Chrome：Chrome55、Chrome56埃儿、Chrome63器仗、Chrome64、Chrome65童番、Chrome66青灼、Chrome67暴心、Chrome68妓盲。
Safari：Safari11.1杂拨、Safari TP。
iOS Safari：Safari & Chrome for iOS 10.3悯衬、Safari & Chrome for iOS 11.2弹沽、Safari & Chrome for iOS 11.3。
Chrome for Android：Chrome 64 for Android.
UC Browser for Android：UC Browser 11.8 for Android
Samsung Internet：Samsung Internet6.2筋粗。
QQ Browser：QQ Browser1.2策橘。 - 瀏覽器排行榜2018最新瀏覽器市場份額排名
- JS變量名命名規(guī)則
a、變量命名必須以字母或是下標符號””或者”$”為開頭娜亿。
b丽已、變量名長度不能超過255個字符。
c买决、變量名中不允許使用空格沛婴，首個字不能為數字。
d督赤、不用使用腳本語言中保留的關鍵字及保留符號作為變量名嘁灯。
e、變量名區(qū)分大小寫躲舌。(javascript是區(qū)分大小寫的語言)丑婿。
舉例：
a：以字母或下劃線或$開頭
oa、ob没卸、AA羹奉、$aaa、_fag/*合法*/
oa*b约计、h&b诀拭、hh#jj/*不合法*/
b：長度不超過255字符
oa、oaaaaaaaaaa病蛉、o.........aaaaaaa(......為省略炫加，但是總長不超過255字符)/*合法*/
o.........aaaaaaa(......為省略，但是總長超過255字符)/*不合法*/
c：不能使用空格
oa铺然、o_a俗孝、o_A/*合法*/
o a、oa a魄健、oA_h h b/*不合法*/
d：不能使用關鍵字及保留字
class赋铝、style、html/*不合法*/
e：區(qū)分大小寫
oBtn與obtn不同沽瘦、oa與oA不同
- 定義變量的格式
var 變量名;
var 變量名=初始值; //初始值不受數據類型的限制
