悸动， 发表于 2016-11-29 18:13:14

H码头像表格Ⅱ

本帖最后由 他囚她城 于 2016-11-30 09:55 编辑 <br /><br /><style>
#ta {

height:1000px;
width:auto;
padding: 100px;
background: #eee;
}
#tada {width:600px;height:850px;background:#fff;margin:0px auto;box-shadow: 9px 10px 13px 0px #AFAFAF;}
#datou {width:auto;height:80px;background:#00aaee;padding: 10px;}
#daimg {height:80px;width:80px;background:#fff;border-radius: 50%; float: left;}
#daimg img {height:80px;width:80px;
        -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;
}
#daimg img:hover {
        -webkit-transform: rotateZ(360deg);
        -moz-transform: rotateZ(360deg);
        -o-transform: rotateZ(360deg);
        -ms-transform: rotateZ(360deg);
        transform: rotateZ(360deg);
}
#dawz{ margin-top: 25px; float: right;}
#dawz li { float:left;color: #fff;margin: 10px; list-style:none; padding:0px;}
#dawz li a {color:#fff;list-style:none;text-decoration:none; }
#dawz li a:hover {
        color:#fff;
        padding-bottom: 10px;
        padding-top: 10px;
        border-bottom:1px solid #fff;
        border-top:1px solid #fff;
        transition: color 0.35s ease 0s;
        -moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;cursor:pointer
}
#taz{}
#taz ul {width: 90%;margin: 0px auto;}
#taz li { height: 125px;width: 125px;overflow: hidden; float: left;margin:5px;}
#taz li img { height: 125px;width: 125px;opacity:1.0;filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */}
#taz li img:hover {opacity:0.6;filter:alpha(opacity=60); /* 针对 IE8 以及更早的版本 */}
#tass {
    width: 98%;
    height: 30px;
    border: 0;
    background-color: #ddd;
    border-radius: 50px;
    margin: 10px 5px;
    text-align: center;
}
#tass:hover {
background-color: #f5f5f5;

-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;cursor:pointer
}
</style>
<div id="ta">
<div id="tada">
<div id="datou">
<div id="daimg">http://attachment.qqmcc.net/attachment/album/201611/29/213737im8bagm99cab0zfg.jpg</div>
<div id="dawz">
<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>
</div>
</div>
<div id="taz">
<div>
<form method="get" action="http://blog.iliyang.cn/">
<input type="text" id="tass" name="s" placeholder="搜一搜">
</form>
</div>
<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>
<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>

悸动， 发表于 2016-11-29 22:11:01

本帖最后由 他囚她城 于 2016-11-29 22:19 编辑 <br /><br /><style>
.yanse{background: #A71717!important;}
</style>
<div id="ta">
<div id="tada">
<div id="datou" class="yanse">
<div id="daimg">http://attachment.qqmcc.net/attachment/album/201611/29/213737im8bagm99cab0zfg.jpg</div>
<div id="dawz">
<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>
</div>
</div>
<div id="taz">
<div>
<form method="get" action="http://blog.iliyang.cn/">
<input type="text" id="tass" name="s" placeholder="搜一搜">
</form>
</div>
<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>
<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>

悸动， 发表于 2016-11-29 22:14:52

本帖最后由 他囚她城 于 2016-11-29 22:19 编辑 <br /><br /><style>
.yanse1{    background: #EE5800!important;}
</style>
<div id="ta">
<div id="tada">
<div id="datou" class="yanse1">
<div id="daimg">http://attachment.qqmcc.net/attachment/album/201611/29/213737im8bagm99cab0zfg.jpg</div>
<div id="dawz">
<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>
</div>
</div>
<div id="taz">
<div>
<form method="get" action="http://blog.iliyang.cn/">
<input type="text" id="tass" name="s" placeholder="搜一搜">
</form>
</div>
<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>
<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>

悸动， 发表于 2016-11-30 13:35:29

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

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

悸动， 发表于 2016-11-30 13:38:26

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

使用方法：

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

如图：


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


海滩七号 发表于 2016-11-30 16:20:53

感谢分享。

婪生 发表于 2016-12-1 13:14:21

我太喜欢这个了

于故 发表于 2016-12-2 19:12:44

分享又风险~

凉心凉城凉少年 发表于 2016-12-3 00:59:29

<style>
#ta {
height:1000px;
width:auto;
padding: 100px;
background: #eee;
}
#tada {width:600px;height:850px;background:#fff;margin:0px auto;box-shadow: 9px 10px 13px 0px #AFAFAF;}
#datou {width:auto;height:80px;background:#00aaee;padding: 10px;}
#daimg {height:80px;width:80px;background:#fff;border-radius: 50%; float: left;}
#daimg img {height:80px;width:80px;
      -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;
}
#daimg img:hover {
      -webkit-transform: rotateZ(360deg);
      -moz-transform: rotateZ(360deg);
      -o-transform: rotateZ(360deg);
      -ms-transform: rotateZ(360deg);
      transform: rotateZ(360deg);
}
#dawz{ margin-top: 25px; float: right;}
#dawz li { float:left;color: #fff;margin: 10px; list-style:none; padding:0px;}
#dawz li a {color:#fff;list-style:none;text-decoration:none; }
#dawz li a:hover {
      color:#fff;
      padding-bottom: 10px;
      padding-top: 10px;
      border-bottom:1px solid #fff;
         border-top:1px solid #fff;
      transition: color 0.35s ease 0s;
      -moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;cursor:pointer
}
#taz{}
#taz ul {width: 90%;margin: 0px auto;}
#taz li { height: 125px;width: 125px;overflow: hidden; float: left;margin:5px;}
#taz li img { height: 125px;width: 125px;opacity:1.0;filter:alpha(opacity=100); /* 针对 IE8 以及更早的版本 */}
#taz li img:hover {opacity:0.6;filter:alpha(opacity=60); /* 针对 IE8 以及更早的版本 */}
#tass {
    width: 98%;
    height: 30px;
    border: 0;
    background-color: #ddd;
    border-radius: 50px;
    margin: 10px 5px;
    text-align: center;
}
#tass:hover {
background-color: #f5f5f5;
-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;cursor:pointer
}
</style>
<div id="ta">
<div id="tada">
<div id="datou">
<div id="daimg">http://attachment.qqmcc.net/attachment/album/201611/29/213737im8bagm99cab0zfg.jpg</div>
<div id="dawz">
<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>
</div>
</div>
<div id="taz">
<div>
<form method="get" action="http://blog.iliyang.cn/">
<input type="text" id="tass" name="s" placeholder="搜一搜">
</form>
</div>
<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>
<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>

悸动， 发表于 2016-12-4 00:40:57

由不得认真 发表于 2016-12-4 00:32
很漂亮

谢谢。。。。
页: [1] 2
查看完整版本: H码头像表格Ⅱ