今天给大家讲解一个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"> 九。</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">: 老大-征服陡山的女人</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">: 回复
<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">: 啥软件,把自己照这么白,我也要用</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">: 回复
<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">: 回复
<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">: 回复
<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">: 回复
<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">: 这是去哪了</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">: 回复
<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">: 好玩吗</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">: 回复
<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">: 厉害了我的老大</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">: 回复
<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>
  本月签到次数<br><b>  0次</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>       2
</div>
<div class="div_visitnum">
总浏览<br> 2298
</div>
<div class="div_visitnum">
被挡访客<br>    514
</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 Guidelines|粤文网[2017]6138-1456号
</p>
<p>Copyright © 2005 - 2018
 Tencent.All Rights Reserved.
</p>
<p>腾讯公司 版权所有</p>
</div>
<div id="div_float">
<img src="icon/float.png" id="img_float"></img>
</div>
</body>
<html>