QQ空间首页模仿制作——HTML布局练习

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

效果：

QQZone.html: 

	
		
		
	
	
		

			

				

				

					
					个人中心
				
				

					
					我的主页
				
				

					
					好友
				
				

					
					游戏
				
				

					
					装扮
				
				
				

					

						
					
					

						
					
				
				
				

					
					
				
				
				

					

						
					
					

						还有童心的成年人
					
				
	
				
				

					
				
				
				

					
				
				
				

			
		
		

			

				

					

						无奈丶看花落  悲
					
				
				
				

					
					1
				
				
				

					
				
				
				

					

						还有童心的成年人
					
					

						

							
						
						

						

						

					
				
				
				

					

						主页
					
					

						日志
					
					

						相册
					
					

						留言板
					
					

						说说
					
					

						个人档
					
					

						音乐
					
					

						更多
					
				
			
			

				

					

						

							
							

								好友动态
							
						
						

							
							

								特别关心
							
						
						

							
							

								与我相关
							
						
						

							
							

								空间达人
							
						
						

							
							

								那年今日
							
						
						

							
							

								腾讯课堂
							
						
						

							
							

								游戏应用
							
						
						

							
							

								我的收藏
							
						
					
					
					

						

							
							

								好友动态
							
						
						

							
							

								特别关心
							
						
						

							
							

								与我相关
							
						
						

							
							

								空间达人
							
						
						

							
							

								那年今日
							
						
						

							
							

								腾讯课堂
							
						
						

							
							

								游戏应用
							
						
						

							
							

								我的收藏
							
						
					
				
				

					

						

							 说点儿什么吧
						
						

							
						
						

							
						
					
					
					

						

							全部动态
						
						

							
						
						

							
						
						

							
						
					
					
					

						
					
					

						
					
				
				

			
		
	

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