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

效果图:

演示代码
</p> <p><title>js+css完成网站的<a href="https://www.kunjuke.com/tag/4712/" title="会员" target="_blank">会员</a>照片信息显示效果 </title> </p> <p>*{<br /> margin: 0;<br /> padding: 0;<br /> }<br /> body {<br /> font-size:12px;<br /> font-family:"宋体",Arial, Helvetica, sans-serif;<br /> color:#666666;<br /> }<br /> .door_container {<br /> width:200px;<br /> }<br /> .door_container .TabTitle {<br /> height:36px;<br /> }<br /> .door_container .TabTitle li {<br /> list-style:none;<br /> float:left;<br /> width:77px;<br /> height:36px;<br /> cursor:pointer;<br /> padding-left:2px;<br /> line-height:28px;<br /> color:#7c7c7c;<br /> font-size:14px;<br /> text-align:center;<br /> font-weight:bold;<br /> }<br /> .door_container .TabTitle .active {<br /> color:#000;<br /> background:#CC9999;<br /> }<br /> .door_container .TabTitle .normal {<br /> color:#7c7c7c;<br /> }<br /> .door_container .TabContent {<br /> width:198px;<br /> }<br /> .none {<br /> display: none;<br /> }<br /> .star{<br /> width:198px;<br /> overflow:hidden;<br /> white-space:nowrap;<br /> text-overflow:ellipsis;<br /> }<br /> .star dl{<br /> width:198px;<br /> margin:5px 0;<br /> float:left;<br /> }<br /> .star dl dd{<br /> float:left;<br /> margin-left:8px;<br /> line-height:18px;<br /> }<br /> .star dl dt{<br /> float:left;<br /> }<br /> .bg{<br /> width:198px;<br /> margin:5px 0;<br /> background:#CCC;<br /> float:left;<br /> }<br /> .sl01{<br /> background:#CCCCCC;<br /> margin:15px 5px 0 0;<br /> width:25px;<br /> height:18px;<br /> padding-top:7px;<br /> text-align:center;<br /> font-weight:bold;<br /> color:#FF0000;<br /> }<br /> .sl02 img{<br /> border:1px solid #999999;<br /> padding:3px;<br /> }<br /> .sl03 a{<br /> color:#0066CC;<br /> text-decoration:underline;<br /> }<br /> .sl03 a:hover{<br /> color:#FF3300;<br /> text-decoration:none;<br /> }<br /> .sl04{<br /> background:#CCCCCC;<br /> }<br /> .sl05{<br /> }<br /> .bg .sl01{<br /> background:#996600;<br /> margin:5px 5px 0 0;<br /> width:25px;<br /> height:18px;<br /> padding-top:7px;<br /> text-align:center;<br /> font-weight:bold;<br /> color:#FF0000;<br /> }<br /> .bg .sl02 img{<br /> display:none;<br /> }<br /> .bg .sl03{<br /> width:140px;<br /> }<br /> .bg .sl04{<br /> background:#CCCCCC;<br /> width:140px;<br /> }<br /> .bg .sl05{<br /> display:none;<br /> } </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实现瀑布流展现照片(自动适应窗口大小)
• js+jquery实现图片裁剪功能
• nodejs实现的一个简单聊天室功能分享
• js实现文章文字大小字号功能完整实例
• js实现ArrayList功能附实例代码
• js实现select跳转功能代码
• 浅析Node.js查找字符串功能
• jQuery内置的AJAX功能和JSON的使用实例
• js实现照片墙功能实例