前端---HTML QQ空间主页制作

最新推荐文章于 2022-11-30 15:52:08 发布
最新推荐文章于 2022-11-30 15:52:08 发布
阅读量8.8k 收藏 102
点赞数 23
分类专栏： 前端 文章标签： qq空间主页 主页制作 空间制作 网页布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42504145/article/details/82861388
版权

今天给大家讲解一个qq空间主页制作的讲解,我们先来看代码和示意图:

代码如下:

<html>
<head>
	<title>QQ空间制作练习</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link href="qqzone.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<div id="container_head">
		<div id="div_head">
			<div id="div_head_qqZone">
				<img src="icon/qqZone.png" class="head_menu"/>
				QQ空间
			</div>
			<div class="head_menu">
				<img src="icon/personal.png" class="head_menu"/>
				个人中心
			</div>
			<div class="head_menu">
				<img src="icon/home.png" class="head_menu"/>
				我的主页
				<img src="icon/sanJiao.png" class="head_menu"/>
			</div>
			<div class="head_menu">
				<img src="icon/friend.png" class="head_menu"/>
				好友
				<img src="icon/sanJiao.png" class="head_menu"/>
			</div>
			<div class="head_menu">
				<img src="icon/game.png" class="head_menu"/>
				游戏
				<img src="icon/sanJiao.png" class="head_menu"/>
			</div>
			<div class="head_menu">
				<img src="icon/dress.png" class="head_menu"/>
				装扮
				<img src="icon/sanJiao.png" class="head_menu"/>
			</div>

			<img src="icon/yellow.png" class="head_menu menu_right"/>
			<img src="icon/setting.png" class="head_menu menu_right"/>
			<img src="icon/out.png" class="head_menu menu_right"/>
			<div class="head_menu menu_right">&nbsp九。</div>
			<img src="icon/icon.png" class="head_menu menu_right"/>
			<input type="text" class="menu_right" id="input_search" placeholder="用户/游戏/动态"/>
			<img src="icon/find.png" id="img_search"/>
			<img src="icon/music.png" class="head_menu menu_right"/>
		</div>
		<img src="icon/signal.png" id="img_signal"/>
	</div>
	<div id="div_body">
		<div id="div_body_top">
			<span id="span_nine">九。</span>
			<img src="icon/apple.png" id="img_apple"/>
			<img src="icon/zan.png" id="img_zan"/>
			<div id="div_empty"></div>
			<span id="span_nine1">九。</span>
			<img src="icon/kaitong.png" id="img_kaitong"/>
			<img src="icon/watch.png" id="img_watch"/>
		</div>
		<div id="div_body_menu">
			<img src="icon/bigicon.png" id="img_bigicon"/>
			<ul>
				<li class="li_menu">主页</li>
				<li class="li_menu">日志</li>
				<li class="li_menu">音乐盒</li>
				<li class="li_menu">留言板</li>
				<li class="li_menu">相册</li>
				<li class="li_menu">个人档</li>
				<li class="li_menu">更多</li>
			</ul>
		</div>
		<div id="div_body_left">
			<div id="div_leftmenu">
				<ul>
					<li class="li_leftmenu li_deepcolor"><b>好友动态</b></li>
					<li class="li_leftmenu">特别关心</li>
					<li class="li_leftmenu">与我相关</li>
					<li class="li_leftmenu">空间达人</li>
					<li class="li_leftmenu">那年今日</li>
					<li class="li_leftmenu">腾讯课堂</li>
					<li class="li_leftmenu">游戏应用</li>
				</ul>
				
			</div>
		</div>
		<div id="div_body_mid">
			<input type="text" id="input_write" placeholder="说点什么吧"></input>
			<img src="icon/photo.png" id="img_photo"></img>
			<span id="span_dongtai">
				<b>全部动态</b>
			</span>
			<div class="div_dongtai">
				<div class="div_shuoshuo">
					<img src="icon/icon_1.png" id="img_icon1"></img>
					<span id="span_name">孟冉，学委<br></span>
					<span id="span_time">15:39</span>
					<img src="icon/shuoshuo_next.png" id="img_shuoshuo_next"></img>
					<p id="p_shuoshuo">我现在才知道什么是爬山 真的是用手爬啊<br>
