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

----垂直导航栏效果

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;

width:50px;

text-align:center;

}

a:active,a:hover{--------移到选中高亮

background-color:crimson;

}

-------------

• 导航1

----------边框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{

多列

}

----瀑布流--不等高排列

图片

多个图片

样式

.container{

column-width:250px;

-webkit-column-width:250px;

-webkit-column-gap:5px;

column-gap:5px;

}

.container div{

width:250px;

margin:5px 0;

}

--事件

onClick--单击事件

onMouseOver--鼠标经过事件

function onOver(ooj){

ooj.innerHTML="Hellow";

}

onMouseOut--鼠标移出事件

onChange--文本内容改变事件

onSelect--文本框选中事件

onFocus--光标聚集事件

onBlur--移开光标事件

onLoad--网页加载事件

onUnload--关闭网页事件