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

其他 2018-10-05 21:45:47 阅读次数: 0

今天给大家讲解一个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>

猜你喜欢

转载自blog.csdn.net/weixin_42504145/article/details/82861388
今日推荐
美国拟限制 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