QQ空间仿制

编程语言 2018-09-28 23:01:42 阅读次数: 0

注意事项：

1.先布局，后操作；

2.合理使用clear清除悬浮；

3.发表说说的文字框使用<textarea.../>更合理，为了使文字定位到左上角输入，标签中间不得有空格

效果图：

源码：


<!DOCTYPE html>
<html>
<head>
<title>Qzone</title>
<meta charset="utf-8" />
<link href="images/qq.ico" rel="shortcut icon" type="image/x-icon">
<style>
	.header{
	width:100%;
	height:40px;
	background-color:#400929;
	color:#DDA3CC;
	font-size:12px;
	}
	.title{
	width:100%;
	height:180px;

	padding:10px;
	}
	.body{
	width:100%;

	
	}

</style>
</head>
<body style="margin:0;">

<!-- 头部-->
<div class="header">
	<div style="float:left; margin-left:15%;padding:5px;"><img src="images/空间星.jpg" alt="QQ空间" /></div>
	<div style="float:left; padding:5px;padding-left:1%;line-height:30px;">
		<div style="float:left;"><img src="images/小人头.jpg" alt="小人头" /></div>
		<div style="float:left;">个人中心</div>
	</div>
	<div style="float:left; padding:5px;padding-left:0.5%;line-height:30px;">
		<div style="float:left;"><img src="images/空间主页.jpg" alt="空间主页" /></div>
		<div style="float:left;">我的主页</div>
		<div style="float:left;"><img src="images/向下箭头.jpg" alt="向下箭头" /></div>
	</div>
	<div style="float:left;padding:5px;padding-left:0.5%;line-height:30px;">
		<div style="float:left;"><img src="images/好友头.jpg" alt="好友头" /></div>
		<div style="float:left;">好友</div>
		<div style="float:left;"><img src="images/向下箭头.jpg" alt="向下箭头" /></div>
	</div>
	<div style="float:left; padding:5px;padding-left:0.5%; line-height:30px;">
		<div style="float:left;"><img src="images/游戏.jpg" alt="游戏" /></div>
		<div style="float:left;">游戏</div>
		<div style="float:left;"><img src="images/向下箭头.jpg" alt="向下箭头" /></div>
	</div>	
	<div style="float:left; padding:5px;padding-left:0.5%;line-height:30px;">
		<div style="float:left;"><img src="images/装扮.jpg" alt="装扮" /></div>
		<div style="float:left;">装扮</div>
		<div style="float:left;"><img src="images/向下箭头.jpg" alt="向下箭头" /></div>
	</div>
	
	<div style="float:left; padding:9px;padding-left:35%;line-height:15px;">
		<div style="float:left;">
		<form action="" method="get">
		<input type="text" id="search" name="search" value="用户/游戏/动态" style="border-top-left-radius:3px;
		border-bottom-left-radius:3px; height:18px; color:#B2819E;background-color:#71475F;
		border:1px solid #71475F" />
		</form>
		</div>
		<div style="float:left;">
		<img src="images/放大镜.jpg" alt="放大镜" style="border-top-right-radius:3px;
		border-bottom-right-radius:3px;" />
		</div>
	</div>
	
</div>

