HTML制作qq空间主页

我们在前面已经做过一些简单的网页,接下来让我们做一些较为复杂的东西。

这就是我的空间主页了。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> 生活的空间</title>
<style>
.div_headline{
			width:100%;
			height:41px;
			background-color:#000;
			float:left;
}
.div_heada{
			width:100%;
			height:270px;
			background-color:#888;
			float:left;
}
.div_bottom{
			width:100%;
			height:1500px;
			background-color:#555;
			float:left;
			
}
.div_headline1{
			width:90px;
			height:41px;
			background-color:#000;
			float:left;
			margin-top:0%;
}
.div_headline2{
			width:16px;
			height:16px;
			background-color:#000;
			float:left;
			margin-top:12px;
			margin-left:12px;
}
.div_headline3{
			width:48px;
			height:14px;
			background-color:#000;
			float:left;
			margin-top:8px;
			margin-left:2px;
}
.div_heada1{
			width:223px;
			height:65px;
			background-color:#999;
			float:left;
			
}
.div_left{
			width:320px;
			height:213px;
			background-color:#555;
			float:left;
			margin-top:2%;
			margin-left:20%;
}
.div_righta{
			width:592px;
			height:41px;
			background-color:#666;
			float:left;
			margin-top:2%;
			margin-left:2%;
}
.div_rightb{
			width:592px;
			height:2000px;
			background-color:#333;
			float:left;
			margin-top:1%;
			margin-left:2%;
}

