前端----HTML 制作QQ空间练习

先上效果图:

主要针对布局和样式调整做练习,没有实现各个连接的点击效果,做完以后还发现有一些缺陷,

比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考QQ空间右下角的浮标做法修改就可以了

就是这个浮标,一直保持在屏幕上,顶部条同理,position: fixed;后直接设置right和bottom距离就可以了,位置会自动跟随浏览器边框及时调整,做出返回顶部的点击效果其实也很简单,设置锚点和a连接就行,这次的重点不在这里也就没有实现

都是很基础的东西,只不过比较繁琐,细心和耐心就够了,其中碰到一些没见过的小功能我也写了博客记录,比如

怎么修改placeholder的字体颜色,,

怎么设置元素单边框

块元素快速居中的方法(比如顶部条内容保持居中)

相对定位绝对定位问题(position元素用法)

等等吧,都在我的博客里记录了下来https://blog.csdn.net/q5706503

这次练习收获还是很多的, 能感觉到做网页整体流畅了很多,

欢迎大家互相学习,共同进步

最后附上源代码,HTML和CSS是分开的,注意一下哦(图片资源没有上传,有些不方便,有想要的再联系我吧):

CSS写的有些啰嗦,HTML层次过多,这些需要大量练习才能解决,欢迎指正!

<!DOCTYPE html>
<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>

body{background-color:rgba(0, 0, 0, 0);color:rgb(64, 62, 59);margin:0;font-size: 12px;font-family: Tahoma;
}
img{vertical-align:top;
}
ul{margin:0;padding:0;
}
#container_head{color: #fff;;width:100%;background-color:#a6926c;height: 41px;
}
#div_head{height:41px;width:1038px;margin:0 auto;position:relative;
}
#div_head_qqZone{overflow: hidden;float:left;height:41px;font-size:18px;line-height:41px;font-family:punctuation;
}
img.head_menu{height:41px;
}
div.head_menu{font-size: 12px;line-height:40px;float:left;
}
.menu_right{float:right !important;
}
#input_search{padding-left:5px;padding-right:25px;background-color:rgba(255,255,255,.25);height:19px;width:105px;border:0;margin-top:10px;margin-left:8px;margin-right:5px;
}
input::-webkit-input-placeholder{color:#eeeeee;font-size:12px;
}
#img_search{position:absolute;height:20px;top:10px;right:165px;
}
#img_signal{height:41px;position:absolute;right:10px;top:0;
}
#div_body{height: 2000px;width:100%;position:relative;margin:0 auto;width:1046px;
}
#div_body_top{height:190px;width:1038px;margin:0 auto;color:#8c8262;
}
#span_nine{font-size:20px;line-height:86px;margin-right:10px;
}
#img_apple{width:60px;
}
#img_zan{width:80px;float:right;
}
#div_empty{width:125px;height:105px;clear:both;float:left;margin-right:15px;
}
#span_nine1{float:left;display:block;font-size:20px;line-height:40px;margin-top:53px;
}
#img_kaitong{float:left;width:123px;margin-top:52px;
}
#img_watch{float:right;width:240px;margin-top:30px;
}
#div_body_menu{height:50px;width:1046px;margin:0 auto;position:relative;margin-bottom:20px;
}
#img_bigicon{float:left;position:absolute;left:0;width:128px;bottom:20px;
}
.li_menu{list-style: none;float:left;color:black;line-height:50px;font-size:14px;text-align: center;width:65px;
}
#div_body_left{float:left;width:170px;height:1017px;margin-left:4px;margin-right:23px;
}#div_body_mid{width:590px;height:1700px;float:left;position:relative;
}
#div_body_right{width:230px;height:1300px;float:right;margin-right:4px;
}
#div_leftmenu{width:168px;height:278px;background-color:#f8f6f2;border:1px;maegin-bottom:12px;border-color: rgb(212, 206, 190);border-style: solid;background-image: url(icon/back_leftmenu.png);background-size:168px;background-repeat:no-repeat;
}.li_leftmenu{list-style:none;height:36px;width:126px;padding-left:43px;line-height:35px;
}
.li_deepcolor{background-color:#e6e1d3;margin-top:3px;background-image: url(icon/back_friend.png);background-size:168px;background-repeat:no-repeat;
}
#input_write{width:588px;height:65px;border:1px;border-color:rgb(212, 206, 190);border-style:solid;margin-bottom:15px;
}
#img_photo{height:67px;position:absolute;top:1px;right:1px;
}
#span_dongtai{background-image:url(icon/back_dongtai.png);width:575px;height:44px;display:block;line-height:40px;font-size:13px;padding-left:17px;background-size:570px;border-bottom:1px solid rgb(212, 206, 190);
}
#img_icon1{width:57px;margin-left:16px;
}
.div_shuoshuo{position:relative;width:592px;height:1410px;background-color:#f8f6f2;
}
#img_shuoshuo_next{position:absolute;top:0;right:0;width:50px;
}
#span_name{font-size:15px;line-height:55px;
}
#span_time{position:absolute;left:78px;top:42px;color:#99958d;font-size:13px;
}
#p_shuoshuo{margin-left:14px;font-size:15px;margin-top:0;
}
#img_photoes{margin-left:14px;width:563px;height:563px;
}
#div_dianzan{padding-left:14px;padding-right:14px;font-size:13px;line-height:40px;  color:#99958d;border-bottom:1px solid rgb(212, 206, 190);
}
#img_dianzan{float:right;height:40px;
}
#div_names{padding-left:14px;padding-right:14px;color:#8c8262;font-size:13px;
}
#img_hand{height:20px;
}
.img_icon1{height:35px;margin-right:10px;margin-top:10px;
}
.div_debate{padding-left:14px;padding-right:14px;position:relative;
}
.span_debate_name{color:#8c8262;font-size:13px;line-height:30px;
}
.span_debate_time{position:absolute;left:51px;top:23px;color:#99958d;font-size:13px;
}
.div_redebate{padding-left:14px;padding-right:14px;margin-left:40px;position:relative;
}
#div_check{width:228px;height:68px;border:1px solid rgb(212, 206, 190);margin-bottm:12px;color:#8c8262;line-height:30px;background-color:#f8f6f2;
}
#div_check1{width:66px;height:68px;padding-left:6px;padding-right:6px;background-color:#d4cebe;float:left;
}
#div_check b{font-size:18px;
}
#img_ad{height:120px;width:220px;padding:4px;border:1px solid rgb(212, 206, 190);margin-bottom:10px;
}
#img_ad2{height:150px;width:220px;padding:4px;border:1px solid rgb(212, 206, 190);margin-bottom:10px;
}
#div_visit{height:441px;width:219px;padding-left:9px;border:1px solid rgb(212, 206, 190);margin-bottom:12px;line-height:50px;background-color:#f8f6f2;}
#img_visit{width:210px;border-bottom:1px solid rgb(212, 206, 190);
}
.div_visitnum{line-height:30px;float:left;width:73px;
}
#div_gift{height:256px;width:219px;padding-left:9px;border:1px solid rgb(212, 206, 190);margin-bottom:12px;line-height:50px;background-color:#f8f6f2;
}
#img_gift{width:200px;
}
#div_care{height:230px;width:219px;padding-left:9px;border:1px solid rgb(212, 206, 190);margin-bottom:12px;line-height:50px;background-color:#f8f6f2;
}
#img_care{width:200px;
}
#div_tail{height: 75px;position:relative;width:100%;padding-top: 25px;text-align: center;font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";font-size: 12px;color: #403e3b;
}
#div_tail>p{margin:0;line-height: 1.8em;
}
#div_float{position: fixed;right: 20px;bottom: 20px;font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";line-height: 1.334;font-size: 12px;width:47px;height:93px;border:1px solid rgb(212, 206, 190);margin-bottom:12px;line-height:50px;background-color:#f8f6f2;
}
#img_float{margin-left:1px;margin-top:1px;width:45px;
}