<!-- 头像区域-->
<div class="title">
	<div style="clear:both;"></div>
	<div style="width:100%;color:#954B6C;">
	
	
	<div style="width:25%;margin-left:15%;padding:5px;float:left;">
		<div style="float:left;clear:both;"><span style="font-size:30px;font-weight:900; " >∑煙鬼⊙→硕的空间</span></div>
		<div style="float:left;margin-top:18px;margin-left:8%;"><img src="images/苹果.jpg" alt="苹果"  /></div>
		<div style="float:left;margin-top:8px;margin-left:8%;"><img src="images/徽章.jpg" alt="徽章" /></div>
		<div style="clear:both;"><span style="font-size:15px;font-weight:400; " >\(^o^)/ 超好玩！！！！</span></div>
	</div>
	
	<div style="width:5%;background-color:#939393;color:white; border-radius:15px;float:left;margin-left:35%;margin-top:30px;">
	<img src="images/拇指.jpg" alt="拇指" style="margin-left:15px;margin-top:5px;" />
	<span style="font-size:25px;font-weight:400; margin-left:5px;" >3</span>
	</div>
	
	</div>
	
	
	<div style="clear:both;"></div>
	<div style="width:100%;">
	
	<div style="margin-left:5%;margin-top:30px;float:left;">
	<img  src="images/小和尚.jpg" height=80px width=80px  />
	</div>
	
	<div style="float:left;width:60%;">
	
		<div style="width:60%;margin-left:5%;margin-top:30px;color:#601A3D;font-size:20px;font-weight:800;">
			<p>Crazy Monkey</p>
		</div>
	
		<div style="color:#DDA3CC;width:60%;margin-top:30px;">
			<div style="margin-left:5%;float:left;width:10%;padding:3px;">主页</div>
			<div style="float:left;width:10%;padding:3px;">日志</div>
			<div style="float:left;width:10%;padding:3px;">相册</div>
			<div style="float:left;width:10%;padding:3px;">留言板</div>
			<div style="float:left;width:10%;padding:3px;">说说</div>
			<div style="float:left;width:10%;padding:3px;">个人档</div>
			<div style="float:left;width:10%;padding:3px;">音乐</div>
			<div style="float:left;width:10%;padding:3px;">更多</div>
		</div>

	
	
	</div>
	
	<div style="float:left;
	margin-left:2%;
	margin-top:40px;
	width:25%;
	text-align:center;
	line-height:20px;
	color:#601A3D;
	">

	<div style="float:left;">
	<img src="images/访问.jpg"  width="60" height="60" />

	</div>


	<div style="float:left;">
	今日访客：10<br/>
	被挡访客：1<br/>
	访客总量：10000<br/>
	</div>

	</div>
	

	

	
	
	
	</div>
	
	
</div>



