第一篇正式的技术博客
CSS的选择器种类：通配选择器、标签选择器、类选择器、ID选择器、层级选择器、群组选择器。
CSS的引入方式：
1.<style>内部引入方式</style>
2.行间样式，标签内部的引入方式<div class="" width=""></div>
3.link引入，最纯净，外部引入方式
border的相关知识：
border的默认值宽度为3，数值不能为负数；
border的样式有三种：solid实线 dashed虚线 dotted点状线
body的相关知识：
可以设置宽高，可以设置边框背景，设置边框，可以修改width，height值，设置背景，会撑满屏幕.
设置width值和height值可以修改body内容，不影响背景。
h级标签
h1～h6 是常用的，默认宽度继承父级，有默认的margin，字体默认加粗，行级标签
a标签的四中伪装态：
a:link:没有访问过的状态
a:visited访问过后的样式
a:hover鼠标悬浮在上面的样式
a:active点击后未松开的样式
img标签：
是行级标签，但是可以设置宽和高。
图片边框样式，单标签，有src路径属性，alt内容替代属性，title提示属性，可以设置宽和高的行级标签，自带边框
<img src（路径）=“” alt（描述）=“” title（标题）=“” width= height= （宽高可以在CSS里面设置）/>
ol与ul标签：
ul是无序标签，ol是有序标签；要与li标签配合使用，中间不能添加任何其他的标签。
表格标签的使用：
table表格级
table-rows表格行级
table-cell表格单元级
<table>
<caption>
<tbody>
<tr>
<th></th><!-- (行头) -->
<td rowspan="(跨列)"></td>
<td colspan="(跨行)"></td>
</tr>
</tbody>
</caption>
</table>
文本格式化标签：
i,em,var,b,strong,sub,sup,del,object,code,small,big{}
新的字体样式：
1.em，按倍数递增。可以取小数。以父级为参考依据
2.rem，按倍数增长，可以取小数，以html为依据。
3.%对父级的字体进行百分比改变
4.font-weight:bold（加粗）normal(正常)
5.font-style:italic(斜体) normal（正常）
6.sub sup 用inherit恢复正常字体。
7.font-family:”黑体”，“微软雅黑”，Tohoma，sans-serifd;
8.line-height:行高，单位像素，整数或者是小数，可以使文本上下居中
9.font的复合写法，font:font-weight font-size/line-height font-family(bold 20px/1.5 oblique Arial,sans-serif)
10.单标签
表单标签：
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.文件
11.
清除浮动的三种方法：
1.clear：both；
2.overflow：hidden;
3.增加父类的高度。
定位：
1.相对定位：relative；
2.绝对定位：absolute；
3.固定定位：fixed。
初始javascript
1.大小写不同代表两个不同的东西。
2.不能把关键字和保留字用作标识符
3.ECMAscript关键字
break,else,new,var,case,finally,return,void,catch,for,switch,while,continue,function,this,with,default,if,throw,delete,in,try,do,instanceof,typeof,debugger(es6新增关键字)
4.获得节点：
var btns =document.querySelectorAll(“”);//选择一组标签选择器
var btn =document.querySelector(“”);//选择一个标签选择器
5.JS的文件引入：
<script type="text/javascript" src="js/test.js"></script>
图片渐变核心代码：
function showPic1(){
btn1.style.background = '#fff';
document.querySelector("ol").style.left = '0px';
}
function showPic2 () {
btn2.style.background = '#fff';
document.querySelector("ol").style.left = '-800px';
}
function showPic3 () {
btn3.style.background = '#fff';
document.querySelector("ol").style.left = '-1600px';
}
function showPic4 () {
btn4.style.background = '#fff';
document.querySelector("ol").style.left = '-2400px';
}
点击图片换图核心代码：
var btnRight =document.querySelector(".right");
var btnLeft =document.querySelector(".left");
var img =document.querySelector("img");
var arr = [ 'img/pic1.jpg',
'img/pic2.jpg',
'img/pic3.jpg',
'img/pic4.jpg',
'img/pic5.jpg',
'img/pic6.jpg',
'img/pic7.jpg']
var i = 0;
btnRight.onclick = function(){
i++;
if(i > 6){
i = 0;
}
img.src = arr[i]
}
btnLeft.onclick = function(){
i--;
if(i < 0){
i = 6;
}
img.src = arr[i]
}