为了我们拥有更加扎实的前端基础,我建议大家仅将我的代码作为参考,自己练一练会更好,话不多说,下边是效果图跟代码:

效果:



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;margin:4px;"
src="images/100.jpg" alt="您的头像"> </div> <div class="userImg_right"> <div
class="userImg_right_top"> <span style="margin-left:0;">还有童心的成年人</span> </div>
<div class="userImg_right_down"> <div class="userImg_right_down_1"> <img
width=40 height=40 src="images/8.png"/> </div> <div></div> <div></div>
<div></div> </div> </div> <div class="info_menu"> <div class="menu_1"
style="margin-left:150px;"> 主页 </div> <div class="menu_1"> 日志 </div> <div
class="menu_1"> 相册 </div> <div class="menu_1" style="width:72px;"> 留言板 </div>
<div class="menu_1"> 说说 </div> <div class="menu_1" style="width:72px;"> 个人档
</div> <div class="menu_1"> 音乐 </div> <div class="menu_1"> 更多 </div> </div>
</div> <div class="bottom_block"> <div class="bottom_left"> <div
class="bottom_left_1"> <div class="bottom_left_1_list"> <i
style="background-position: -478px -312px;"></i> <div
class="bottom_left_1_list_text" style="font-weight: bold;"> <a>好友动态</a> </div>
</div> <div class="bottom_left_1_list"> <i style="background-position: -166px
-52px;"></i> <div class="bottom_left_1_list_text"> <a>特别关心</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position: -192px
-104px;"></i> <div class="bottom_left_1_list_text"> <a>与我相关</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position: -530px
-130px;"></i> <div class="bottom_left_1_list_text"> <a>空间达人</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position: -348px
-312px;"></i> <div class="bottom_left_1_list_text"> <a>那年今日</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position: -530px
-182px;"></i> <div class="bottom_left_1_list_text"> <a>腾讯课堂</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position: -504px
-234px;"></i> <div class="bottom_left_1_list_text"> <a>游戏应用</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position:-530px 0;"></i>
<div class="bottom_left_1_list_text"> <a>我的收藏</a> </div> </div> </div> <div
class="bottom_left_1" style="margin-top:20px;"> <div
class="bottom_left_1_list"> <i style="background-position: -478px -312px;"></i>
<div class="bottom_left_1_list_text" style="font-weight: bold;"> <a>好友动态</a>
</div> </div> <div class="bottom_left_1_list"> <i style="background-position:
-166px -52px;"></i> <div class="bottom_left_1_list_text"> <a>特别关心</a> </div>
</div> <div class="bottom_left_1_list"> <i style="background-position: -192px
-104px;"></i> <div class="bottom_left_1_list_text"> <a>与我相关</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position: -530px
-130px;"></i> <div class="bottom_left_1_list_text"> <a>空间达人</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position: -348px
-312px;"></i> <div class="bottom_left_1_list_text"> <a>那年今日</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position: -530px
-182px;"></i> <div class="bottom_left_1_list_text"> <a>腾讯课堂</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position: -504px
-234px;"></i> <div class="bottom_left_1_list_text"> <a>游戏应用</a> </div> </div>
<div class="bottom_left_1_list"> <i style="background-position:-530px 0;"></i>
<div class="bottom_left_1_list_text"> <a>我的收藏</a> </div> </div> </div> </div>
<div class="bottom_middle"> <div class="bottom_middle_top"> <div
class="bottom_middle_top_input"> <a style="line-height:30px;margin-left:9px;">
说点儿什么吧</a> </div> <div class="camera"> <i style="background-position: -192px
-260px;"></i> </div> <div class="camera" style="margin-left:0px;"> <i
style="background-position:-192px -312px;"></i> </div> </div> <div
class="bottom_middle_2"> <div class="bottom_middle_2_1"> <a
style="line-height:30px;margin-left:9px;">全部动态</a> </div> <div
class="bottom_middle_2_2"> <i style="background-position:-192px -52px;"></i>
</div> <div class="bottom_middle_2_3"> <i style="background-position:-608px
0;margin-top:11px;"></i> </div> <div class="bottom_middle_2_4"> <i
style="background-position:-608px -52px;margin-top:11px;"></i> </div> </div>
<div class="context" style="margin-top:0;"> </div> <div class="context"> </div>
</div> <div class="bottom_right"></div> </div> </div> </body> </html>
QQZone.css: 
body{ margin:0; background-image:url(images/bg.jpg); background-repeat:
repeat; } .div_top{ width:100%; height:40px; background-color:#221d3b; margin:0
auto; position:fixed; z-index:100; } .top_menu{ width:1046px; height:40px;
margin:0 auto; line-height: 39px; color:#aca3cc; } .top_1{ width:92px;
height:41px; background-image: url(images/4.png); background-size: 575px 41px;
background-position: 0 0; overflow: hidden; line-height: 123px;
background-repeat:no-repeat; float:left; } .top_2{ width:91px; height:41px;
float:left; } .top_menu span{ font-size:12px; cursor: pointer;
margin-left:31px; } .top_menu i{ width: 16px; height: 16px; position: absolute;
margin-left: 8px; margin-top: 13px; background-image: url(images/1.png);
background-size: 632px 388px; } .music{ height: 40px; width: 67px; float:left;
margin-left: 126px; } .music_left{ height: 20px; width: 22px;
background-color:#362e5c; float:left; margin-top:11px; cursor: pointer; }
.music_right{ height: 20px; width: 27px; background-color:#362e5c; float:left;
margin-left:1px; margin-top:11px; cursor: pointer; } .music_right i{
background-image: url(images/2.gif); background-size: 15px 10px;
background-repeat:no-repeat; margin:5px; } .div_input{ width:142px;
height:40px; float:left; } .div_input input{ border-radius: 2px; height: 18px;
width:135px; border: none; background-color: rgba(255,255,255,.25); font-size:
12px; color:#aca3cc; } .div_input i{ background-position: -452px -364px;
margin-top:13px; margin-left:-20px; cursor: pointer; } .img_info{ height: 40px;
width: 95px; float:left; cursor: pointer; } .imglogo{ height: 24px; width:
32px; float:left; margin-left: 6px; margin-top: 7px; cursor: pointer; }
.shareImg{ width:26px; height:41px; float:left; cursor: pointer; } .diamonds{
width:26px; height:29px; float:left; background-repeat:no-repeat;
background-image: url(images/3.gif); background-size: 22px 19px; margin-top:
12px; margin-left: 13px; cursor: pointer; } .bottom{ width:100%; height:1400px;
margin-top: 40px; float: left; } .userinfo{ height: 40px; width: 50px;
margin-left:3px; float:left; display: inline-block; white-space: nowrap;
word-wrap: normal; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
cursor: pointer; } .bottom_info{ width:1046px; height:260px; margin:0 auto; }
.user_bottom{ width:279px; height:38px; margin-top:20px; float:left; } .name{
width:205px; height:38px; float:left; line-height: 38px; font-size: 28px;
color:#aca3cc; } .fabulous{ width:58px; height:32px; margin-left: 700px;
border-radius: 18px; margin-top: 50px; background-color: rgba(0,0,0,.4); float:
left; } .fabulous i{ width: 16px; height: 16px; position: absolute;
margin-left: 8px; margin-top: 8px; background-image: url(images/4.png);
background-size: 575px 41px; } .num{ color:#fff; margin-left: 32px; margin-top:
13px; line-height: 30px; } .userImg{ width: 128px; height: 128px;
background-color:#fff; float: left; margin-top: 10px; } .userImg_right{ width:
379px; height: 99px; float: left; margin-left:15px; margin-top: 10px;
font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif"; }
.userImg_right_top{ width: 379px; height: 27px; } .userImg_right_top span{
width: 145px; height: 26px; margin-left:3px; float:left; display: inline-block;
white-space: nowrap; word-wrap: normal; overflow: hidden; text-overflow:
ellipsis; max-width: 100%; cursor: pointer; color: #a68dd9; font-size: 20px; }
.userImg_right_down{ width: 379px; height: 62px; margin-top:9px; } .info_menu{
width: 1046px; height: 50px; position: relative; margin-top: -30px; color:
#ccc7d9; float:left; } .menu_1{ width:58px; height:50px; line-height:50px;
font-size: 14px; text-align:center; float:left; cursor: pointer; }
.userImg_right_down_1{ float:left; width:40px; height:40px; } .bottom_block{
width:1038px; height:900px; margin:0 auto; } .bottom_left{ width:170px;
height:600px; float:left; } .bottom_left_1{ width:170px; height:300px;
background-color:#403366; border-radius:4px; } .bottom_left_1_list{
width:170px; height:37px; border-radius:2px; } .bottom_left i{
background-image: url(images/1.png); background-repeat:no-repeat; position:
absolute; background-size: 632px 388px; width:16px; height:16px;
margin-left:18px; margin-top:13px; float:left; } .bottom_left_1_list_text{
color: #ccc7d9; width:126px; height:35px; line-height:42px; margin-left:44px;
font-size:12px; float:left; margin-top:1px; } .bottom_middle{ width:592px;
height:800px; margin-left:23px; float:left; } .bottom_middle i{
background-image: url(images/1.png); background-repeat:no-repeat; position:
absolute; background-size: 632px 388px; width:24px; height:24px;
margin-left:11px; margin-top:22px; float:left; } .bottom_middle_top{
width:592px; height:70px; color: #827a99; font-size:14px;
background-color:#473a6e; } .bottom_middle_top_input{ width:443px; height:68px;
float:left; } .camera{ width:48px; height:68px; float:left; margin-left:50px;
background-color: #3b2f61; border:0.5px solid #352a54; } .bottom_middle_2{
width:591px; height:45px; float:left; background-color: #3b2f61;
margin-top:13px; border:0.5px solid #2e244f; } .bottom_middle_2_1{ width:66px;
height:35px; float:left; color: #ccc7d9; font-weight: 700; font-size:14px;
line-height:35px; margin-top:5px; } .bottom_middle_2_2{
float:left;width:10px;height:10px; } .bottom_middle_2_3{
float:left;width:24px;height:24px;margin-left:420px; } .bottom_middle_2_4{
float:left;width:24px;height:24px;margin-left:20px; } .context{ width:591px;
height:300px; background-color: #3b2f61; margin-top:13px; float:left; }
.bottom_right{ width:230px; height:600px; background-color:#bbb;
margin-left:23px; float:left; }
图片(由于图片没法在这放,我直接把代码包放网盘上了):https://pan.baidu.com/s/1nIm5AcqvF1-wjL8-Wyuaiw
<https://pan.baidu.com/s/1nIm5AcqvF1-wjL8-Wyuaiw>


其中有很多小图标,但是图片就那么几张,原因是为什么呢,这是因为他用一张图当背景图,通过"background-position"这个属性,详解请看我的上一篇博客:
https://blog.csdn.net/qq_39429962/article/details/82833861
<https://blog.csdn.net/qq_39429962/article/details/82833861%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B%E2%80%8B>

友情链接
ioDraw流程图
API参考文档
OK工具箱
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:637538335
关注微信