公告列表设计.ppt

第14章 公告列表设计 14.1 视频排行列表设计 14.1 视频排行列表设计 #frm ul #block .num{ position:absolute; /*设置绝对定位*/ left:0; /*设置水平偏移*/ top:0; /*设置竖直偏移*/} #frm ul #block .cont position:absolute; /*设置绝对定位*/ bottom:0 !important; /*设置竖直偏移*/ bottom:3px; /*设置竖直偏移*/ left:0; /*设置水平偏移*/ } 14.1 视频排行列表设计 #frm ul #block .bg { filter:alpha(opacity=60); /*设置透明度*/ opacity:0.6; background-color:#000000; /*设置背景颜色*/ position:absolute; /*设置绝对定位*/ bottom:0 !important; /*设置竖直偏移*/ bottom:3px; /*设置竖直偏移*/ left:0; /*设置水平偏移*/ width:100%;/*设置宽度*/ height:24px; /*设置高度*/ display:block; /*隐藏显示*/ } 14.1 视频排行列表设计 function mouseoverhandle() { for( i=0; ilists.length; i++ ) { childnodes=lists[i].childNodes; for( j=0; jchildnodes.length; j++ ) { if( childnodes[j].id==block ) childnodes[j].id=; /*清除id*/}} childnodes=this.childNodes; for( j=0; jchildnodes.length; j++ ) { if( childnodes[j].nodeName==DIV ) childnodes[j].id=block; /*设置id* } } 14.2 旁侧橱窗设计 14.2 旁侧橱窗设计 #frm ul li { width:60px; /*设置宽度*/ border-color:#999; /*设置初始化边框*/ border-style:solid; /*设置边框形状*/ border-width:1px; /*设置边框宽度*/ border-top:none; /*取消上部边框*/ border-left:none; /*取消左部边框*/ border-right:none; /*取消右部边框*/ font-size:12px; /*设置字体大小*/ padding:5px 10px; /*设置内边距*/ text-align:center; /*设置内容居中*/ margin:0; /*设置外边距*/ float:left; /*左浮动*/ clear:both; /*从上一个浮动标签下面开始*/ color:#666; /*设置颜色*/ cursor:pointer; /*设置鼠标指针为手指*/ 14.2 旁侧橱窗设计 background-image: -moz-linear-gradient(top, #FFFFFF, #DDDDDD); /* Firefox */ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #DDDDDD)); /* Safari, Chrome */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#DDDDDD, GradientType=0); /* IE*/ 14.2 旁侧橱窗设计 lists[i].onmouseover=mouseoverhandle;/*绑定鼠标移入事件*/ lists[0].id=choose;/*将第一个li的id设置为choose就可以显示其颜色*/ if( lists[0].img!=null ) lists[0].img.style.visibility=visible; /*将第一个li的对应的img显示出来*/ function mouseoverhandle() { for( i=0; iimgs.length; i++ ) { lists[i].id=; /*将所有li的id