QQ空间首页模仿制作—

为了我们拥有更加扎实的前端基础，我建议大家仅将我的代码作为参考，自己练一练会更好，话不多说，下边是效果图跟代码：

效果：

QQZone.html:

<!DOCTYPE html>
<html><head><title>我的QQ空间</title><link type="text/css" rel="stylesheet" href="QQZone.css"/></head><body><div class="div_top"><div class="top_menu"><div class="top_1"></div><div class="top_2" style="margin-left:10px;"><i style=" background-position: -452px -52px;"></i><span>个人中心</span></div><div class="top_2" style="width:101px;"><i style=" background-position: -452px -104px;"></i><span>我的主页</span></div><div class="top_2" style="width:77px;"><i  style=" background-position: -452px -78px;"></i><span>好友</span></div><div class="top_2" style="width:77px;"><i  style=" background-position: -452px -130px;"></i><span>游戏</span></div><div class="top_2"   style="width:77px;"><i  style=" background-position: -452px -156px;"></i><span>装扮</span></div><div class="music"><div class="music_left"><i style=" background-position: -452px -208px;margin:2px;"></i></div><div class="music_right"><i></i></div></div><div class="div_input"><input type="text" placeholder="  用户/游戏/动态"/><i></i></div><div class="img_info"><div class="imglogo"><img style="width:24px;height:24px;border-radius: 2px;" src="data:images/30.jpg" alt="您的头像"></div><div class="userinfo"><span style="margin-left:0;">还有童心的成年人</span></div></div>    <div class="shareImg"><i style=" background-position: -452px -286px;margin-top:13px;margin-left:10px;"></i></div><div class="shareImg"><i style=" background-position: -452px -312px;margin-top:13px;margin-left:14px;"></i></div><div class="diamonds"></div></div></div><div class="bottom"><div class="bottom_info"><div class="user_bottom"><div class="name"><span>无奈丶看花落  悲</span></div></div><div class="fabulous"><i style=" background-position: -451px 0;"></i><span class="num">1</span></div><div class="userImg"><img style="width:120px;height:120px;border-radius: 2px;margin:4px;" src="data:images/100.jpg" alt="您的头像"></div><div class="userImg_right"><div class="userImg_right_top"><span style="margin-left:0;">还有童心的成年人</span></div><div class="userImg_right_down"><div class="userImg_right_down_1"><img width=40 height=40 src="data:images/8.png"/></div><div></div><div></div><div></div></div></div><div class="info_menu"><div class="menu_1" style="margin-left:150px;">主页</div><div class="menu_1">日志</div><div class="menu_1">相册</div><div class="menu_1" style="width:72px;">留言板</div><div class="menu_1">说说</div><div class="menu_1" style="width:72px;">个人档</div><div class="menu_1">音乐</div><div class="menu_1">更多</div></div></div><div class="bottom_block"><div class="bottom_left"><div class="bottom_left_1"><div class="bottom_left_1_list"><i style="background-position: -478px -312px;"></i><div class="bottom_left_1_list_text" style="font-weight: bold;"><a>好友动态</a></div></div><div class="bottom_left_1_list"><i style="background-position: -166px -52px;"></i><div class="bottom_left_1_list_text"><a>特别关心</a></div></div><div class="bottom_left_1_list"><i style="background-position: -192px -104px;"></i><div class="bottom_left_1_list_text"><a>与我相关</a></div></div><div class="bottom_left_1_list"><i style="background-position: -530px -130px;"></i><div class="bottom_left_1_list_text"><a>空间达人</a></div></div><div class="bottom_left_1_list"><i style="background-position: -348px -312px;"></i><div class="bottom_left_1_list_text"><a>那年今日</a></div></div><div class="bottom_left_1_list"><i style="background-position: -530px -182px;"></i><div class="bottom_left_1_list_text"><a>腾讯课堂</a></div></div><div class="bottom_left_1_list"><i style="background-position: -504px -234px;"></i><div class="bottom_left_1_list_text"><a>游戏应用</a></div></div><div class="bottom_left_1_list"><i style="background-position:-530px 0;"></i><div class="bottom_left_1_list_text"><a>我的收藏</a></div></div></div><div class="bottom_left_1" style="margin-top:20px;"><div class="bottom_left_1_list"><i style="background-position: -478px -312px;"></i><div class="bottom_left_1_list_text" style="font-weight: bold;"><a>好友动态</a></div></div><div class="bottom_left_1_list"><i style="background-position: -166px -52px;"></i><div class="bottom_left_1_list_text"><a>特别关心</a></div></div><div class="bottom_left_1_list"><i style="background-position: -192px -104px;"></i><div class="bottom_left_1_list_text"><a>与我相关</a></div></div><div class="bottom_left_1_list"><i style="background-position: -530px -130px;"></i><div class="bottom_left_1_list_text"><a>空间达人</a></div></div><div class="bottom_left_1_list"><i style="background-position: -348px -312px;"></i><div class="bottom_left_1_list_text"><a>那年今日</a></div></div><div class="bottom_left_1_list"><i style="background-position: -530px -182px;"></i><div class="bottom_left_1_list_text"><a>腾讯课堂</a></div></div><div class="bottom_left_1_list"><i style="background-position: -504px -234px;"></i><div class="bottom_left_1_list_text"><a>游戏应用</a></div></div><div class="bottom_left_1_list"><i style="background-position:-530px 0;"></i><div class="bottom_left_1_list_text"><a>我的收藏</a></div></div></div></div><div class="bottom_middle"><div class="bottom_middle_top"><div class="bottom_middle_top_input"><a style="line-height:30px;margin-left:9px;"> 说点儿什么吧</a></div><div class="camera"><i style="background-position: -192px -260px;"></i></div><div class="camera" style="margin-left:0px;"><i style="background-position:-192px -312px;"></i></div></div><div class="bottom_middle_2"><div class="bottom_middle_2_1"><a style="line-height:30px;margin-left:9px;">全部动态</a></div><div class="bottom_middle_2_2"><i style="background-position:-192px -52px;"></i></div><div class="bottom_middle_2_3"><i style="background-position:-608px 0;margin-top:11px;"></i></div><div class="bottom_middle_2_4"><i style="background-position:-608px -52px;margin-top:11px;"></i></div></div><div class="context" style="margin-top:0;"></div><div class="context"></div></div><div class="bottom_right"></div></div></div></body>
</html>

