QQ空间前端header部分，实战还是挺锻炼人的，花了不少时间去排错
index.html
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" type="text/css" href="/static/css/index.css"> <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css"> <title>繁华落尽的空间</title> </head> <body> <div class="header"> <div class="container"> <div class="left"> <a href="" class="logo"></a> <a><i class="fa fa-home"></i>他的主页</a> <a><i class="fa fa-user"></i>他的动态</a> </div> <div class="right"> <div class="user-info"> <img src="/static/imgs/userinfo.png"> <a href=""><i class="fa fa-diamond" style="font-size: 14px;"></i></a> <a href=""><i class="fa fa-cog" style="font-size: 14px;"></i></a> <a href="" style="font-size: 12px;">Appler [退出]</a> </div> <!-- top down 0,left right 10 --> <span style="margin:0px 10px;">|</span> <a href="">返回个人中心</a> <span>|</span> <div class="searchbox"> <input type="text" name="" placeholder="用户/游戏/动态"> <a href="" class="search"><i class="fa fa-search"></i></a> </div> </div> </div> <div class="backgroud-container"> <div class="container"> <div class="userinfo"> <h1><span>繁华落尽</span></h1> <a href="" class="lv"></a> <a href="" class="fly"></a> <div class="addr">繁华落尽http://88527.qzone.qq.com</div> </div> <div class="profile"> <a href=""><i class="fa fa-plus"></i>加好友</a> <a href=""><i class="fa fa-thumbs-up"></i></i>赞 | 0</a> </div> <div class="user-detail"> <img src="/static/imgs/userinfo.png" alt="" class="avatar"> <div class="nickname">猪哥@php.cn</div> <div class="vip-year"> <img src="/static/imgs/vip_year_8.png" alt=""> <span>成长值 3600 成长速度 30点/天</span> <div class="progress"> <div class="progress-bar progress-bar-waring" role="progressbar" style="width:60%;"></div> </div> <a href=""><img src="/static/imgs/icon-vip-fee-year.png" alt=""></a> <a href="" class="level"></a> </div> <div class="weather"> <img src="http://qzonestyle.gtimg.cn/aoi/img/weather/weather-cloudy-sunny.png" alt=""> <span class="temperature">30°</span> <div style="float:right;font-size:18px;"> <span>合肥</span> <br > <span style="font-size:12px;">4月24日</span> </div> </div> <div class="nav"> <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> <li><a href="">更多</a></li> </ul> </div> </div> </div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
index.css
实例
body {margin: 0;padding: 0;}
.header {
width: 100%;
height: 40px;
background-color: wheat;
line-height: 40px;
}
.header .left {
width: 400px;
float: left;
background: lightgreen;
}
.header a {
color: green;
text-decoration: none;
}
.header .logo {
background-image: url('/static/imgs/icon.png');
background-position: 0px 0px;
float: left;
width: 90px;
height: 40px;
}
.header a {
margin-left: 10px;
}
.header a i {
width: 20px;
height: 16px;
margin-left: 10px;
font-size: 18px;
}
.header .right {
float: right;
background-color: wheat;
}
.header .right a{
float: right;
}
.header .right span {
float: right;
line-height: 40px;
}
.header .right .searchbox {
float: right;
margin-right: 10px;
}
.header .right .searchbox input {
width: 135px;
height: 20px;
font-size: 12px;
padding: 5px;
border: none;
border-radius: 4px;
background-color: orange;
}
.header .right .searchbox .search {
position: absolute;
top: 0px;
margin-left: 148px;
}
.header .right .searchbox .search i{
font-size: 14px;
margin-left: -30px;
}
.header .right .user-info {float: right;}
.header .right .user-info img{width:24px;height: 24px;}
.backgroud-container {
background-image: url('/static/imgs/top.jpg')
}
.backgroud-container .userinfo h1{
float: left;
}
.backgroud-container .addr{
position: absolute;
}
.backgroud-container .lv{
background-image: url('/static/imgs/icon3.png');
display: inline-block;
width: 16px;
height: 16px;
background-repeat: no-repeat;
position: relative;
background-position: -36px 0px;
margin-top: 37px;
margin-left: 5px;
}
.backgroud-container .fly{
background-image: url('/static/imgs/icon.png');
display: inline-block;
width: 34px;
height: 22px;
background-repeat: no-repeat;
position: relative;
background-position: -204px -76px;
margin-top: 37px;
margin-left: 5px;
}
.backgroud-container .profile {
float: right;
}
.backgroud-container .profile a{
margin: 0px 10px;
border: solid 1px red;
border-radius: 30px;
padding: 10px;
}
.backgroud-container .profile i{margin: 0px 10px;}
.backgroud-container .user-detail {margin-top: 80px;}
.backgroud-container .user-detail .avatar {
width: 128px;
float: left;
border: solid 3px #fff;
border-radius: 4px;
}
.backgroud-container .user-detail .nickname {
float: left;
margin-left: 20px;
color: orange;
font-size: 20px;
width: 50%;
}
.backgroud-container .vip-year {
float: left;
margin-left: 20px;
margin-top: 10px;
width: 50%;
font-size: 12px;
}
.backgroud-container .vip-year img {
margin-right: 10px;
}
.backgroud-container .vip-year a {
margin-left: 10px;
}
.backgroud-container .vip-year .progress {
height: 8px;
margin-bottom: 0px;
width: 160px;
position: absolute;
margin-top: -12px;
margin-left: 75px;
}
.backgroud-container .vip-year .level {
background-image: url('/static/imgs/profile-v9-adg.png');
background-position: -1374px -49px;
width: 22px;
height: 20px;
display: inline-block;
background-repeat: no-repeat;
}
.backgroud-container .user-detail .weather {
float: right;
width: 162px;
height: 56px;
}
.backgroud-container img {
vertical-align: baseline;
}
.backgroud-container .temperature {
font-size: 40px;
position: absolute;
}
.backgroud-container .user-detail .nav {
float: left;
width: 80%;
margin-left: 20px;
margin-top: 25px;
}
.backgroud-container .user-detail .nav ul {
list-style: none;
padding-left: 0;
}
.backgroud-container .user-detail .nav ul li {
display: inline;
margin: 10px 10px;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
