html与css入门经典doc,用css + javascript实现层的隐藏、显示切换.doc

PAGE / NUMPAGES

用css ＋ javaScript实现层的隐藏、显示切换

.Display{

display:inline;

}

.Hidden{

display:none;

}

function goto(t){

if ( t==1 ){

document.all.Layer1.className="DisPlay";

document.all.Layer2.className="Hidden";

} else if ( t==2 ){

document.all.Layer2.className="DisPlay";

document.all.Layer1.className="Hidden";

}

}

前面的内容。

第一层：点击切换到第二层！

第二层：有很多很多很多很多很多很多文字。点击切换到第一层！资料个人收集整理，勿做商业用途

后面的内容。

资料个人收集整理，勿做商业用途

资料个人收集整理，勿做商业用途

DIV CSS布局实例：CSS标签切换代码实例教程

* {list-style-type:none; font-size:12px; text-decoration:none; margin:0; padding:0;}资料个人收集整理，勿做商业用途

a {behavior:url(xuxian.htc)}

.woaicss {width:438px; height:300px; overflow:hidden; margin:50px auto;}资料个人收集整理，勿做商业用途

.woaicss_title {width:438px; height:30px; background:#fff url(btn_bg.png) no-repeat; overflow:hidden;}资料个人收集整理，勿做商业用途

.woaicss_title li {display:block; float:left; margin:0 2px 0 0; display:inline; text-align:center;}资料个人收集整理，勿做商业用途

.woaicss_title li a {display:block; width:90px; heigth:30px; line-height:34px; color:#fff;}资料个人收集整理，勿做商业用途

.woaicss_title li a:hover {color:#f0f0f0; text-decoration:underline;}

.woaicss_title_bg1 {background-position:0 0;}

.woaicss_title_bg2 {background-position:0 -30px;}

.woaicss_title_bg3 {background-position:0 -60px;}

.woaicss_title_bg4 {background-position:0 -90px;}

.woaicss_con {display:block; width:438px; height:270px; background:url(con_bg.png) no-repeat 0 0; overflow:hidden;}资料个人收集整理，勿做商业用途

.woaicss_con ul {width:418px; height:250px; mar