H码简约灰头像表格，( 附代码 )

悸动， 发表于 2017-1-5 15:51:02

本帖最后由悸动，于 2017-1-5 16:17 编辑 <br /><br />注：源码在四楼，表格仅供QQMCC论坛用户使用，如有盗用，我也不能怎么样。不过，想拥有独特个性的特效H码表格，可以找我定制啊。

<style type="text/css">

a,.img img{-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#jdda{width: 100%;height: 600px;}
#jdimg {width: 100%;height: 600px;}
#jdimg img {width: 100%;height: 600px;}
#jd {width: 780px;height: 400px;background: #fff;margin:100px;position: absolute; box-shadow: 0 20px 10px 0px rgba(0, 0, 0, 0.23);overflow-y:hidden}
#jdnav{width: 100px;height: 100%;background: #555;float: left;margin-right: 20px;}
#jdnav ul { margin: 0;}
#jdnav li {width: 100px;height:35px;overflow: hidden;margin: 0;list-style: none;text-align: center;line-height: 35px;-webkit-transition:all .8s ease;-moz-transition:all .8s ease;-o-transition:all .8s ease;transition:all .8s ease}
#jdnav li:hover{background: rgba(255, 255, 255, 0.28);}
#jdnav li a {color: #fff; text-decoration: none;}
#jdnav li a:hover{}
#jdtx {}
#jdtx ul {padding: 20px;margin-top:20px;height: 200px;width: 1550px;}
#jdtx li {width: 140px;height: 140px;float: left;margin:3px;list-style: none;}
#jdtx li img {width: 140px;height: 140px;opacity:1.0;filter:alpha(opacity=100);-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
#jdtx li img:hover{opacity:0.4;filter:alpha(opacity=40);}
#jdtx li:hover{}
#jdtx li a {}
#jdtx li a:hover{}
</style>
<div id="jdda">

<div id="jd">
<div id="jdnav">
<div style="width: 60px;margin: 0 auto;padding: 20px 0;">http://attachment.qqmcc.net/attachment/album/201612/06/164916thjha9uxji9ij9jh.png</div>
<ul>
<li><a href="">首页</a></li>
<li><a href="">头像</a></li>
<li><a href="">个签</a></li>
<li><a href="">网名</a></li>
<li><a href="">好友</a></li>
<li><a href="">留言</a></li>
</ul>
</div>
<div id="jdtx">
<ul>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png</li>
</ul>
</div>
</div>
<div id="jdimg">http://attachment.qqmcc.net/attachment/album/201701/05/151013yluo1jt6snz8z8tx.jpg</div>

</div>

悸动， 发表于 2017-1-5 15:58:09

**** Hidden Message *****

悸动， 发表于 2017-1-5 16:13:00

没去发表于 2017-1-5 16:12
我觉得还是长点的好看

懒得做了，做点简单的凑数。。

QQmcc-没来 发表于 2017-1-5 16:19:08

写的真好我们家大大再跟你聊天 {:1_92:}

凉心凉城凉少年 发表于 2017-1-5 16:45:34

牛逼

别等风离开 发表于 2017-1-6 19:55:23

借用一下下

迪恩发表于 2017-1-6 21:48:58

码简约灰头像表格

望舒发表于 2017-1-19 18:34:01

弱弱的问下，PW论坛有没有这种效果{:1_99:}

QQmcc-凝雪 发表于 2017-5-8 03:08:01

感谢分享

QQmcc-末希 发表于 2017-9-7 09:45:49

看隐藏。

页: [1] 2

QQMCC论坛's Archiver

H码简约灰头像表格，( 附代码 )