悸动， 发表于 2017-1-4 18:28:00

粉色H码头像表格( 附代码 )

本帖最后由 悸动， 于 2017-1-4 18:53 编辑 <br /><br />注：源码在四楼，表格仅供QQMCC论坛用户使用，如有盗用，我也不能怎么样。
不过，想拥有独特个性的特效H码表格，可以找我定制啊。
<style>
a,.img img{    text-decoration: none;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#jdda{width: 100%;height: auto;background-color: #DCDCDC;padding: 80px 0; font-family: 宋体;font-size: 13px;}
#jd {width: 560px;margin: 0 auto;}
#jdtou {width: 100%;height: 40px;}
#jdlogo{float: left;width: 150px;}
#jdnav{float: right;height: auto;background-color: #fff;margin-top: 8px;}
#jdnav ul{margin: 0;}
#jdnav li{float: left;height: 30px;list-style: none;margin: 0;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#jdnav li:hover {background-color: #FF5F83;}
#jdnav li a {color: #FF5F83;font-size: 13px;line-height: 30px;margin: 0 10px;letter-spacing: 1px;    text-decoration: none;}
#jdnav li a:hover{color:#fff;}
#jdtx {background-color: #fff;width: 520px;height:2200px;margin-top: 30px;padding: 20px;}
#jdtx ul{width: 430px;margin: 0 auto;}
#jdtx li {width: 200px;height: 200px;float:left;margin:5px;list-style: none;}
#jdtx li img{width: 200px;height: 200px;opacity:1.0;filter:alpha(opacity=100);-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#jdtx li img:hover{opacity:0.4;filter:alpha(opacity=40);}
#jdtx li em { position: absolute;z-index: 99;background-color: rgba(0, 0, 0, 0.32); margin-top: 10px;margin-left: -200px;padding: 1px 10px; letter-spacing: 2px;color: #DCDCDC;}
#jdtxbt{border-left: 4px solid #FF5F83;height: 20px;line-height: 20px;padding: 0 10px;letter-spacing: 1px;margin: 0 20px 10px;color: #666;}
#jdfy {}
#jdfy ul{margin-top: 20px;float: left;}
#jdfy li{margin: 6px;line-height: 12px;float: left;padding: 6px;height: 12px;width: 12px;background-color: #ddd;list-style: none;text-align: center;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#jdfy li:hover{background-color:#FF5F83;color: #fff;}
#fy1{background-color:#FF5F83!important;color:#fff; }
</style>
<div id="jdda">
<div id="jd">
<div id="jdtou" class="a-fadeinT">
<div id="jdlogo" class="a-bounceinT">http://attachment.qqmcc.net/attachment/album/201701/04/182745bvffoh1lp33coyzn.png</div>
<div id="jdnav">
<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="http://www.qqmcc.net/?10000">留言</a></li>
</ul>
</div>
</div>
<div id="jdtx" class="a-fadeinB">
<div id="jdtxbt">精选头像</div>
<ul class="a-fadeinB">
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
<li>http://attachment.qqmcc.net/attachment/album/201612/01/092728olrt2x9kra9l3t3j.png<em>推荐</em></li>
</ul>
<div id="jdfy">
<ul>
<li id="fy1">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>》</li>
</ul>
</div>
</div>
<div style="text-align: center;line-height: 50px;letter-spacing: 1px;color: #666">Powered by nanxun</div>
</div>
</div>

悸动， 发表于 2017-1-4 18:29:08

本帖最后由 悸动， 于 2017-1-4 18:39 编辑 <br /><br /><style>
#nxda{width: 100%;height: 500px;}
#nxbox{width: 280px;height: 280px;border-top-left-radius: 8px;border-top-right-radius: 8px;margin:0 auto;background-color: #fff;color: #333;border-bottom: 5px solid #666;   position: absolute;margin-top: -350px;margin-left: 360px;font-family: 'Arial',Simsun;font-size: 13px;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#nxbox:hover{box-shadow: 0px 7px 16px 0px rgba(0, 0, 0, 0.35); }
#nxtx {width: 150px;height: 150px;overflow: hidden;margin-top:-80px;margin-left:60px;border-top-left-radius: 60px;border-bottom-right-radius: 60px;position: absolute;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#nxtx:hover{border-radius: 50%;}
#nxtx img {width: 150px;height: 150px;}
#nxwz {padding-top: 110px;margin-left: 60px;width: 200px;color: #555;}
#nxwz p{line-height: 20px;}
#nxwz a {text-decoration: none;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}
#nxwz a:hover {color: #FF5F83; font-size: 13px;}
#nxbj {}
#nxbj img {width:100%;height:500px;}
</style>
<div id="nxda">
<div id="nxbj">http://attachment.qqmcc.net/attachment/album/201701/04/183027d4z3l4sluy01styy.jpg</div>
<div id="nxbox">
<div id="nxtx">http://attachment.qqmcc.net/attachment/album/201611/29/225733c1ft2409f28jd294.jpg</div>
<div id="nxwz">
<p>NAME：难寻 / 130</p>
<p>QQ：779168686</p>
<p><a href="javascript:alert('　定制H码表格，请联系悸动 ，qq：1098816988.');">点击定制H码表格</a></p>
</br>
<p>想离开的人有千万种理由，想陪伴你的赶不走。</p>
</div>
</div>

</div>

凉心凉城凉少年 发表于 2017-1-4 18:31:59

腻害了

悸动， 发表于 2017-1-4 18:40:22

**** Hidden Message *****

甜der 发表于 2017-1-4 18:40:23

厉害了

悸动， 发表于 2017-1-4 18:52:19

没去 发表于 2017-1-4 18:50
难寻，可以的

必须的，我应该附上一句话，表格仅供QQMCC论坛用户使用。

Dilemma 发表于 2017-1-4 19:02:13

交个朋友吧

QQmcc-千惠 发表于 2017-1-4 19:34:22

滴滴 需要定制 ，请制定交易时间。

悸动， 发表于 2017-1-4 19:35:34

闹剧 发表于 2017-1-4 19:18
我知道 我是说 有点像美图网的风格 哈哈

topit.me{:1_125:}

迪恩 发表于 2017-1-6 02:37:16

厉害                                                               
页: [1] 2
查看完整版本: 粉色H码头像表格( 附代码 )