头像模板 March 9th
本帖最后由 算命 于 2017-3-9 18:59 编辑 <br /><br /><style type="text/css">#qiao{width:100%;height:700px;margin:30px auto;overflow:hidden;background:url("http://www.qqmcc.net/data/attachment/album/201703/09/183303uqfp10cf6dspczxl.jpg");background-size:cover;font-family:Georgia}
#qiao_a_left{float:left;height:650px;overflow:hidden;margin-top:25px}
#qiao_a_left{width:300px;border-right-style:solid;border-right-color:#c7c1c1;border-right-width:1px;margin-left:50px;background:0 0}
#left_title span{font-size:80px;color:#fff}
#left_body{margin:-30px 0 0 130px;font-family:"微软雅黑";font-weight:300;color:#c7c1c1;font-size:18px}
#left_foot{width:210px;height:150px;margin:30px 0 5px 90px;border-top-style:solid;border-top-color:#c7c1c1;text-align:center;border-top-width:1px}
#left_foot img{width:100px;height:100px;margin:25px 90px 0 0;border-radius:50%}
#left_all{width:300px;height:230px;margin:50px 0 0 0;overflow:hidden;border-bottom-style:solid;border-bottom-color:#c7c1c1;border-bottom-width:1px}
#left_wirte{width:100px;height:30px;margin:10px auto;padding:4px;font-family:"mv boli";color:#c7c1c1}
#qiao_a_left button{width:120px;height:30px;line-height:20px;font-family:"mv boli";font-size:18px;color:#c7c1c1;background:0 0;border:solid 1px #c7c1c1;margin:15px 0 0 90px}
#qiao_a_right{float:left;height:650px;margin:25px 0 0 0;overflow:hidden;width:550px}
#right_title{width:480px;height:50px;overflow:hidden;border-bottom-style:solid;border-bottom-color:#c7c1c1;border-bottom-width:1px}
#right_title ul{float:left;width:480px;overflow:hidden}
#right_title ul li{float:left;list-style:none;display:inline;width:90px;height:50px;text-align:center;padding:2px}
#right_title ul li a{text-decoration:none;color:#c7c1c1;line-height:50px;font-family:"mv boli"}
#right_body{width:430px;height:500px;margin:17px 0 0 80px}
#right_body img{width:90px;height:90px;float:left;margin:6px}
#right_foot{margin:25px 0 0 0;color:#c7c1c1;border-top-style:solid;border-top-color:#c7c1c1;text-align:right;border-top-width:1px;height:30px;line-height:30px}
.hvr-underline-from-right{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;overflow:hidden}
.hvr-underline-from-right:before{content:"";position:absolute;z-index:-1;left:100%;right:0;bottom:0;background:#c7c1c1;height:1px;-webkit-transition-property:left;transition-property:left;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.hvr-underline-from-right:active:before,.hvr-underline-from-right:focus:before,.hvr-underline-from-right:hover:before{left:0}
.hvr-overline-from-center{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;overflow:hidden}
.hvr-overline-from-center:before{content:"";position:absolute;z-index:-1;left:50%;right:50%;top:0;background:#c7c1c1;height:1px;-webkit-transition-property:left,right;transition-property:left,right;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.hvr-overline-from-center:active:before,.hvr-overline-from-center:focus:before,.hvr-overline-from-center:hover:before{left:0;right:0}
.hvr-sweep-to-left{display:inline-block;vertical-align:middle;-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);box-shadow:0 0 1px transparent;position:relative;-webkit-transition-property:color;transition-property:color;-webkit-transition-duration:.3s;transition-duration:.3s}
.hvr-sweep-to-left:before{content:"";position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;background:#d4ffbf;-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transition-property:transform;transition-property:transform;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-out;transition-timing-function:ease-out}
.hvr-sweep-to-left:active,.hvr-sweep-to-left:focus,.hvr-sweep-to-left:hover{color:#fff}
}
</style>
</head>
<body>
<div id="qiao">
<div id="qiao_a_left">
<div id="left_title">
<span>MQ</span>
</div>
<div id="left_body">
<span>我不是嘉宾任你挑选</span>
</div>
<div id="left_foot" class="hvr-underline-from-right">
http://www.qqmcc.net/data/attachment/album/201703/06/182338d99gpjj6mehjt5p0.jpeg
</div>
<div id="left_all" class="hvr-overline-from-center">
<div id="left_wirte" >
<span>> Did not go</span>
<span> Leaving the mother are sold <</span>
</div>
</div>
<button class="hvr-sweep-to-left">send</button>
</div>
<div id="qiao_a_right">
<div id="right_title">
<ul>
<li class="hvr-overline-from-center"><a href="http://www.qqmcc.net/home.php?mod=space&uid=1996" target="_blank">首页 / Home</a></li>
<li class="hvr-overline-from-center"><a href="http://www.qqmcc.net/home.php?mod=space&uid=1996&do=album&view=me&from=space" target="_blank">相册 / Album</a></li>
<li class="hvr-overline-from-center"><a href="http://www.qqmcc.net/home.php?mod=space&uid=1996&do=wall" target="_blank">留言 / Message</a></li>
<li class="hvr-overline-from-center"><a onclick="alert("QQ:508170051")">定制 / Call</a></li>
</ul>
</div>
<div id="right_body">
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
<img src="../img/长图/1d.jpg" /><img src="../img/长图/1d.jpg" />
</div>
<div id="right_foot">
<span>路越来越宽,我们越来越分不清悲欢</span>
</div>
</div>
</div>
</body>
</html>
#使用请注明出名 **** Hidden Message ***** 666 感谢大兄弟分享 这个不错 http://www.qqmcc.net//mobcent//app/data/phiz/default/28.pnghttp://www.qqmcc.net//mobcent//app/data/phiz/default/28.pnghttp://www.qqmcc.net//mobcent//app/data/phiz/default/28.png加油支持你,
我爹棒棒哒~
感谢分享~ 不错不错, 感谢分享 辛苦了
页:
[1]
2