自己做的，可能和原页面不同。
html代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>QQ</title> <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css"> <link rel="stylesheet" href="static/css/style.css"> </head> <body> <div class="header"> <div class="container"> <div class="left"><a href="" class="logo"></a> <a href="" class="home"><i class="fa fa-home"></i> 他的主页</a> <a href="" class="home"><i class="fa fa-user"></i> 他的动态</a> </div> <div class="right"> <a href="" class="return"><i class="fa fa-search"></i></a> <span>| </span> <a href="" class="return">返回个人中心</a> <span>| </span> <a href="" class="picture"><img src="static/imgs/userinfo.png" alt=""></a> <a href="" class="name">Applear[退出]</a> <a href="" class="return"><i class="fa fa-cog"></i></a> <a href="" class="return"><i class="fa fa-diamond"></i></a> </div> </div> </div> <div class="body"></div> <div class="footer"></div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
css代码：
实例
body {
margin: 0;
padding: 0;
}
.header {
height: 40px;
background-color: #d18b00;
line-height: 40px;
}
.body {
height: 100%;
background-color: blue;
}
.footer {
height: 100%;
background-color: red;
}
.header .left {
width: 400px;
height: 40px;
float: left;
margin-left: 40px; // background-color:red;
}
.header .logo {
background: url("/qq/static/imgs/icon.png");
background-position: 0 0;
width: 90px;
height: 40px;
float: left;
}
.header .left a {
float: left;
margin-left: 15px;
height: 40px;
color: white;
text-decoration: none;
}
.header .right {
width: 447px;
height: 40px;
float: right;
margin-right: 40px; // background-color:red;
}
.header .right a {
float: left;
margin-left: 25px;
height: 40px;
color: white;
text-decoration: none;
}
span {
float: left;
margin-left: 25px;
height: 40px;
color: #e69900;
}
.header .right img {
width: 25px;
height: 25px;
}
.header .name {
font-size: 0.8em;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
