对明天的期待丶 于 2018-09-27 20:02:43 发布为了我们拥有更加扎实的前端基础，我建议大家仅将我的代码作为参考，自己练一练会更好，话不多说，下边是效果图跟代码：
效果：
QQZone.html:
<!DOCTYPE html>
<html>
<head>
<title>我的QQ空间</title>
<link type="text/css" rel="stylesheet" href="QQZone.css"/>
</head>
<body>
<div class="div_top">
<div class="top_menu">
<div class="top_1"></div>
<div class="top_2" style="margin-left:10px;">
<i style=" background-position: -452px -52px;"></i>
<span>个人中心</span>
</div>
<div class="top_2" style="width:101px;">
<i style=" background-position: -452px -104px;"></i>
<span>我的主页</span>
</div>
<div class="top_2" style="width:77px;">
<i style=" background-position: -452px -78px;"></i>
<span>好友</span>
</div>
<div class="top_2" style="width:77px;">
<i style=" background-position: -452px -130px;"></i>
<span>游戏</span>
</div>
<div class="top_2" style="width:77px;">
<i style=" background-position: -452px -156px;"></i>
<span>装扮</span>
</div>
<div class="music">
<div class="music_left">
<i style=" background-position: -452px -208px;margin:2px;"></i>
</div>
<div class="music_right">
<i></i>
</div>
</div>
<div class="div_input">
<input type="text" placeholder=" 用户/游戏/动态"/>
<i></i>
</div>
<div class="img_info">
<div class="imglogo">
<img style="width:24px;height:24px;border-radius: 2px;" src="images/30.jpg" alt="您的头像">
</div>
<div class="userinfo">
<span style="margin-left:0;">还有童心的成年人</span>
</div>
</div>
<div class="shareImg">
<i style=" background-position: -452px -286px;margin-top:13px;margin-left:10px;"></i>
</div>
<div class="shareImg">
<i style=" background-position: -452px -312px;margin-top:13px;margin-left:14px;"></i>
</div>
<div class="diamonds"></div>
</div>
</div>
<div class="bottom">
<div class="bottom_info">
<div class="user_bottom">
<div class="name">
<span>无奈丶看花落 悲</span>
</div>
</div>
<div class="fabulous">
<i style=" background-position: -451px 0;"></i>
<span class="num">1</span>
</div>
<div class="userImg">
<img style="width:120px;height:120px;border-radius: 2px;m
