收藏
批改狀態(tài)：未批改
老師批語：
<!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文件。務(wù)必在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> 個(gè)人中心</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>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號