-垂直（水平）导航栏--转换-过度-动画-多列-瀑布流-事件

----垂直导航栏效果
ul{
list-style-type:none;
margin:0px;
padding:0px;
}
a:link,a:visited{
text-decoration:none;
display:block;----------------------水平导航，删掉block---li{display:inline}
background-color:burlywood;
color:aliceblue;
50px;
text-align:center;
}
a:active,a:hover{--------移到选中高亮
background-color:crimson;
}
-------------
<ul>
<li><a href="#">导航1</a></li>
</ul>

----------边框border 颜色solid darkgray
----图片透明opacity--0完全透明-1不透明

--通过css3转换，我们能过对元素进行移动，缩放，转动，拉长或者拉伸
转换是使元素改变形状，尺寸和位置的一种效果
可以使用2d，3D来转换元素
2.2D转换方法：
translate()---移动-transform:translate(100px,100px);
--兼容问题用（-wedkit-transform）-safari chrome
(-ms-transform:)-IE
(-o-transform:)-opera
(-moz-transform)-Firefox

rotate()---旋转-transform:rotate(180deg)-也有兼容问题
scale()--缩放-scale(1,2);宽度-高度，1宽度不变，2高度变为原来的2倍
skew()--倾斜-skew(50deg,50deg)-x轴，y轴
matrix()-矩阵
3.3D转换方法
rotateX()
rotateY()

----过度
1.通过css3可以给元素添加一些效果
是从元素的一种样式转换成另一种样式
动画效果的css
动画执行的时间
3.属性

---动画

---多列-可以创建多列来对文本或者区域进行布局
属性：column-count：3
-webkit-column-count:3
.div{
多列
}

----瀑布流--不等高排列
<div class="container">
<div>图片</div>
多个图片
</div>
样式
.container{
column-250px;
-webkit-column-250px;
-webkit-column-gap:5px;
column-gap:5px;
}
.container div{
250px;
margin:5px 0;
}

--事件
onClick--单击事件
onMouseOver--鼠标经过事件
<div onmouseover="onOver(this)" onmouseout="onOut(this)">
function onOver(ooj){
ooj.innerHTML="Hellow";
}
onMouseOut--鼠标移出事件
onChange--文本内容改变事件
onSelect--文本框选中事件
onFocus--光标聚集事件
onBlur--移开光标事件
onLoad--网页加载事件
onUnload--关闭网页事件