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

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

前端---HTML QQ空间主页制作相关推荐

收集所有QQ空间模块制作软件大全
收集所有QQ空间模块制作软件大全 2011年06月09日 ★★★★★ 软件大小:300M 4 U4 p* r5 K! M* A* a G$ ~+ C4 K$ a. J+ ^' l+ @ 下载地址:ht ...
android写qq动态界面,Android_Android仿QQ空间主页面的实现，今天模仿安卓QQ空间，效果如 - phpStudy...
Android仿QQ空间主页面的实现今天模仿安卓QQ空间,效果如下: 打开程序的启动画面和导航页面我就不做了,大家可以模仿微信的那个做一下,很简单.这次主要做一下主页面的实现,下面是主页面的布局: ...
android仿qq动态,Android仿QQ空间主页面的实现
今天模仿安卓QQ空间,效果如下: 打开程序的启动画面和导航页面我就不做了,大家可以模仿微信的那个做一下,很简单.这次主要做一下主页面的实现,下面是主页面的布局: android:layout_widt ...
Android自定义控件：打造自己的QQ空间主页
前面已经实现过仿QQ的List抽屉效果以及仿QQ未读消息拖拽效果,具体请见: Android自定义控件:类QQ抽屉效果 Android自定义控件:类QQ未读消息拖拽效果趁热打铁,这次我们实现QQ空间 ...
html怎么做qq空间主页,QQ空间首页布局
html> QQ空间首页布局 body,ul,li{ margin: 0; padding: 0; } body{ margin: 0px; padding: 0px; background-c ...
QQ空间背景音乐制作（经典！！！）
很多网友都想设置空间背景音乐,可是没有开绿装肿么办,绿装每个月都得都得十元钱,太浪费钱了,可是又想像别人那么炫酷的背景,这里推荐一个可行的方法,就是在网上要有自己的服务器空间,可是买一个服务器空间一年 ...
增强QQ空间的统计功能
今日,看了一下Yahoo的统计系统,发现,可以他们可以通过图片来统计网站流量信息.下面是使用方法: 首先,使用你的Yahoo帐户登陆Yahoo统计http://tongji.cn.yahoo.com/ ...
再谈目前QQ空间主流的赚钱方法
重点导读同样是腾讯旗下的产品,QQ空间和微信,这两个在今年都得到了重视,各种微信营销培训和QQ空间流量培训,满天飞,让很多新手朋友眼花缭乱.在这里我就说下,用QQ空间来获取人民币.因为QQ空间流量 ...
QQ空间排名实战方法
我们有时会不会看到一个还是比较热的关键词百度排名第一的竟然是个QQ空间,当时也是很是惊讶的,空间也可以参与排名,简直太逆天了,如果我的空间也能参与排名,那不是也可以做一些事情出来吗?这就是上海seo频 ...

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

前端---HTML QQ空间主页制作相关推荐

最新文章

热门文章