js+css完成网站的会员照片信息显示效果

js+css完成网站的经典效果，一般用于会员排行榜中，会员信息的介绍，包括照片等。

效果图:

演示代码
<title>js+css完成网站的会员照片信息<a href="https://kunjuke.com/tag/107631/" title="显示效果" target="_blank">显示效果</a> </title> *{ margin: 0; padding: 0; } body { font-size:12px; font-family:"宋体",Arial, Helvetica, sans-serif; color:#666666; } .door_container { width:200px; } .door_container .TabTitle { height:36px; } .door_container .TabTitle li { list-style:none; float:left; width:77px; height:36px; cursor:pointer; padding-left:2px; line-height:28px; color:#7c7c7c; font-size:14px; text-align:center; font-weight:bold; } .door_container .TabTitle .active { color:#000; background:#CC9999; } .door_container .TabTitle .normal { color:#7c7c7c; } .door_container .TabContent { width:198px; } .none { display: none; } .star{ width:198px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .star dl{ width:198px; margin:5px 0; float:left; } .star dl dd{ float:left; margin-left:8px; line-height:18px; } .star dl dt{ float:left; } .bg{ width:198px; margin:5px 0; background:#CCC; float:left; } .sl01{ background:#CCCCCC; margin:15px 5px 0 0; width:25px; height:18px; padding-top:7px; text-align:center; font-weight:bold; color:#FF0000; } .sl02 img{ border:1px solid #999999; padding:3px; } .sl03 a{ color:#0066CC; text-decoration:underline; } .sl03 a:hover{ color:#FF3300; text-decoration:none; } .sl04{ background:#CCCCCC; } .sl05{ } .bg .sl01{ background:#996600; margin:5px 5px 0 0; width:25px; height:18px; padding-top:7px; text-align:center; font-weight:bold; color:#FF0000; } .bg .sl02 img{ display:none; } .bg .sl03{ width:140px; } .bg .sl04{ background:#CCCCCC; width:140px; } .bg .sl05{ display:none; } </p> <ul id="myTab"> <li class="active">明星网友</li> <li class="normal">优秀圈主</li> </ul> <dl id="a1"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="a2"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="a3"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="a4"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="a5"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="a6"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="a7"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="a8"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="a9"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="a10"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl id="b1"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="b2"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="b3"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="b4"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="b5"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="b6"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="b7"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="b8"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="b9"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <dl class="bg" id="b10"> <dt class="sl01">01</dt> <dt class="sl02"></dt> <dd class="sl03">水样年华</dd> <dd class="sl04">25岁・湖北 武汉</dd> <dd class="sl05">人气:1243178</dd> </dl> <p>
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

以上就是js+css完成网站的会员照片信息显示效果的详细内容，更多请关注本站其它相关文章！