为了我们拥有更加扎实的前端基础，我建议大家仅将我的代码作为参考，自己练一练会更好，话不多说，下边是效果图跟代码：
效果：
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
其中有很多小图标，但是图片就那么几张，原因是为什么呢，这是因为他用一张图当背景图，通过"background-position"这个属性，详解请看我的上一篇博客：https://blog.csdn.net/qq_39429962/article/details/82833861
转载自原文链接, 如需删除请联系管理员。
原文链接：QQ空间首页模仿制作——HTML布局练习，转载请注明来源！