admin管理员组文章数量:1568305
为了我们拥有更加扎实的前端基础，我建议大家仅将我的代码作为参考，自己练一练会更好，话不多说，下边是效果图跟代码：
效果：
QQZone.html:
<!DOCTYPE html>
<html>
<head>
<title>我的QQ空间</title>
<link type="text/css" rel="stylesheet" href="QQZone.css"/>
</head>
<body>
<div >
<div >
<div ></div>
<div style="margin-left:10px;">
<i style=" background-position: -452px -52px;"></i>
<span>个人中心</span>
</div>
<div style="width:101px;">
<i style=" background-position: -452px -104px;"></i>
<span>我的主页</span>
</div>
<div style="width:77px;">
<i style=" background-position: -452px -78px;"></i>
<span>好友</span>
</div>
<div style="width:77px;">
<i style=" background-position: -452px -130px;"></i>
<span>游戏</span>
</div>
<div style="width:77px;">
<i style=" background-position: -452px -156px;"></i>
<span>装扮</span>
</div>
<div >
<div >
<i style=" background-position: -452px -208px;margin:2px;"></i>
</div>
<div >
<i></i>
</div>
</div>
<div >
<input type="text" placeholder=" 用户/游戏/动态"/>
<i></i>
</div>
<div >
<div >
<img style="width:24px;height:24px;border-radius: 2px;" src="images/30.jpg" alt="您的头像">
</div>
<div >
<span style="margin-left:0;">还有童心的成年人</span>
</div>
</div>
<div >
<i style=" background-position: -452px -286px;margin-top:13px;margin-left:10px;"></i>
</div>
<div >
<i style=" background-position: -452px -312px;margin-top:13px;margin-left:14px;"></i>
</div>
<div ></div>
</div>
</div>
<div >
<div >
<div >
<div >
<span>无奈丶看花落 悲</span>
</div>
</div>
<div >
<i style=" background-position: -451px 0;"></i>
<span >1</span>
</div>
<div >
<img style="width:120px;height:120px;border-radius: 2px;m版权声明：本文标题：QQ空间首页模仿制作——HTML布局练习 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1726185570a1059484.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论