QQZone.css:

body{margin:0;background-image:url(images/bg.jpg);background-repeat: repeat;
}.div_top{width:100%;height:40px;background-color:#221d3b;margin:0 auto;position:fixed;z-index:100;
}.top_menu{width:1046px;height:40px;margin:0 auto;line-height: 39px;color:#aca3cc;
}.top_1{width:92px;height:41px;background-image: url(images/4.png);background-size: 575px 41px;background-position: 0 0;overflow: hidden;line-height: 123px;background-repeat:no-repeat;float:left;
}.top_2{width:91px;height:41px;float:left;
}.top_menu span{font-size:12px;cursor: pointer; margin-left:31px;
}.top_menu i{width: 16px;height: 16px;position: absolute;margin-left: 8px;margin-top: 13px;background-image: url(images/1.png);background-size: 632px 388px;
}.music{height: 40px;width: 67px;float:left; margin-left: 126px;
}.music_left{height: 20px;width: 22px;background-color:#362e5c;float:left;margin-top:11px;cursor: pointer;
}.music_right{height: 20px;width: 27px;background-color:#362e5c;float:left;margin-left:1px;margin-top:11px;cursor: pointer;
}.music_right i{background-image: url(images/2.gif);background-size: 15px 10px;background-repeat:no-repeat;margin:5px;
}.div_input{width:142px;height:40px;float:left;
}
.div_input input{border-radius: 2px;height: 18px;width:135px;border: none;background-color: rgba(255,255,255,.25);font-size: 12px;color:#aca3cc;
}
.div_input i{background-position: -452px -364px;margin-top:13px;margin-left:-20px;cursor: pointer;
}.img_info{height: 40px;width: 95px;float:left; cursor: pointer;
}
.imglogo{height: 24px;width: 32px;float:left;margin-left: 6px;margin-top: 7px;cursor: pointer;
}.shareImg{width:26px;height:41px;float:left;cursor: pointer;
}.diamonds{width:26px;height:29px;float:left;background-repeat:no-repeat;background-image: url(images/3.gif);background-size: 22px 19px;margin-top: 12px;margin-left: 13px;cursor: pointer;
}.bottom{width:100%;height:1400px;margin-top: 40px;float: left;
}.userinfo{height: 40px;width: 50px;margin-left:3px;float:left;display: inline-block;white-space: nowrap;word-wrap: normal;overflow: hidden;text-overflow: ellipsis;max-width: 100%;cursor: pointer;
}.bottom_info{width:1046px;height:260px;margin:0 auto;
}.user_bottom{width:279px;height:38px;margin-top:20px;float:left;
}.name{width:205px;height:38px;float:left;line-height: 38px;font-size: 28px;color:#aca3cc;
}.fabulous{width:58px;height:32px;margin-left: 700px;border-radius: 18px;margin-top: 50px;background-color: rgba(0,0,0,.4);float: left;
}.fabulous i{width: 16px;height: 16px;position: absolute;margin-left: 8px;margin-top: 8px;background-image: url(images/4.png);background-size: 575px 41px;
}.num{color:#fff;margin-left: 32px;margin-top: 13px;line-height: 30px;
}.userImg{width: 128px;height: 128px;background-color:#fff;float: left;margin-top: 10px;
}.userImg_right{width: 379px;height: 99px;float: left;margin-left:15px;margin-top: 10px;font-family: punctuation,"PingFangSC-Regular","Microsoft Yahei","sans-serif";
}.userImg_right_top{width: 379px;height: 27px;
}
.userImg_right_top span{width: 145px;height: 26px;margin-left:3px;float:left;display: inline-block;white-space: nowrap;word-wrap: normal;overflow: hidden;text-overflow: ellipsis;max-width: 100%;cursor: pointer;color: #a68dd9;font-size: 20px;
}
.userImg_right_down{width: 379px;height: 62px;margin-top:9px;
}.info_menu{width: 1046px;height: 50px; position: relative;margin-top: -30px;color: #ccc7d9;float:left;
}.menu_1{width:58px;height:50px;line-height:50px;font-size: 14px;text-align:center;float:left;cursor: pointer;
}.userImg_right_down_1{float:left;width:40px;height:40px;
}.bottom_block{width:1038px;height:900px;margin:0 auto;
}.bottom_left{width:170px;height:600px;float:left;
}.bottom_left_1{width:170px;height:300px;background-color:#403366;border-radius:4px;
}.bottom_left_1_list{width:170px;height:37px;border-radius:2px;
}.bottom_left i{background-image: url(images/1.png);background-repeat:no-repeat;position: absolute;background-size: 632px 388px;width:16px;height:16px;margin-left:18px;margin-top:13px;float:left;
}.bottom_left_1_list_text{color: #ccc7d9;width:126px;height:35px;line-height:42px;margin-left:44px;font-size:12px;float:left;margin-top:1px;
}.bottom_middle{width:592px;height:800px;margin-left:23px;float:left;
}.bottom_middle i{background-image: url(images/1.png);background-repeat:no-repeat;position: absolute;background-size: 632px 388px;width:24px;height:24px;margin-left:11px;margin-top:22px;float:left;
}.bottom_middle_top{width:592px;height:70px;color: #827a99;font-size:14px;background-color:#473a6e;
}.bottom_middle_top_input{width:443px;height:68px;float:left;
}.camera{width:48px;height:68px;float:left;margin-left:50px;background-color: #3b2f61;border:0.5px solid #352a54;
}.bottom_middle_2{width:591px;height:45px;float:left;background-color: #3b2f61;margin-top:13px;border:0.5px solid #2e244f;
}.bottom_middle_2_1{width:66px;height:35px;float:left;color: #ccc7d9;font-weight: 700;font-size:14px;line-height:35px;margin-top:5px;
}.bottom_middle_2_2{float:left;width:10px;height:10px;
}.bottom_middle_2_3{float:left;width:24px;height:24px;margin-left:420px;
}.bottom_middle_2_4{float:left;width:24px;height:24px;margin-left:20px;
}.context{width:591px;height:300px;background-color: #3b2f61;margin-top:13px;float:left;
}.bottom_right{width:230px;height:600px;background-color:#bbb;margin-left:23px;float:left;
}