关于图片啥的里边找吧

链接: https://pan.baidu.com/s/1bvovdPEARXgxwuhpJLxiEQ

密码: bd7n

前端----HTML 制作QQ空间练习相关推荐

web前端学习--仿QQ空间留言板功能
主要技术要点: css:利用position属性和margin属性实现基本布局. jq/js:留言板功能使用prepend实现最新的留言在顶部显示. 其中易出错的地方已经在源代码中有注释了,欢迎大家批 ...
QQ空间背景音乐链接制作
自主制作QQ空间背景音乐学了这么就的计算机了,教大家一点实际的计算机技术... 关于QQ空间的背景音乐制作... 使用我的这种方法,以后就再也不用去百度跪求某歌曲QQ空间音乐链接,只要是自己喜欢的歌 ...
前端---HTML QQ空间主页制作
今天给大家讲解一个qq空间主页制作的讲解,我们先来看代码和示意图: 代码如下: <html> <head><title>QQ空间制作练习</title> ...
前端做微信好友分享_前端微信分享，调用微信分享，分享朋友圈，分享微信好友，分享qq空间，qq好友...
项目中很多使用到微信分享的地方,对于前端来说也算很简单了,建议写该功能时使用微信调试工具,便于调试,直接上代码第一步,引入微信配置文件 //这里的AJAX用于获取后台数据,当然也可以不用这么写,您只 ...
【web前端优化之图片模糊到清晰】看我QQ空间如何显示相片
此篇文章估计不会太长,有移除首页的风险,但是老夫(称老夫是因为我们真正的叶小钗其实都100多岁啦)是不会怕滴.所以,我来了哟! 题外话:今天我们一起还看了一道前端的面试题,而后我本来还想多找几道来做做 ...
qq空间相册查看器_教你用微信把自己的照片制作成音乐相册，模板多，操作又简单...
还有一个多月就过年了.过年大家都会拍许多照片,有许多朋友都有将照片制作成电子相册的习惯,给我们的照片再添加上好听的音乐,炫酷的字幕等等,等几个月,几年后,再和大家一起观看这些音乐相册,回忆过去发生的点 ...
QQ空间首页模仿制作——HTML布局练习
为了我们拥有更加扎实的前端基础,我建议大家仅将我的代码作为参考,自己练一练会更好,话不多说,下边是效果图跟代码: 效果: QQZone.html: <!DOCTYPE html> < ...
qq空间制作常用软件
qq空间制作常用软件 2010年03月24日 Macromedia Flash V8.0 简体中文版完全版 Flash是交互式矢量图和Web动画的标准.网页设计者使用Flash能创建漂亮的.可改变尺寸 ...
PHP怎么做成Qq空间相册,qq空间如何上传本地视频相片制作视频传到QQ空间
相信很多网友都有上传QQ空间照片的喜好,我就是其中一个,拍了一张漂亮的PP,恨不得马上传到空间,炫耀一番.上传的照片日积月累,越来越多.平常要一张张的观看照片挺费时.最近学了一个新招,可以使用狸窝照片 ...

前端----HTML 制作QQ空间练习

前端----HTML 制作QQ空间练习相关推荐

最新文章

热门文章