HTML制作qq空间主页

最新推荐文章于 2024-05-27 08:58:30 发布
最新推荐文章于 2024-05-27 08:58:30 发布
阅读量1.3w 收藏 94
点赞数 12
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eggplant_/article/details/82834006
版权

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

这就是我的空间主页了。


<!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套用过去即可。

eggplant_
关注
  • 12
    点赞
  • 踩
  • 94
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
QQ空间首页模仿制作——HTML布局练习
qq_39429962的博客
09-27 1万+
为了我们拥有更加扎实的前端基础，我建议大家仅将我的代码作为参考，自己练一练会更好，话不多说，下边是效果图跟代码： 效果： QQZone.html:  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;我的QQ空间&lt;/title&gt; &lt;link type="text/css" rel=&quot
html怎么做qq空间页面,html+css qq空间模仿
weixin_35565522的博客
06-04 1326
MyHtml.html*{main: 0px 0px;padding : 0px 0px;}.main{width:900px;height:415px;background:#000;margin:10px auto;}.title{width:900px;height:40px;background:#333332;margin:0px 0px;border:1px solid #FFF;}....
QQ空间素材网源码
01-02
资源描述：本QQ空间素材网全站用html代码编写完成，我们保证源码的完整性和安全性，此站能够在任何平台运行，开发商官方网站：http://we456.com 如果您在使用的过程中有什么问题请发信到bawgkrytsm@163.com ，我们会尽快回复您；感谢您选择我们的程序；此源码为免费开源源码。 版本日期：2011年11月7日 开发人：Peter
仿QQ空间的HTML编辑器
12-08
仿QQ空间的HTML编辑器，很不错的，仅供参考。
HTML静态网页成品作业(HTML+CSS)——1号店商城首页网页(1个页面)
最新发布
weixin_42283461的博客
05-27 451
HTML静态网页成品作业(HTML+CSS)——1号店商城首页网页(1个页面)
html怎么做qq空间主页,QQ空间首页布局
weixin_29301059的博客
06-09 1025
html>QQ空间首页布局body,ul,li{margin:0;padding:0;}body{margin:0px;padding:0px;background-color:lightskyblue;background-image:url("img7.jpg");background-repeat:no-repeat;background-size:cover;}.na...
QQ空间_html
03-22
NULL 博文链接：https://kaka100.iteye.com/blog/907748
前端---HTML QQ空间主页制作
Nagile-zhou博客
09-27 8874
今天给大家讲解一个qq空间主页制作的讲解,我们先来看代码和示意图: 代码如下: &lt;html&gt; &lt;head&gt; &lt;title&gt;QQ空间制作练习&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;li
个人网站模版 个人网站制作 个人主页 类似QQ空间
11-29
我制作的网站 个人网站 下载后可直接上交作业 哈哈 有这方面的需求就下吧 绝对是真的
制作免费QQ空间.zip
03-16
在编程和软件开发领域，制作免费QQ空间可能指的是利用编程技术自定义QQ空间的界面或功能，实现个性化设计。下面我们将深入探讨相关的知识点。 1. HTML与CSS基础：制作任何网页或网络应用的基础都是HTML（超文本标记...
模拟QQ空间制作
06-05
在IT行业中，模拟QQ空间制作是一项有趣的项目，尤其适合初学者来提升自己的前端开发技能。QQ空间是中国最受欢迎的社交网络平台之一，它的界面设计和功能丰富多样，为用户提供了一个展示自我、互动交流的空间。在这里...
QQ空间网页制作图片素材（还好）
04-19
包括QQ控件的很多挂件，动态文字，花边等
项目QQ空间[个人中心][登录]页面，静态
03-24
NULL 博文链接：https://forkun.iteye.com/blog/1075870
潮流QQ空间制作
05-15
"潮流QQ空间制作"指的是利用各种工具和技巧，使QQ空间的设计紧跟流行趋势，展现出独特的视觉效果和个性魅力。 首先，要创建一个潮流的QQ空间，你需要了解当前的设计趋势。这可能包括动态背景、炫酷的动画效果、定制...
制作QQ空间整人日志
03-08
总之，制作QQ空间整人日志涉及到网页设计、编程和用户体验等多个方面。通过学习和实践，你可以创造出各种独特而有趣的整人日志，为朋友们带来欢笑。当然，重要的是要保持善意，避免伤害到他人的感情。
网页模板用于qq空间自己使用
12-01
这是我自己在网上找的一个比较好看的网页模板，不过是个静态网页，但大家可以自己修改添加别的。
用html写一个QQ空间登录页面
weixin_35756373的博客
12-30 739
这是一个基本的 QQ 空间登录页面的 HTML 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QQ空间登录</title> </head> <body> <h1>QQ空间登录</h1> ...
空间发表说说html页面实现原理,空间说说还能这样玩？jquery开发腾讯QQ空间说说发表效果...
weixin_29048775的博客
05-31 433
web前端学习群，189394454，有视频、源码、学习方法等大量干货分享经常发说说的朋友对这效果很熟悉吧，对的，就是空间说说发表，每天发说说是这样发，但是怎么做到的呢？????html代码：有什么新鲜事想告诉大家? 发表 ????css代码：*{margin:0px;/*外边距*/padding:0px;/*内边距*/}ul,li{list-style:none;}body{back...
前端----HTML 制作QQ空间练习
nO0b
09-24 4935
先上效果图: 主要针对布局和样式调整做练习,没有实现各个连接的点击效果,做完以后还发现有一些缺陷, 比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考QQ空间右下角的浮标做法修改就可以了 就是这个浮标,一直保持在屏幕上,顶部条同理,position: fixed;后直接设置right和bottom距离就可以了,位置会自动跟随浏览器边框及时调整,做出返回顶部的点...
qq空间html网页制作
12-15
根据提供的引用内容，无法直接回答关于qq空间html网页制作的问题。引用提供的是一个Web网页设计制作的源码，而引用提供的是一个基于学习（RNN）算法的车辆状态估计的项目。因此，我需要更多的信息才能回答您的问题。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值