HTML制作qq空间主页

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

这就是我的空间主页了。


<!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="data:images/logo.jpg"  /></div><div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="data:images/logo.jpg"  /></div><div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="data:images/logo.jpg"  /></div><div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="data:images/logo.jpg"  /></div><div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="data:images/logo.jpg"  /></div><div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="data:images/logo.jpg"  /></div><div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="data:images/logo.jpg"  /></div><div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="data:images/logo.jpg"  /></div><div style="float:left;width:150px;height:150px;margin-top:2%;margin-left:2%;"  ><img height=150 width=150 src="data: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套用过去即可。

HTML制作qq空间主页相关推荐

前端---HTML QQ空间主页制作
今天给大家讲解一个qq空间主页制作的讲解,我们先来看代码和示意图: 代码如下: <html> <head><title>QQ空间制作练习</title> ...
android写qq动态界面,Android_Android仿QQ空间主页面的实现，今天模仿安卓QQ空间，效果如 - phpStudy...
Android仿QQ空间主页面的实现今天模仿安卓QQ空间,效果如下: 打开程序的启动画面和导航页面我就不做了,大家可以模仿微信的那个做一下,很简单.这次主要做一下主页面的实现,下面是主页面的布局: ...
前端----HTML 制作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空间背景音乐学了这么就的计算机了,教大家一点实际的计算机技术... 关于QQ空间的背景音乐制作... 使用我的这种方法,以后就再也不用去百度跪求某歌曲QQ空间音乐链接,只要是自己喜欢的歌 ...
增强QQ空间的统计功能
今日,看了一下Yahoo的统计系统,发现,可以他们可以通过图片来统计网站流量信息.下面是使用方法: 首先,使用你的Yahoo帐户登陆Yahoo统计http://tongji.cn.yahoo.com/ ...
再谈目前QQ空间主流的赚钱方法
重点导读同样是腾讯旗下的产品,QQ空间和微信,这两个在今年都得到了重视,各种微信营销培训和QQ空间流量培训,满天飞,让很多新手朋友眼花缭乱.在这里我就说下,用QQ空间来获取人民币.因为QQ空间流量 ...
QQ空间排名实战方法
我们有时会不会看到一个还是比较热的关键词百度排名第一的竟然是个QQ空间,当时也是很是惊讶的,空间也可以参与排名,简直太逆天了,如果我的空间也能参与排名,那不是也可以做一些事情出来吗?这就是上海seo频 ...

HTML制作qq空间主页

HTML制作qq空间主页相关推荐

最新文章

热门文章