效果图:

演示代码
js+css完成网站的会员照片信息显示效果 *{ 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; }

• 明星网友
• 优秀圈主