filelist.css

网页上经常会用到的树状结构源代码,模拟文件夹方式,采用ajax方式动态加载数据,避免一次性加载带来的数据量过大的效率问题.

@CHARSET "UTF-8";

/*FILELIST CSS START*/
.fileItemIcon{
  font-size:12px;width:72px;height:72px;
  cursor:default;margin:6px;text-decoration:none;
  position:relative;overflow:hidden;
  float:left;
}
.fileItemIcon img{display:block;position:relative;top:8px;left:20px;}
.fileItemIcon span{display:block;padding:3px;text-align:center;margin-top:8px;width:66px;word-break:break-all;}
.fileItemIconLabel{
  width:66px;height:auto;position:absolute;
  z-index:0;background-color:#e8e8e8;text-align:center;
  padding:3px;cursor:default;font-size:9pt;word-break:break-all;
}
.fileItemIconInput{font-size:9pt;border:1px solid black;overflow:hidden;text-align:center;padding:3px;}
.fileItemIconSelected{background-color:#e8e8e8;overflow:hidden;}
.fileItemIconSelected span{visibility:hidden;}
.fileItemIconSelected img{-moz-opacity:0.65;filter:Alpha(Opacity=65);}

.fileItemThumb{font-size:12px;float:left;width:106px;height:146px;*height:144px;cursor:default;margin:6px;text-decoration:none;position:relative;overflow:hidden;background-color:white;}
.fileItemThumb div{position:relative;left:2px;top:10px;border:1px solid #e8e8e8;height:100px;width:100px;text-align:center;margin:2px 0px 0px 0px;overflow:hidden;}
.fileItemThumb img{position:relative;top:34px;margin:2px 0px 2px 0px;vertical-align:middle;}
.fileItemThumb span{width:100px;padding:3px;display:block;overflow:hidden;text-align:center;margin-top:10px;word-break:break-all;}
.fileItemThumbSelected div{border:3px solid #bec1E2;margin:0px;text-align:center;height:96px;width:96px;}
.fileItemThumbSelected img{position:relative;top:34px;margin:2px 0px 2px 0px;vertical-align:middle;}
.fileItemThumbSelected span{top:10px;background-color:#e8e8e8;visibility:hidden;}
.fileItemThumbLabel{width:100px;position:absolute;z-index:0;background-color:#bec1E2;text-align:center;height:auto;padding:3px;cursor:default;font-size:9pt;margin-top:2px;}

.RED{color:#FF0000;}
.GRAY{color:gray;}
.SORTBY{background-color:#e8ffff;}

.fileItemDetail{width:100%;font-size:12px;overflow:hidden;margin:0px;}
.fileItemDetailHead{background-color:#EBEBE4;}
.fileItemDetailHead th {border:1px solid #818181;border-top-color:white;border-left-color:white;vertical-align:middle;padding:2px 3px;text-align:left;cursor:default;white-space:nowrap;}
.fileItemDetailContent td span {overflow:hidden;white-space:nowrap;padding:2px 3px;cursor:default;line-height:18px;}
.fileItemDetail .s1{overflow:hidden;}
.fileItemDetail .s1 nobr{float:left;padding:0 2px 0 2px;height:100%;cursor:default;}
.fileItemDetail .s2{width:80px;text-align:right;}
.fileItemDetail .s3{width:120px;}
.fileItemDetail .s4{width:160px;}
.fileItemDetail .s2 span {display:block;width:80px;}
.fileItemDetail .s4 span {display:block;width:120px;}
.fileItemDetail .s4 span {display:block;width:160px;}
/*.fileItemIcon.detailSelected span{visibility:visible;top:0px;left:0px;margin:0px;background-color:white;}*/
.fileItemDetail img{position:relative;left:0px;top:4px;margin-right:2px;height:16px;}
.fileItemDetailSelected .s1 nobr {background-color:#e8e8e8;padding:0 2px 0 2px;}
/*FILELIST CSS END*/