悸动， 发表于 2016-11-30 11:21:59

H码头像表格Ⅲ

本帖最后由 他囚她城 于 2016-11-30 13:34 编辑 <br /><br /><style>
#ye{width: 1000px;height: 650px;margin:30px auto;overflow: hidden;}
#yebj {width: 1000px;height: 700px;position: absolute;overflow: hidden;}
#yebj img {width: 1000px;height: 700px;}
#yez{padding: 50px 90px;margin:0 auto;width: 800px;position: absolute;}
#yezuo{height: 600px;width: 500px;background: #131C3D;float: left;}
#yeyou{height: 600px;width: 300px;margin-left: 500px;}
#yeyou1{height: 600px;width: 200px;background: rgba(19, 28, 61, 0.90);float: left;}
#yeyou2{height: 600px;width: 100px;margin-left: 200px;background: rgba(19, 28, 61, 0.67);}
#yetx {height: 100px;width: 100px;margin: 30px auto;padding-top: 120px;}
#yetx img {
        height: 100px;width: 100px;
        -webkit-border-radius: 110px;
        border-radius: 110px;
        -webkit-transition: -webkit-transform 0.5s ease-out;
        -moz-transition: -moz-transform 0.5s ease-out;
        -o-transition: -o-transform 0.5s ease-out;
        -ms-transition: -ms-transform 0.5s ease-out;
opacity:1.0;
filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */
}
#yetx img:hover {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
opacity:0.6;
filter:alpha(opacity=60); /* 针对 IE8 以及更早的版本 */
}
#yewz{text-align: center;letter-spacing: 1px;}
#yewz a{color: #bbb;text-decoration:none;}
#yewz a:hover{color: #fff;transition:all 0.3s ease-in-out;}
#yewz1{letter-spacing: 1px;width: 160px;margin: 15px auto;line-height: 18px;color: #888;}
.younav{}
.younav ul {margin: 0; padding: 0; height: 600px; overflow: hidden;}
.younav li {margin: 0;list-style-type: none !important;height: 100px;width: 100px;text-align: center;border-bottom: 1px solid rgba(255, 255, 255, 0.05);}
.younav li:hover{background:rgba(255, 255, 255, 0.11);-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
.younav li a{text-decoration:none;color: #999;line-height: 100px;letter-spacing: 5px;}
.younav li a:hover{text-decoration:none;color: #999;color:#fff;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}
#zuoimg {}
#zuoimg ul{padding: 0;width: 400px;margin: 0 auto;}
#zuoimg li{width: 120px;height: 120px;float: left;margin: 5px;list-style-type: none !important;}
#zuoimg li img {width: 120px;height: 120px;opacity:1.0;filter:alpha(opacity=100);}
#zuoimg li img:hover{opacity:0.6;filter:alpha(opacity=60); }
#zuowz {text-align: center;padding: 20px 0;color:#bbb;}
</style>
<div id="ye">
<div id="yebj">http://attachment.qqmcc.net/attachment/album/201611/30/112513fgujo5wgjocoz2sy.jpg</div>
<div id="yez">
<div id="yezuo">
<div id="zuowz">-　精选头像　-</div>
<div id="zuoimg">
<ul>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
</ul>
</div>
</div>
<div id="yeyou">
<div id="yeyou1">
<div id="yetx">
http://attachment.qqmcc.net/attachment/album/201611/29/225903hjjbjccnvv7nnztb.jpg
</div>
<div id="yewz"><a href="">他囚她城 ( UID：10000 )</a></div>
<div id="yewz1">
想离开的人有千万种理由,想陪伴你的赶不走.
</div>

</div>
<div id="yeyou2">
<div class="younav">
<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>
</div>
</div>

</div>

悸动， 发表于 2016-11-30 12:40:48

本帖最后由 他囚她城 于 2016-11-30 12:42 编辑 <br /><br />
<div id="ye">
<div id="yebj">http://attachment.qqmcc.net/attachment/album/201611/30/120853u9qf5kcq34ozvepe.jpg</div>
<div id="yez">
<div id="yezuo">
<div id="zuowz">-　精选头像　-</div>
<div id="zuoimg">
<ul>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
</ul>
</div>
</div>
<div id="yeyou">
<div id="yeyou1">
<div id="yetx">
http://attachment.qqmcc.net/attachment/album/201611/29/225903hjjbjccnvv7nnztb.jpg
</div>
<div id="yewz"><a href="">他囚她城 ( UID：10000 )</a></div>
<div id="yewz1">
想离开的人有千万种理由,想陪伴你的赶不走.
</div>

</div>
<div id="yeyou2">
<div class="younav">
<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>
</div>
</div>

</div>

悸动， 发表于 2016-11-30 12:41:05


<div id="ye">
<div id="yebj">http://attachment.qqmcc.net/attachment/album/201611/30/121005jd2mkp5d25dkopk0.jpg</div>
<div id="yez">
<div id="yezuo">
<div id="zuowz">-　精选头像　-</div>
<div id="zuoimg">
<ul>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
<li>http://attachment.qqmcc.net/attachment/album/201611/29/152247vx1x19kmdxdhd7th.jpg</li>
</ul>
</div>
</div>
<div id="yeyou">
<div id="yeyou1">
<div id="yetx">
http://attachment.qqmcc.net/attachment/album/201611/29/225903hjjbjccnvv7nnztb.jpg
</div>
<div id="yewz"><a href="">他囚她城 ( UID：10000 )</a></div>
<div id="yewz1">
想离开的人有千万种理由,想陪伴你的赶不走.
</div>

</div>
<div id="yeyou2">
<div class="younav">
<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>
</div>
</div>

</div>

悸动， 发表于 2016-11-30 13:33:42

本帖最后由 他囚她城 于 2016-11-30 13:43 编辑

源码 ↓
**** Hidden Message *****

悸动， 发表于 2016-11-30 13:39:01

使用方法：

发帖前，勾选上 HTML代码 和 纯文本。

如图：


然后复制代码，换图片就行。


海滩七号 发表于 2016-11-30 16:34:04

感谢分享。

五月 发表于 2016-12-1 03:24:32

感谢分享


婪生 发表于 2016-12-1 13:15:26

你真酷！！！

于故 发表于 2016-12-2 19:15:05


感谢分享。

蝴蝶 发表于 2016-12-11 02:27:17



感谢分享。
页: [1] 2 3
查看完整版本: H码头像表格Ⅲ