陡峭的台阶比脚还窄 还好多路还没台阶 吓死银了 没想到我还能爬到北天门主峰<br>最高峰！！！哈哈哈/悠闲/悠闲/悠闲
					</p>
					<img src="icon/photoes.png" id="img_photoes">
					<div id="div_dianzan">
						浏览177次
						<img src="icon/dianzan.png" id="img_dianzan">
					</div>
					<div id="div_names">
						<img src="icon/hand.png" id="img_hand">
						孟冉，学委、郭敬宇、王深山、刘雯1组、16软2依布、张笑影团支书、瞅你咋滴、- Puppet 、你是我的关键词、陈伟、失忆的金鱼、时光留白、素笔、河大 驰安驾校、、Meng、143、fine、梦婷妈妈等34人觉得很赞
					</div>
					<div class="div_debate">
						<img src="icon/icon1.png" class="img_icon1">
						<span class="span_debate_name">刘雯1组</span>
						<span class="span_debate_time">15:45</span>
						<span class="span_debate">:&nbsp老大-征服陡山的女人</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">15:46</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">刘雯1组</span>
							 : 真是一览众山小的赶脚
						</span>
					</div>
					<div class="div_debate">
						<img src="icon/icon2.png" class="img_icon1">
						<span class="span_debate_name">16软2依布 </span>
						<span class="span_debate_time">16:21</span>
						<span class="span_debate">:&nbsp啥软件，把自己照这么白，我也要用</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">16:41</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">16软2依布</span>
							 : 我手机照相就这样 没开软件
						</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon2.png" class="img_icon1">
						<span class="span_debate_name">16软2依布</span>
						<span class="span_debate_time">16:42</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">孟冉，学委</span>
							 : /汗/汗/汗/汗
						</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon3.png" class="img_icon1">
						<span class="span_debate_name">肥肉炒藕</span>
						<span class="span_debate_time">17:35</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">16软2依布</span>
							 : 那是太阳光晃得
						</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">18:01</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">肥肉炒藕</span>
							 : /枪/枪/枪/枪
						</span>
					</div>
					<div class="div_debate">
						<img src="icon/icon4.png" class="img_icon1">
						<span class="span_debate_name">孟 </span>
						<span class="span_debate_time">16:36</span>
						<span class="span_debate">:&nbsp这是去哪了</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">16:42</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">孟</span>
							 : 去爬山 还有太行水镇
						</span>
					</div>
					<div class="div_debate">
						<img src="icon/icon5.png" class="img_icon1">
						<span class="span_debate_name">你是我的关键词 </span>
						<span class="span_debate_time">17:03</span>
						<span class="span_debate">:&nbsp好玩吗</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">17:15</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">你是我的关键词</span>
							 : 海星
						</span>
					</div>
					<div class="div_debate">
						<img src="icon/icon6.png" class="img_icon1">
						<span class="span_debate_name">郭敬宇 </span>
						<span class="span_debate_time">17:13</span>
						<span class="span_debate">:&nbsp厉害了我的老大</span>
					</div>
					<div class="div_redebate">
						<img src="icon/icon_1.png" class="img_icon1">
						<span class="span_debate_name">孟冉，学委</span>
						<span class="span_debate_time">17:15</span>
						<span class="span_debate">:&nbsp回复
							<span class="span_debate_name">郭敬宇</span>
							 : 嘿嘿嘿
						</span>
					</div>
				</div>
			</div>
		</div>
		<div id="div_body_right">
			<div id="div_check">
				<div id="div_check1">
					09.23<br><b>签到</b>
				</div>
				&nbsp&nbsp本月签到次数<br><b>&nbsp&nbsp0次</b>
			</div>
			<img src="icon/ad.png" id="img_ad"></img>
			<img src="icon/ad2.png" id="img_ad2"></img>
			<div id="div_visit">
				谁看过我
				<span class="span_debate_name">|我看过谁|被挡访客</span>
				<img src="icon/visit.png" id="img_visit"></img>
				<div class="div_visitnum">
					今日浏览<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 2
				</div>
				<div class="div_visitnum">
					总浏览<br>&nbsp2298
				</div>	
				<div class="div_visitnum">
					被挡访客<br>&nbsp&nbsp&nbsp&nbsp514
				</div>
			</div>
			<div id="div_gift">
				<b>礼物</b>
				<img src="icon/gift.png" id="img_gift"></img>
			</div>
			<div id="div_care">
				谁在意我
				<span class="span_debate_name">|我在意谁</span>
				<img src="icon/care.png" id="img_care"></img>
			</div>
		</div>
	</div>
	<div id="div_tail">
		<p>
			空间手机版|黄钻贵族|官方Qzone|QQ互联|腾讯课堂|
			腾讯文档|腾讯客服|QQ空间服务协议|
			Complaint&nbspGuidelines|粤文网[2017]6138-1456号
		</p>
		<p>Copyright&nbsp©&nbsp2005&nbsp-&nbsp2018
		&nbspTencent.All&nbspRights&nbspReserved.
		</p>
		<p>腾讯公司 版权所有</p>
	</div>
	<div id="div_float">
		<img src="icon/float.png" id="img_float"></img>
	</div>