<div class="body">
	<div style="clear:both;"></div>
    
    <!-- 主题左侧选择框-->
	<div class="body_left" style="margin:1%;margin-left:15%;width:10%;color:#DDA3CC;font-size:12px;
		font-weight:800;line-height:20px;float:left;">
		<div  style="background-color:#631D41;padding:10px;border-top-right-radius:3px;
			border-top-left-radius:3px;"><img src="images/好友动态.jpg" align="top"
			alt="好友动态" />好友动态</div>
		<div style="background-color:#70264B;padding:10px;"><img src="images/特别关心.jpg" align="top"
			alt="特别关心" />特别关心</div>
		<div style="background-color:#70264B;padding:10px;"><img src="images/与我相关.jpg" align="top"
			alt="与我相关" />与我相关</div>
		<div style="background-color:#70264B;padding:10px;"><img src="images/空间达人.jpg" align="top"
			alt="空间达人" />空间达人</div>
		<div style="background-color:#70264B;padding:10px;"><img src="images/那年今日.jpg" align="top"
			alt="那年今日" />那年今日</div>
		<div style="background-color:#70264B;padding:10px;"><img src="images/腾讯课堂.jpg" align="top"
			alt="腾讯课堂" />腾讯课堂</div>
		<div style="background-color:#70264B;padding:10px;"><img src="images/游戏应用.jpg" align="top"
			alt="游戏应用" />游戏应用</div>
		<div style="background-color:#70264B;padding:10px;border-bottom-right-radius:3px;
			border-bottom-left-radius:3px;"><img src="images/我的收藏.jpg" align="top"
			alt="我的收藏" />我的收藏</div>		

	</div>
	
	
	<div class="body_medium" style="width:40%;float:left;margin:1%;">
	
        <!-- 说说发表区域-->
		<div class="shuoshuo" style="width:100%;float:left;">
		
		
			<div style="float:left;width:83%;height:65px;">		
				<textarea rows="3"  name="show" style="width:100%;color:#B2819E;text-align:left;
					background-color:#792B53;line-height:20px;border:1px solid #400929;">说点儿什么吧</textarea>
			</div>
			<div style="float:left;height:63px;background-color:#631D41;width:8.1%;border:1px solid #400929;">
				<img src="images/相册.jpg" align="middle" alt="相册" align="middle" style="margin-top:5px;" />
			</div>
			<div style="float:left;height:63px;background-color:#631D41;width:8.1%;border:1px solid #400929;border-left:none;">
				<img src="images/链接.jpg" align="middle" alt="链接" align="middle" style="margin-top:5px;" />
			</div>
			
			
			<div style="width:99.4%;height:40px;background-color:#792B53;
				float:left;border:1px solid black;border-top:none;color:#DDA3CC;">
				<div style="margin-top:10px; width:50%;float:left;border-top:none;border-right:1px solid #400929;">
					<img src="images/笑脸.jpg"  alt="笑脸"  
						style="line-height:20px;" />
					<img src="images/链接1.jpg"  alt="链接1"  
						style="line-height:20px;" />
					<img src="images/井号.jpg"  alt="井号"  
						style="line-height:20px;" />
					<img src="images/企鹅.jpg"  alt="企鹅"  
						style="line-height:20px;margin-left:60%" />
				</div>
				<div style="float:left;font-size:12px;line-height:40px;width:49%;">
					<div style="float:left;"><span style="margin-left:10px;font-weight:500;">可见范围：</span></div>
					<div style="float:left;"><form>
						<select style="background-color:#792B53;border:none;color:#DDA3CC;">
							<option value ="所有人可见" selected>所有人可见</option>
							<option value ="QQ好友可见">QQ好友可见</option>
							<option value="部分好友可见">部分好友可见</option>
							<option value="部分好友不可见">部分好友不可见</option>
							<option value="仅自己可见">仅自己可见</option>
						</select>
						<input type="submit" name="发表" value="发表" style="margin-left:50px;width:80px;height:30px;background-color:#E65C98;border:1px solid #792B53;" />
						
						</form>
					</div>
				</div>
			
			
			</div>
		
	
			</div>
	
	    <!-- 好友动态显示区域-->
		<div class="dongtai" style="width:100%;float:left;margin-top:15px;">
		
		<div class="dongtai1" style="width:100%;margin-top:0px;background-color:#70264B;">
		
		<div class="header_dongtai"  style="width:100%;height:40px;line-height:40px;border-bottom:0.5px solid #400929;">
			<div style="float:left;"><form>
						<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
							<option value ="全部动态" selected>全部动态</option>
							<option value ="相册">相册</option>
							<option value="日志">日志</option>
						</select>
						
						</form>
			</div>
			
			<div style="float:left;margin-left:70%;">
			<img src="images/刷新.jpg" alt="刷新" style="margin-top:5px;" />
			
			</div>
			<div style="float:left;margin-left:2%;">
			
			<img src="images/设置.jpg" alt="设置" style="margin-top:5px;" />
			</div>
		
		</div>
		<div class="pic_dongtai" style="width:100%;padding:20px;">
			<div style="width:8%;padding:3px;float:left;">
				<img  src="images/小和尚.jpg" alt="" style="border-radius:20px;width:40px;height:40px;" />
			</div>
			<div style="width:8%;float:left;font-size:12px;color:#DDA3CC;">
				<span>狐狸</span><br/><br/>
				<span>11:20</span>
			</div>
			<div style="float:left;margin-left:60%;"><form>
						<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
							<option value ="全部动态" selected>全部动态</option>
							<option value ="相册">相册</option>
							<option value="日志">日志</option>
						</select>
						
						</form>
			</div>
		</div>
		<div class="neirong_dt" style="width:100%;clear:both;" >
			<div style="padding:1px;padding-left:15px;color:#DDA3CC;">
				<p>中秋快乐！</p>
			</div>
			<div style="padding:1px;padding-left:15px;">
				<img  src="images/兔子.gif" alt=""  />
			</div>
		
		</div>
		<div class="liulan_dt" style="width:98%;margin:10px;height:40px;border-bottom:1px solid #400929; ">
			<div style="color:#DDA3CC;padding:5px;font-size:13px;float:left;line-height:30px;"><span>浏览6次</span></div>
			<div style="padding:5px;float:left;margin-left:60%;"><img src="images/点赞.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;margin-left:3%;"><img src="images/消息框.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;margin-left:3%;"><img src="images/分享.jpg" alt=""  /></div>
		</div>
		<div class="dianzan_dt" style="width:100%;margin:10px;height:40px;" >
			<div style="padding:5px;float:left;"><img src="images/点赞1.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;color:#DDA3CC;font-size:14px;line-height:30px;"><span>Crazy Monkey共1人觉得很赞</span></div>
		</div>
		<div class="pinglun_dt" style="width:100%;margin:2px;height:75px;">
			<div style="float:left;">
					<div style="float:left;margin-left:10px;">		
						<textarea rows="3" 	cols="80" name="pinglun" style="color:#B2819E;
							background-color:#792B53;line-height:20px;border:1px solid #400929;border-right:none;">说点儿什么吧</textarea>
							
					</div>
					<div style="float:left;border:1px solid #400929;border-left:none;">		
						<img src="images/相机11.jpg" alt=""  />
					</div>
					
			</div>
			
			
			
		</div>
		<div style="width:100%;margin:2px;margin-left:5px;height:40px;line-height:30px;">
			<div style="padding:5px;float:left;"><img src="images/笑脸1.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;margin-left:3%;"><img src="images/链接2.jpg" alt=""  /></div>
			<div style="float:left; padding:5px;padding-top:0;"><form>
						<input type="submit" name="发表" value="发表" style="margin-left:400px;width:80px;height:30px;background-color:#E65C98;border:1px solid #792B53;" />
						
						</form>
					</div>

		</div>
		
		
		</div>
		
		<div class="dongtai2" style="width:100%;margin-top:10px;background-color:#70264B;">
		
		<div class="header_dongtai"  style="width:100%;height:40px;line-height:40px;border-bottom:0.5px solid #400929;">
			<div style="float:left;"><form>
						<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
							<option value ="全部动态" selected>全部动态</option>
							<option value ="相册">相册</option>
							<option value="日志">日志</option>
						</select>
						
						</form>
			</div>
			
			<div style="float:left;margin-left:70%;">
			<img src="images/刷新.jpg" alt="刷新" style="margin-top:5px;" />
			
			</div>
			<div style="float:left;margin-left:2%;">
			
			<img src="images/设置.jpg" alt="设置" style="margin-top:5px;" />
			</div>
		
		</div>
		<div class="pic_dongtai" style="width:100%;padding:20px;">
			<div style="width:8%;padding:3px;float:left;">
				<img  src="images/小和尚.jpg" alt="" style="border-radius:20px;width:40px;height:40px;" />
			</div>
			<div style="width:8%;float:left;font-size:12px;color:#DDA3CC;">
				<span>狐狸</span><br/><br/>
				<span>11:20</span>
			</div>
			<div style="float:left;margin-left:60%;"><form>
						<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
							<option value ="全部动态" selected>全部动态</option>
							<option value ="相册">相册</option>
							<option value="日志">日志</option>
						</select>
						
						</form>
			</div>
		</div>
		<div class="neirong_dt" style="width:100%;clear:both;" >
			<div style="padding:1px;padding-left:15px;color:#DDA3CC;">
				<p>中秋快乐！</p>
			</div>
			<div style="padding:1px;padding-left:15px;">
				<img  src="images/兔子.gif" alt=""  />
			</div>
		
		</div>
		<div class="liulan_dt" style="width:98%;margin:10px;height:40px;border-bottom:1px solid #400929; ">
			<div style="color:#DDA3CC;padding:5px;font-size:13px;float:left;line-height:30px;"><span>浏览6次</span></div>
			<div style="padding:5px;float:left;margin-left:60%;"><img src="images/点赞.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;margin-left:3%;"><img src="images/消息框.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;margin-left:3%;"><img src="images/分享.jpg" alt=""  /></div>
		</div>
		<div class="dianzan_dt" style="width:100%;margin:10px;height:40px;" >
			<div style="padding:5px;float:left;"><img src="images/点赞1.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;color:#DDA3CC;font-size:14px;line-height:30px;"><span>Crazy Monkey共1人觉得很赞</span></div>
		</div>
		<div class="pinglun_dt" style="width:100%;margin:2px;height:75px;">
			<div style="float:left;">
					<div style="float:left;margin-left:10px;">		
						<textarea rows="3" 	cols="80" name="pinglun" style="color:#B2819E;
							background-color:#792B53;line-height:20px;border:1px solid #400929;border-right:none;">说点儿什么吧</textarea>
							
					</div>
					<div style="float:left;border:1px solid #400929;border-left:none;">		
						<img src="images/相机11.jpg" alt=""  />
					</div>
					
			</div>
			
			
			
		</div>
		<div style="width:100%;margin:2px;margin-left:5px;height:40px;line-height:30px;">
			<div style="padding:5px;float:left;"><img src="images/笑脸1.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;margin-left:3%;"><img src="images/链接2.jpg" alt=""  /></div>
			<div style="float:left; padding:5px;padding-top:0;"><form>
						<input type="submit" name="发表" value="发表" style="margin-left:400px;width:80px;height:30px;background-color:#E65C98;border:1px solid #792B53;" />
						
						</form>
					</div>

		</div>
		
		
		</div>
		
		<div class="dongtai3" style="width:100%;margin-top:10px;background-color:#70264B;">
		
		<div class="header_dongtai"  style="width:100%;height:40px;line-height:40px;border-bottom:0.5px solid #400929;">
			<div style="float:left;"><form>
						<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
							<option value ="全部动态" selected>全部动态</option>
							<option value ="相册">相册</option>
							<option value="日志">日志</option>
						</select>
						
						</form>
			</div>
			
			<div style="float:left;margin-left:70%;">
			<img src="images/刷新.jpg" alt="刷新" style="margin-top:5px;" />
			
			</div>
			<div style="float:left;margin-left:2%;">
			
			<img src="images/设置.jpg" alt="设置" style="margin-top:5px;" />
			</div>
		
		</div>
		<div class="pic_dongtai" style="width:100%;padding:20px;">
			<div style="width:8%;padding:3px;float:left;">
				<img  src="images/小和尚.jpg" alt="" style="border-radius:20px;width:40px;height:40px;" />
			</div>
			<div style="width:8%;float:left;font-size:12px;color:#DDA3CC;">
				<span>狐狸</span><br/><br/>
				<span>11:20</span>
			</div>
			<div style="float:left;margin-left:60%;"><form>
						<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
							<option value ="全部动态" selected>全部动态</option>
							<option value ="相册">相册</option>
							<option value="日志">日志</option>
						</select>
						
						</form>
			</div>
		</div>
		<div class="neirong_dt" style="width:100%;clear:both;" >
			<div style="padding:1px;padding-left:15px;color:#DDA3CC;">
				<p>中秋快乐！</p>
			</div>
			<div style="padding:1px;padding-left:15px;">
				<img  src="images/兔子.gif" alt=""  />
			</div>
		
		</div>
		<div class="liulan_dt" style="width:98%;margin:10px;height:40px;border-bottom:1px solid #400929; ">
			<div style="color:#DDA3CC;padding:5px;font-size:13px;float:left;line-height:30px;"><span>浏览6次</span></div>
			<div style="padding:5px;float:left;margin-left:60%;"><img src="images/点赞.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;margin-left:3%;"><img src="images/消息框.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;margin-left:3%;"><img src="images/分享.jpg" alt=""  /></div>
		</div>
		<div class="dianzan_dt" style="width:100%;margin:10px;height:40px;" >
			<div style="padding:5px;float:left;"><img src="images/点赞1.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;color:#DDA3CC;font-size:14px;line-height:30px;"><span>Crazy Monkey共1人觉得很赞</span></div>
		</div>
		<div class="pinglun_dt" style="width:100%;margin:2px;height:75px;">
			<div style="float:left;">
					<div style="float:left;margin-left:10px;">		
						<textarea rows="3" 	cols="80" name="pinglun" style="color:#B2819E;
							background-color:#792B53;line-height:20px;border:1px solid #400929;border-right:none;">说点儿什么吧</textarea>
							
					</div>
					<div style="float:left;border:1px solid #400929;border-left:none;">		
						<img src="images/相机11.jpg" alt=""  />
					</div>
					
			</div>
			
			
			
		</div>
		<div style="width:100%;margin:2px;margin-left:5px;height:40px;line-height:30px;">
			<div style="padding:5px;float:left;"><img src="images/笑脸1.jpg" alt=""  /></div>
			<div style="padding:5px;float:left;margin-left:3%;"><img src="images/链接2.jpg" alt=""  /></div>
			<div style="float:left; padding:5px;padding-top:0;"><form>
						<input type="submit" name="发表" value="发表" style="margin-left:400px;width:80px;height:30px;background-color:#E65C98;border:1px solid #792B53;" />
						
						</form>
					</div>

		</div>
		
		
		</div>
		</div>
		
		</div>
	
		
	</div>
	
	<div class="body_right" style="width:15%;float:left;margin:1%;">
		<div style="width:35%;height:70px;border:none;color:#B13C71;background-color:#531232;float:left;text-align:center;">
			<div style="font-size:13px;margin-top:10px;"><span>	 09.23</span><br/></div>
			<div style="font-size:20px;"><span >签到</span></div>
		</div>
		<div style="width:60%;height:70px;border:none;color:#B13C71;background-color:#70264B;float:left;text-align:center;">
			<div style="font-size:13px;margin-top:10px;"><span>本月签到次数</span><br/></div>
			<div style="font-size:20px;"><span >21次</span></div>
		</div>
	</div>
</div>



</body>
</html>
扫描二维码关注公众号，回复： 3400430 查看本文章

猜你喜欢

转载自blog.csdn.net/qq_35892775/article/details/82829973
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022