php仿qq空间网页源码,516 仿QQ空间网页头部代码

实例

html>

Document

个人中心

我的主页

好友

游戏

装扮

                     

Kim_J

心靈深處

QAQ一拳一个嘤嘤怪~

赞|9999+

                

Kim.J

                    

成长值 6666  成长速度 66点/天

60% Complete (warning)

                    

                

30°

合肥

5月17日

• 主页
• 日志
• 相册
• 留言板
• 说说
• 个人档
• 音乐
• 更多

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS部分

实例

body{background: rgb(233,233,233);}

.header{width: 100%;height: 40px;background-color:rgb(31,31,31);line-height: 40px;position: fixed;}

.header .logo{background-image:url("/source/image/icon.png");background-position: 0px 0px;float: left;

width: 90px;

height: 40px;  }

.header.container{width: 100%;}

.header a {text-decoration: none;color: white;margin-left: 10px;}

.header .left{float: left;margin-left: -50px;width: 588px}

.header a i{margin-right: 8px;margin-left:2px;width: 15px;font-size: 12px;}

.header .right {float: right;}

.header .right a{float: right;}

.header .searchBox{float:right;margin-right: 10px;height: 20px;}

.header .right .searchBox input::-webkit-input-placeholder { color: white;}

.header .right .searchBox input:-moz-placeholder {color: white;}

.header .right .searchBox input::-moz-placeholder {color: white;}

.header .right .searchBox input:-ms-input-placeholder {color: white;}

.header .searchBox input{height: 20px;width:135px;background-color: rgb(87,87,87);border: none;color: white;}

.header .searchBox .search{position: absolute;margin-left:-20px }

.header .searchBox .icon-vip{float: right}

.header .right .userInfo{float: right;}

.header .right .music-player-container{float: left;padding: 0 0;}

.backgroundContainer{background-image: url("/source/image/top.jpg");width: 100%;height: 650px;padding:50px 0px 0px 0px;}

.backgroundContainer .userInfoShow{color: rgb(41,92,157);}

.backgroundContainer .userInfoShow .QLevel{background-image: url("/source/image/icon3.png");display: inline-block;width:16px;background-repeat: no-repeat;height: 16px;position: relative;background-position: -36px 0px;margin-top: 37px;margin-left: 5px;}

.backgroundContainer .userInfoShow .PhoneLevel{background-image: url("/source/image/icon.png");display: inline-block;width:34px;background-repeat: no-repeat;height: 22px;position: relative;background-position: -204px -76px;margin-top: 37px;margin-left: 5px;}

.backgroundContainer .userInfoShow .userSign{position: absolute}

.backgroundContainer .support{float: right}

.backgroundContainer .support a{margin: 0px 10px;border: solid 1px #cdcdcd;border-radius: 30px;color: #ffffff;background-color:rgba(0,0,0,.4);padding: 10px;opacity: 0.6}

.backgroundContainer .support i{margin: 0px 10px;}

.backgroundContainer .userQZoneInfo{margin-top: 70px;}

.backgroundContainer .userQZoneInfo .userQZonePic{width: 126px;height: 126px;float: left;border: 4px solid white;border-radius: 2px;}

.backgroundContainer .userQZoneInfo .userNickName{color: rgb(41,92,157);font-size: 24px;margin-left: 20px;float: left}

.backgroundContainer .userQZoneInfo .years-vip  {float: left;margin-left:-60px;margin-top:40px;font-size: 12px;color: rgb(41,92,157);width: 400px;}

.backgroundContainer .userQZoneInfo .years-vip img  {float: left;margin-top:10px;margin-right: 20px;}

.backgroundContainer .userQZoneInfo .years-vip .progress{height: 12px;margin-bottom: 0px;width: 260px;position: absolute;margin-top: 15px;margin-left: 70px;}

.backgroundContainer .weather{float: right;width: 200px;height: 56px;}

.backgroundContainer .weather img{vertical-align: baseline}

.backgroundContainer .weather .temperature{position: absolute;font-size: 30px;}

.backgroundContainer .list{float: left;margin-top: 110px;margin-left: -400px;}

.backgroundContainer .list ul{list-style: none;padding-left: 0px;}

.backgroundContainer .list ul li{display: inline;margin: 10px 10px ;font-size: 18px}

运行实例 »

点击 "运行实例" 按钮查看在线实例