图片（由于图片没法在这放，我直接把代码包放网盘上了）：https://pan.baidu.com/s/1nIm5AcqvF1-wjL8-Wyuaiw

其中有很多小图标，但是图片就那么几张，原因是为什么呢，这是因为他用一张图当背景图，通过"background-position"这个属性，详解请看我的上一篇博客：https://blog.csdn.net/qq_39429962/article/details/82833861

QQ空间首页模仿制作——HTML布局练习相关推荐

html怎么做qq空间主页,QQ空间首页布局
html> QQ空间首页布局 body,ul,li{ margin: 0; padding: 0; } body{ margin: 0px; padding: 0px; background-c ...
QQ空间背景音乐链接制作
自主制作QQ空间背景音乐学了这么就的计算机了,教大家一点实际的计算机技术... 关于QQ空间的背景音乐制作... 使用我的这种方法,以后就再也不用去百度跪求某歌曲QQ空间音乐链接,只要是自己喜欢的歌 ...
QQ空间排名实战方法
我们有时会不会看到一个还是比较热的关键词百度排名第一的竟然是个QQ空间,当时也是很是惊讶的,空间也可以参与排名,简直太逆天了,如果我的空间也能参与排名,那不是也可以做一些事情出来吗?这就是上海seo频 ...
10000多个QQ空间透明flash素材大观园
以下素材全部来自中国flash在线:http://www.flashline.cn 分类清晰明了,方便大家找到您喜欢的素材 ·端午节专题透明flash素材:http://www.flashline.c ...
c语言50行以内特效代码,QQ空间特效代码
qq空间代码特效: 在qq空间首页选择自定义,再点建立新模块,然后把代码写在"评论"这一栏里,其他的可以全部不填.可以参考里QQ空间图片代码里的使用说明,是一样的. 在把代码复制到 ...
移动开发—详解flex布局之携程网首页案例制作
移动开发-详解flex布局之携程网首页案例制作学习内容一.flex的布局原理二.flex布局父项常见的属性三.flex布局子项常见的属性四.携程网首页案例制作一.flex的布局原理总结f ...
前端----HTML 制作QQ空间练习
先上效果图: 主要针对布局和样式调整做练习,没有实现各个连接的点击效果,做完以后还发现有一些缺陷, 比如最上边的条框应该是跟随屏幕的,我做成了静态的,不过也不难实现,参考QQ空间右下角的浮标做法修改就 ...
2022-01-13 微信小程序-简历小项目(一) 小程序中的flex布局,简历首页的制作,箭头区域的制作
文章目录一.准备 1.目标 2.小程序中的flex布局回顾flex布局小程序中要把div换成view标签,别的不变二.制作简历小程序-首页 1.利用小程序提供的独有的API来初始化高和宽小程 ...
ios 仿电脑qq登录界面_iOS开发UI篇—模仿ipad版QQ空间登录界面
iOS开发UI篇-模仿ipad版QQ空间登录界面一.实现和步骤 1.一般ipad项目在命名的时候可以加一个HD,标明为高清版 2.设置项目的文件结构,分为home和login两个部分 3.登陆界面的 ...

QQ空间首页模仿制作——HTML布局练习

QQ空间首页模仿制作——HTML布局练习相关推荐

最新文章

热门文章