</style>
</head>
<body style="margin:0">
	<div class="div_headline">
			<div class="div_headline1"  style="margin-left:10%;"><img src="qq.jpg" style="width:90;height:41;"/></div>
	
			<div class="div_headline1"  >
					<div class="div_headline2"><img src="qq1.jpg" style="width:16;height:16;"/></div>
					<div class="div_headline3"style="width:48;height:14;"><font size="1" color="white">个人中心</font></div>
			</div>
	
			<div class="div_headline1">
					<div class="div_headline2"><img src="qq2.jpg" style="width:16;height:16;"/></div>
					<div class="div_headline3"style="width:48;height:14;"><font size="1" color="white">我的主页</font></div>
			</div>
	
			<div class="div_headline1"  >
					<div class="div_headline2"><img src="qq3.jpg" style="width:16;height:16;"/></div>
					<div class="div_headline3"style="width:48;height:14;"><font size="1" color="white">好友</font></div>
			</div>
			
			<div class="div_headline1" >
					<div class="div_headline2"><img src="qq4.jpg" style="width:16;height:16;"/></div>
					<div class="div_headline3"style="width:48;height:14;"><font size="1" color="white">游戏</font></div>
			</div>
	
			<div class="div_headline1"   >
					<div class="div_headline2"><img src="qq5.jpg" style="width:16;height:16;"/></div>
					<div class="div_headline3"style="width:48;height:14;"><font size="1" color="white">装扮</font></div>
			</div>
	
			<div class="div_headline1" style=" margin-left:12%;width:90px;height:40px" >
					<div class="div_headline2"><img src="bofang.png" style="width:16;height:16;"/></div>
					<div class="div_headline3"  style="width:27;height:20;margin-top:12px"><img src="gaodi.png" style="width:27;height:20;"/></div>
			</div>
			
			<div class="div_headline1" style=" width:135px;height:20px;margin-top:10px;" >
				<form action="https://www.qq.com/" method="get"style="background-color:#000;">
       				 	<input  style="background-color:#999;width:120px;height:18px;"id="s" name="s" type="post" placeholder="用户/游戏/动态" autocomplete="off"/>
					
				</form>
				
			</div>
			
			<div class="div_headline1" style=" width:95px;height:40px" >
				<div class="div_headline2" style="margin-top:6px"><img src="touxiang.jpg" style="width:24px;height:24px;"/></div>
				<div class="div_headline3"  style="width:50;height:41;margin-top:12px;margin-left:8px"><font size="1" color="white">冻住不洗</font></div>
			</div>
			
			<div class="div_headline1" style=" width:78px;height:40px" >
				<div ><img src="qq6.png" style="width:78;height:40;"/></div>
			</div>
	
	
	</div>
	
	
	<div class="div_heada">
		<div class="div_heada1" style="background-color:#000;width:100%;margin-left:20%;margin-top:18px;">
			<div style="width:100%;height:38px;margin-top:1px;"><font size="6" color="white">生活</font>
			<img src="qq6.jpg"></div>
			<div style="width:100%;height:19px;margin-top:1px;"><font size="3" color="white"style="float:left;">http://10554844837.qzone.qq.com</font>
			<div style="float:left;margin-left:40%;width:45;height:25;"><img src="qq7.png"></div>
			</div>
		</div>
	
		<div class="div_heada1" style="width:126px;height:126px;margin-top:4%;margin-left:20%;"><img src="touxiang.jpg" style="width:126px;height:126px;"/></div>
	
	
		<div class="div_heada1"style="background-color:#555;width:341px;height:98px;margin-top:4%;margin-left:2%;">
					<font size="4" color="white" style="background-color:#555;width:100%;float:left;margin-top:5px;">冻住不洗澡</font>
		
					<div style="float:left;width:40px;height:40px;margin-top:5px;margin-left:0%;"><img src="qq8.jpg"style="width:40;height:40;"></div>
					<div class="div_heada1" style="background-color:#555;width:182px;height:40px;margin-left:2%;">
				
							<div style="float:left;width:46px;height:16px;margin-top:5px;margin-left:0%;"><font size="1" color="white">成长值1</font></div>
							<div style="float:left;width:100px;height:16px;margin-top:5px;margin-left:10%;"><font size="1" color="white">成长速度1点/天</font></div>
							<div style="float:left;width:182px;height:10px;margin-top:5px;margin-left:0%;"><img src="qq10.jpg" style="width:182px;height:10px;"></div>
				
					</div>
					<div class="div_heada1" style="width:82px;height:30px;margin-top:11px;margin-left:9px;"><img src="qq9.jpg" style="width:82px;height:30px;"></div>
		</div>
	</div>
	
	
	<div class="div_bottom">
				<div class="div_left">
						<div  style="float:left;background-color:#666;width:90px;height:80px;margin-top:23px;margin-left:9px;">
								<div  style="background-color:#666;width:30px;height:30px;margin-top:5px;margin-left:30px;"><font size="6">85</font></div>
								<div  style="background-color:#666;width:28px;height:17px;margin-top:2px;margin-left:30px;"><font size="2">照片</font></div>
						</div>
						<div  style="float:left;background-color:#666;width:90px;height:80px;margin-top:23px;margin-left:9px;">
								<div  style="background-color:#666;width:30px;height:30px;margin-top:5px;margin-left:30px;"><font size="6">185</font></div>
								<div  style="background-color:#666;width:28px;height:17px;margin-top:2px;margin-left:30px;"><font size="2">说说</font></div>
						</div>
						<div  style="float:left;background-color:#666;width:90px;height:80px;margin-top:23px;margin-left:9px;">
								<div  style="background-color:#666;width:30px;height:30px;margin-top:5px;margin-left:30px;"><font size="6">37</font></div>
								<div  style="background-color:#666;width:28px;height:17px;margin-top:2px;margin-left:30px;"><font size="2">日志</font></div>
						</div>
					
							
							
								<div style="float:left;background-color:#444;width:280px;height:35px;margin-top:10%;margin-left:9px;"><font size="3"color="white">个人档</font></div>
									<div style="float:left;background-color:#444;width:280px;height:35px;margin-top:11px;margin-left:9px;"><font size="3">
									<img src="qq11.jpg"/><font size="1" color="white">22岁 双鱼座 男 现居保定</font>
									</font>
							</div>
	
				</div>
				
				<div class="div_righta">
						<font size="3" color="white" style="margin-left:45%;margin-top:42%">设置形象墙</font>
				
				</div>
				<div class="div_rightb">
							<div class="div_heada1" style="width:50px;height:50px;margin-top:2%;margin-left:2%;"><img src="yuan.jpg" style="width:50px;height:50px;"/></div>
							<div class="div_heada1"style="background-color:#666;width:401px;height:50px;margin-top:4%;margin-left:2%;">
									<font size="2" color="white" style="width:100%;height:20px;float:left;margin-top:5px;">冻住不洗澡</font>
									<div style="float:left;width:40px;height:20px;margin-top:5px;margin-left:0%;"><font size="1" color="white">18:00</font></div>
							</div>
								
								
        								<div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="images/logo.jpg"  /></div>
									<div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="images/logo.jpg"  /></div>
     						   		<div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="images/logo.jpg"  /></div>
									<div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="images/logo.jpg"  /></div>
									<div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="images/logo.jpg"  /></div>
									<div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="images/logo.jpg"  /></div>
									<div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="images/logo.jpg"  /></div>
									<div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="images/logo.jpg"  /></div>
									<div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="images/logo.jpg"  /></div>
									
									<div style="background-color:#333;float:left;width:550px;height:40px;margin-top:2%;margin-left:2%;"  >
												<div style="background-color:#333;float:left;width:60px;height:20px;margin-top:2%;margin-left:2%;"  ><font size="1" color="white">浏览次数</font></div>
												<div style="background-color:#333;float:left;width:160px;height:20px;margin-top:2%;margin-left:50%;"  ><img src="qq12.png" style="width:160;height:20;"></div>
												
												
									</div>
     					  			
									<input style="background-color:#555;width:500px;height:50px;margin-left:2%;margin-left:1%;" id="s" name="s" type="post" placeholder="评论" autocomplete="off">
									<input  style="width:60px;height:30px;background-color:#555;margin-top:2%;margin-left:70%;float:left;" id="gender" name="gender" type="submit" value="提交">
									
       
       
				</div>
	
	</div>
</body>
</html>

这就是全部代码了,虽然有一点复杂,但是不难,至于要认真将一个个div套用过去即可。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页