实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿QQ空间</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
body{
background: #e9e9e9;
}
.nav-header{
background-color: #400929;
height: 41px;
}
.nav-qq{
color: #ffffff;
float: left;
width: 90px;
height: 41px;
background-image: url(https://qzonestyle.gtimg.cn/aoi/sprite/profile-v9.32-adg171017190457.png);
background-position: 0 0;
}
.nav-color{
color: #eba7cd;
width: 91px;
height: 41px;
line-height: 44px;
text-align: center;
cursor: pointer;
}
.col-md-6 .nav-color:nth-child(1):hover {
background-color: #400929;
color: #eba7cd;
cursor: pointer;
}
.col-md-6 .nav-color:hover{
background: #FFFFFF;
color: #000000;
}
.nav-header ul li{
display:inline-block;
}
.nav-img{
float: left;
width: 27px;
height: 41px;
background-image: url(https://qzonestyle.gtimg.cn/aoi/sprite/profile-v9.32-adg171017190457.png);
background-position: 0 0;
}
.background-container {
height: 1000px;
background-repeat: no-repeat;
background-position: center top;
background-attachment: scroll;
background-image: url(//i.gtimg.cn/qzone/space_item/orig/3/72019_top.jpg);
}
</style>
<div class="nav-header">
<div class="container">
<div class="row">
<div class="col-md-1">
<a href="#空间" class="nav-qq "></a>
</div>
<div class="col-md-6">
<ul class="nav">
<li class="nav-color ">
<i class="glyphicon glyphicon-user"></i><span> 个人中心</span></a>
</li>
<li class="nav-color ">
<i class="glyphicon glyphicon-user"></i><span> 我的主页</span></a>
</li>
<li class="nav-color ">
<i class="glyphicon glyphicon-user"></i><span> 好友</span></a>
</li>
<li class="nav-color ">
<i class="glyphicon glyphicon-user"></i><span> 游戏</span></a>
</li>
<li class="nav-color ">
<i class="glyphicon glyphicon-user"></i><span> 装扮</span></a>
</li>
</ul>
</div>
<div class="col-md-5">
<ul class="nav">
<li class="nav-color ">
<i class="glyphicon glyphicon-music"></i>
<i class=" glyphicon glyphicon-film"></i>
</li>
<li class="nav-color ">
<input type="text" class="form-control">
</li>
<li class="nav-color ">
<i class="nav-img"></i><span> 五趾的鱼</span></a>
</li>
<li class="nav-color ">
<i class="glyphicon glyphicon-log-out"></i>
<i class="glyphicon glyphicon-cog"></i>
<i class="glyphicon glyphicon-star"></i>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="body background-container">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