</body>
<html>

CSS如下 

  <style>
             .div_top{
                     width:484.578px;
                     height:24px;
                     float:right;
                     margin-top:10px;
             }
             .div_middle{
                     width:995px;
                     height:132px;
                     float:right;
                     margin-top:200px;
                   
             }
             .div_body{
                     width:100%;
                     height:59px;
                     float:left;
             }
             .div_bodyin{
                     width:640px;
                     height:36px;
                     float:right;
                     margin-top:23px;
                     margin-right:650px;
             }
             .div_tail{
                     width:100%;
                     height:120px;
                     float:right;
                     margin-top:250px;
             }
             .div_tail2{
                     width:100%;
                     height:22px;
                     float:right;
                     margin-top:10px;
             }
             .div_menu{
                     width:26.5156px;
                     height:24px;
                     float:left;
                     font-size: 13px;
                     font-weight: 700;
                     line-height: 24px;
                     color:#333;
                     margin-left:20;
             }
             .div_icon1{
                      margin-right:300px;              
             }

        </style>

 

 

lbxxzt
关注
  • 23
    点赞
  • 踩
  • 102
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
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
html5qq空间代码作业,免费QQ空间背景代码大全(高手整理)
weixin_36078604的博客
06-05 1908
javascript:window.top.space_addItem(7,8980,0,0,0,1,0); 天星-白羊javascript:window.top.space_addItem(7,8974,0,0,0,1,0); 博爱-水瓶javascript:window.top.space_addItem(7,8032,0,0,0,1,0); 心心相应javascript:window.top...
html实现个人空间主页(附源码)
热门推荐
xcLeigh
11-10 1万+
html实现个人空间,html实现个人主页，html实现个人主页，酷炫的欢迎界面，科技感满满的主界面，优雅的屏幕待机界面。实现了个人日记管理功能，支持日记的添加，删除，修改，查看功能；实现了百度搜索功能，支持回车搜索；实现了常用工具链接管理功能，可以从界面上跳转到常用的工具；实现了个人的项目管理，通过项目地址跳转；实现了音乐播放，暂停，上一首，下一首，进度条，音量大小等功能，快来弄一款属于自己的个人空间,在个人空间里实现日常工作，日常学习管理。
QQ空间免费装扮的代码
Daimos的专栏
10-13 2239
空间技巧！！点装扮QQ空间，再把代码复制到地址栏，回车，然后点返回空间首页，再点保存，就OK啦！4.0版 夜光:javascript:window.top.space_addItem(1,7510,0,0,0,0,93); 最美的花:javascript:window.top.space_addItem(1,7513,0,0,0,0,93); 粉红花瓣:javascript:window.to
HTML +CSS制作QQ登录页面
Pythonfinish的博客
11-30 3174
Html,CSS,QQ，校园官网制作
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;}....
【Web网页设计制作-毕业设计期末大作业源码】(FZY265)qq空间日志大全触屏版自适应手机空间网站模板.zip
最新发布
05-10
Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web网页设计制作-毕业设计期末大作业源码 Web...
模拟QQ空间制作
06-05
在IT行业中，模拟QQ空间制作是一项有趣的项目，尤其适合初学者来提升自己的前端开发技能。QQ空间是中国最受欢迎的社交网络平台之一，它的界面设计和功能丰富多样，为用户提供了一个展示自我、互动交流的空间。在这里...
制作免费QQ空间.zip
03-16
总的来说，制作免费QQ空间涉及到多个IT领域的知识，包括前端开发、API调用、移动端开发、安全策略以及项目管理等多个方面。只有深入理解和掌握这些知识点，才能成功地创造出个性化的QQ空间。同时，持续学习和实践是...
jQuery仿QQ空间时间轴动画特效.zip
07-05
【jQuery仿QQ空间时间轴动画特效】是一种使用JavaScript库jQuery和HTML5技术创建的互动界面效果，它模拟了QQ空间中的时间线展示方式，让用户能够以动态、视觉吸引人的形式浏览一系列事件或信息。时间轴在网页设计...
在线DIY系统源码4.0最新版本
05-30
个性化定制商城/礼品商城系统，纪念册、照片书、相册、台历、挂历、扑克、明信片、LOMO卡、名片、T恤、杯子、海报等等均可实现在线DIY定制。
QQ制作网源码 v1.5.zip
07-05
QQ制作网源码是一个DIYQQ的小程序,纯属娱乐。请使用者仔细阅读免责条款。 它可以生成虚拟QQ资料卡图片、虚拟QQ视频聊天图片、QQ好友秀图片、QQ空间皮肤等等。 大家在填写完表格资料以后在登陆QQ的情况下可以CTRL ALT A屏幕截图保存在自己的QQ空间相册中。自己动手试试啦！ 请大家不要使用本站生成恶意图片、或者有任何诈骗等非法信息举动。本站概不负责。 上传源码，直接打开即可，config.asp为配置文件，可打开修改，无后台！   V1.5 ASP商业版不包更新和修复BUG！ V1.5外观没什么变动，只是修复了一个重要漏洞！     *修复排版错位BUG！ *优化网站页面，提升访问速度！ *优化MYSQL处理速度！ *优化后台操作，更快捷！ *修复网站兼容问题！ *增加生成提醒功能！ *修复了一个很重要的漏洞！（重要）
仿QQ空间的HTML编辑器
12-08
仿QQ空间的HTML编辑器，很不错的，仅供参考。
我的个人html主页源代码
12-19
我的个人html主页源代码我的个人html主页源代码我的个人html主页源代码我的个人html主页源代码我的个人html主页源代码
html 个人主页代码
06-01
自己做的 代码 这些代码都比较容易 理解！ 便于读者自己用来自学！
qq空间 用表格构建的html文件
06-27
QQ空间是中国最受欢迎的社交平台之一，用户可以在这里创建个人主页，分享生活点滴，与朋友互动。这个主题涉及的是如何使用HTML（超文本标记语言）来构建一个简单的QQ空间页面，特别是利用HTML表格来布局内容。对于...
qq空间个人档html代码,最新整理QQ空间全代码
weixin_32827751的博客
06-05 1369
代码为4月8日整理，全部可用，仓促之间，若有不足的请大家跟帖，心语会及时补上取小精灵不建议取掉，空间代码使用越多会卡，小精灵只有自己可以看到，所以建议大家不要加上那条代码改名字取原始导航gainover取自定义取滚动条修改背景图片日志透明代码全屏透明FLASh代码(此代码使用所有以SWF格式结尾的FLASH)免费黄钻火眼金睛空间上方的欢迎词代码top.hyl0vey0u=0;等号后面的0可以修改为...
qq空间可以上传html代码,100分！如何在博客或msn、qq空间里面添加html代码？
weixin_27943395的博客
06-09 228
不少朋友已经发现，MSN Space对HTML语言具有相当强大的支持能力。虽然处理日志时，MSN Space只提供给大家简单的几个文字处理功能，但如果你事先在网页编辑器中对文字图片作预先处理，那么通过简单的拷贝粘贴后便能让你的日志看上去更生动活泼。其实这些都是通过相应的页面语言实现的。大家也许觉得每次都得用网页编辑器处理这些简单的文字有点大材小用，而且在不同的操作页面转来转去很费神,那么我告诉大家...
我的第一个html网页（超精简的QQ空间）
Mr_Feng07007的博客
04-15 6769
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta...
Web前端设计与开发技术-课件-第7章制作表单页面完整.pptx
11-14
总之，本章内容详细介绍了Web前端设计与开发中制作表单页面的相关知识和技术，包括表单的基础知识、表单标签、表单对象、表单按钮以及通过上机练习实现的QQ登陆界面等。通过学习和实践，我们能够熟练应用这些知识和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值