注意事项:
1.先布局,后操作;
2.合理使用clear清除悬浮;
3.发表说说的文字框使用<textarea.../>更合理,为了使文字定位到左上角输入,标签中间不得有空格
效果图:
源码:
<!DOCTYPE html>
<html>
<head>
<title>Qzone</title>
<meta charset="utf-8" />
<link href="images/qq.ico" rel="shortcut icon" type="image/x-icon">
<style>
.header{
width:100%;
height:40px;
background-color:#400929;
color:#DDA3CC;
font-size:12px;
}
.title{
width:100%;
height:180px;
padding:10px;
}
.body{
width:100%;
}
</style>
</head>
<body style="margin:0;">
<!-- 头部-->
<div class="header">
<div style="float:left; margin-left:15%;padding:5px;"><img src="images/空间星.jpg" alt="QQ空间" /></div>
<div style="float:left; padding:5px;padding-left:1%;line-height:30px;">
<div style="float:left;"><img src="images/小人头.jpg" alt="小人头" /></div>
<div style="float:left;">个人中心</div>
</div>
<div style="float:left; padding:5px;padding-left:0.5%;line-height:30px;">
<div style="float:left;"><img src="images/空间主页.jpg" alt="空间主页" /></div>
<div style="float:left;">我的主页</div>
<div style="float:left;"><img src="images/向下箭头.jpg" alt="向下箭头" /></div>
</div>
<div style="float:left;padding:5px;padding-left:0.5%;line-height:30px;">
<div style="float:left;"><img src="images/好友头.jpg" alt="好友头" /></div>
<div style="float:left;">好友</div>
<div style="float:left;"><img src="images/向下箭头.jpg" alt="向下箭头" /></div>
</div>
<div style="float:left; padding:5px;padding-left:0.5%; line-height:30px;">
<div style="float:left;"><img src="images/游戏.jpg" alt="游戏" /></div>
<div style="float:left;">游戏</div>
<div style="float:left;"><img src="images/向下箭头.jpg" alt="向下箭头" /></div>
</div>
<div style="float:left; padding:5px;padding-left:0.5%;line-height:30px;">
<div style="float:left;"><img src="images/装扮.jpg" alt="装扮" /></div>
<div style="float:left;">装扮</div>
<div style="float:left;"><img src="images/向下箭头.jpg" alt="向下箭头" /></div>
</div>
<div style="float:left; padding:9px;padding-left:35%;line-height:15px;">
<div style="float:left;">
<form action="" method="get">
<input type="text" id="search" name="search" value="用户/游戏/动态" style="border-top-left-radius:3px;
border-bottom-left-radius:3px; height:18px; color:#B2819E;background-color:#71475F;
border:1px solid #71475F" />
</form>
</div>
<div style="float:left;">
<img src="images/放大镜.jpg" alt="放大镜" style="border-top-right-radius:3px;
border-bottom-right-radius:3px;" />
</div>
</div>
</div>
<!-- 头像区域-->
<div class="title">
<div style="clear:both;"></div>
<div style="width:100%;color:#954B6C;">
<div style="width:25%;margin-left:15%;padding:5px;float:left;">
<div style="float:left;clear:both;"><span style="font-size:30px;font-weight:900; " >∑煙鬼⊙→硕的空间</span></div>
<div style="float:left;margin-top:18px;margin-left:8%;"><img src="images/苹果.jpg" alt="苹果" /></div>
<div style="float:left;margin-top:8px;margin-left:8%;"><img src="images/徽章.jpg" alt="徽章" /></div>
<div style="clear:both;"><span style="font-size:15px;font-weight:400; " >\(^o^)/ 超好玩!!!!</span></div>
</div>
<div style="width:5%;background-color:#939393;color:white; border-radius:15px;float:left;margin-left:35%;margin-top:30px;">
<img src="images/拇指.jpg" alt="拇指" style="margin-left:15px;margin-top:5px;" />
<span style="font-size:25px;font-weight:400; margin-left:5px;" >3</span>
</div>
</div>
<div style="clear:both;"></div>
<div style="width:100%;">
<div style="margin-left:5%;margin-top:30px;float:left;">
<img src="images/小和尚.jpg" height=80px width=80px />
</div>
<div style="float:left;width:60%;">
<div style="width:60%;margin-left:5%;margin-top:30px;color:#601A3D;font-size:20px;font-weight:800;">
<p>Crazy Monkey</p>
</div>
<div style="color:#DDA3CC;width:60%;margin-top:30px;">
<div style="margin-left:5%;float:left;width:10%;padding:3px;">主页</div>
<div style="float:left;width:10%;padding:3px;">日志</div>
<div style="float:left;width:10%;padding:3px;">相册</div>
<div style="float:left;width:10%;padding:3px;">留言板</div>
<div style="float:left;width:10%;padding:3px;">说说</div>
<div style="float:left;width:10%;padding:3px;">个人档</div>
<div style="float:left;width:10%;padding:3px;">音乐</div>
<div style="float:left;width:10%;padding:3px;">更多</div>
</div>
</div>
<div style="float:left;
margin-left:2%;
margin-top:40px;
width:25%;
text-align:center;
line-height:20px;
color:#601A3D;
">
<div style="float:left;">
<img src="images/访问.jpg" width="60" height="60" />
</div>
<div style="float:left;">
今日访客:10<br/>
被挡访客:1<br/>
访客总量:10000<br/>
</div>
</div>
</div>
</div>
<div class="body">
<div style="clear:both;"></div>
<!-- 主题左侧选择框-->
<div class="body_left" style="margin:1%;margin-left:15%;width:10%;color:#DDA3CC;font-size:12px;
font-weight:800;line-height:20px;float:left;">
<div style="background-color:#631D41;padding:10px;border-top-right-radius:3px;
border-top-left-radius:3px;"><img src="images/好友动态.jpg" align="top"
alt="好友动态" />好友动态</div>
<div style="background-color:#70264B;padding:10px;"><img src="images/特别关心.jpg" align="top"
alt="特别关心" />特别关心</div>
<div style="background-color:#70264B;padding:10px;"><img src="images/与我相关.jpg" align="top"
alt="与我相关" />与我相关</div>
<div style="background-color:#70264B;padding:10px;"><img src="images/空间达人.jpg" align="top"
alt="空间达人" />空间达人</div>
<div style="background-color:#70264B;padding:10px;"><img src="images/那年今日.jpg" align="top"
alt="那年今日" />那年今日</div>
<div style="background-color:#70264B;padding:10px;"><img src="images/腾讯课堂.jpg" align="top"
alt="腾讯课堂" />腾讯课堂</div>
<div style="background-color:#70264B;padding:10px;"><img src="images/游戏应用.jpg" align="top"
alt="游戏应用" />游戏应用</div>
<div style="background-color:#70264B;padding:10px;border-bottom-right-radius:3px;
border-bottom-left-radius:3px;"><img src="images/我的收藏.jpg" align="top"
alt="我的收藏" />我的收藏</div>
</div>
<div class="body_medium" style="width:40%;float:left;margin:1%;">
<!-- 说说发表区域-->
<div class="shuoshuo" style="width:100%;float:left;">
<div style="float:left;width:83%;height:65px;">
<textarea rows="3" name="show" style="width:100%;color:#B2819E;text-align:left;
background-color:#792B53;line-height:20px;border:1px solid #400929;">说点儿什么吧</textarea>
</div>
<div style="float:left;height:63px;background-color:#631D41;width:8.1%;border:1px solid #400929;">
<img src="images/相册.jpg" align="middle" alt="相册" align="middle" style="margin-top:5px;" />
</div>
<div style="float:left;height:63px;background-color:#631D41;width:8.1%;border:1px solid #400929;border-left:none;">
<img src="images/链接.jpg" align="middle" alt="链接" align="middle" style="margin-top:5px;" />
</div>
<div style="width:99.4%;height:40px;background-color:#792B53;
float:left;border:1px solid black;border-top:none;color:#DDA3CC;">
<div style="margin-top:10px; width:50%;float:left;border-top:none;border-right:1px solid #400929;">
<img src="images/笑脸.jpg" alt="笑脸"
style="line-height:20px;" />
<img src="images/链接1.jpg" alt="链接1"
style="line-height:20px;" />
<img src="images/井号.jpg" alt="井号"
style="line-height:20px;" />
<img src="images/企鹅.jpg" alt="企鹅"
style="line-height:20px;margin-left:60%" />
</div>
<div style="float:left;font-size:12px;line-height:40px;width:49%;">
<div style="float:left;"><span style="margin-left:10px;font-weight:500;">可见范围:</span></div>
<div style="float:left;"><form>
<select style="background-color:#792B53;border:none;color:#DDA3CC;">
<option value ="所有人可见" selected>所有人可见</option>
<option value ="QQ好友可见">QQ好友可见</option>
<option value="部分好友可见">部分好友可见</option>
<option value="部分好友不可见">部分好友不可见</option>
<option value="仅自己可见">仅自己可见</option>
</select>
<input type="submit" name="发表" value="发表" style="margin-left:50px;width:80px;height:30px;background-color:#E65C98;border:1px solid #792B53;" />
</form>
</div>
</div>
</div>
</div>
<!-- 好友动态显示区域-->
<div class="dongtai" style="width:100%;float:left;margin-top:15px;">
<div class="dongtai1" style="width:100%;margin-top:0px;background-color:#70264B;">
<div class="header_dongtai" style="width:100%;height:40px;line-height:40px;border-bottom:0.5px solid #400929;">
<div style="float:left;"><form>
<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
<option value ="全部动态" selected>全部动态</option>
<option value ="相册">相册</option>
<option value="日志">日志</option>
</select>
</form>
</div>
<div style="float:left;margin-left:70%;">
<img src="images/刷新.jpg" alt="刷新" style="margin-top:5px;" />
</div>
<div style="float:left;margin-left:2%;">
<img src="images/设置.jpg" alt="设置" style="margin-top:5px;" />
</div>
</div>
<div class="pic_dongtai" style="width:100%;padding:20px;">
<div style="width:8%;padding:3px;float:left;">
<img src="images/小和尚.jpg" alt="" style="border-radius:20px;width:40px;height:40px;" />
</div>
<div style="width:8%;float:left;font-size:12px;color:#DDA3CC;">
<span>狐狸</span><br/><br/>
<span>11:20</span>
</div>
<div style="float:left;margin-left:60%;"><form>
<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
<option value ="全部动态" selected>全部动态</option>
<option value ="相册">相册</option>
<option value="日志">日志</option>
</select>
</form>
</div>
</div>
<div class="neirong_dt" style="width:100%;clear:both;" >
<div style="padding:1px;padding-left:15px;color:#DDA3CC;">
<p>中秋快乐!</p>
</div>
<div style="padding:1px;padding-left:15px;">
<img src="images/兔子.gif" alt="" />
</div>
</div>
<div class="liulan_dt" style="width:98%;margin:10px;height:40px;border-bottom:1px solid #400929; ">
<div style="color:#DDA3CC;padding:5px;font-size:13px;float:left;line-height:30px;"><span>浏览6次</span></div>
<div style="padding:5px;float:left;margin-left:60%;"><img src="images/点赞.jpg" alt="" /></div>
<div style="padding:5px;float:left;margin-left:3%;"><img src="images/消息框.jpg" alt="" /></div>
<div style="padding:5px;float:left;margin-left:3%;"><img src="images/分享.jpg" alt="" /></div>
</div>
<div class="dianzan_dt" style="width:100%;margin:10px;height:40px;" >
<div style="padding:5px;float:left;"><img src="images/点赞1.jpg" alt="" /></div>
<div style="padding:5px;float:left;color:#DDA3CC;font-size:14px;line-height:30px;"><span>Crazy Monkey共1人觉得很赞</span></div>
</div>
<div class="pinglun_dt" style="width:100%;margin:2px;height:75px;">
<div style="float:left;">
<div style="float:left;margin-left:10px;">
<textarea rows="3" cols="80" name="pinglun" style="color:#B2819E;
background-color:#792B53;line-height:20px;border:1px solid #400929;border-right:none;">说点儿什么吧</textarea>
</div>
<div style="float:left;border:1px solid #400929;border-left:none;">
<img src="images/相机11.jpg" alt="" />
</div>
</div>
</div>
<div style="width:100%;margin:2px;margin-left:5px;height:40px;line-height:30px;">
<div style="padding:5px;float:left;"><img src="images/笑脸1.jpg" alt="" /></div>
<div style="padding:5px;float:left;margin-left:3%;"><img src="images/链接2.jpg" alt="" /></div>
<div style="float:left; padding:5px;padding-top:0;"><form>
<input type="submit" name="发表" value="发表" style="margin-left:400px;width:80px;height:30px;background-color:#E65C98;border:1px solid #792B53;" />
</form>
</div>
</div>
</div>
<div class="dongtai2" style="width:100%;margin-top:10px;background-color:#70264B;">
<div class="header_dongtai" style="width:100%;height:40px;line-height:40px;border-bottom:0.5px solid #400929;">
<div style="float:left;"><form>
<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
<option value ="全部动态" selected>全部动态</option>
<option value ="相册">相册</option>
<option value="日志">日志</option>
</select>
</form>
</div>
<div style="float:left;margin-left:70%;">
<img src="images/刷新.jpg" alt="刷新" style="margin-top:5px;" />
</div>
<div style="float:left;margin-left:2%;">
<img src="images/设置.jpg" alt="设置" style="margin-top:5px;" />
</div>
</div>
<div class="pic_dongtai" style="width:100%;padding:20px;">
<div style="width:8%;padding:3px;float:left;">
<img src="images/小和尚.jpg" alt="" style="border-radius:20px;width:40px;height:40px;" />
</div>
<div style="width:8%;float:left;font-size:12px;color:#DDA3CC;">
<span>狐狸</span><br/><br/>
<span>11:20</span>
</div>
<div style="float:left;margin-left:60%;"><form>
<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
<option value ="全部动态" selected>全部动态</option>
<option value ="相册">相册</option>
<option value="日志">日志</option>
</select>
</form>
</div>
</div>
<div class="neirong_dt" style="width:100%;clear:both;" >
<div style="padding:1px;padding-left:15px;color:#DDA3CC;">
<p>中秋快乐!</p>
</div>
<div style="padding:1px;padding-left:15px;">
<img src="images/兔子.gif" alt="" />
</div>
</div>
<div class="liulan_dt" style="width:98%;margin:10px;height:40px;border-bottom:1px solid #400929; ">
<div style="color:#DDA3CC;padding:5px;font-size:13px;float:left;line-height:30px;"><span>浏览6次</span></div>
<div style="padding:5px;float:left;margin-left:60%;"><img src="images/点赞.jpg" alt="" /></div>
<div style="padding:5px;float:left;margin-left:3%;"><img src="images/消息框.jpg" alt="" /></div>
<div style="padding:5px;float:left;margin-left:3%;"><img src="images/分享.jpg" alt="" /></div>
</div>
<div class="dianzan_dt" style="width:100%;margin:10px;height:40px;" >
<div style="padding:5px;float:left;"><img src="images/点赞1.jpg" alt="" /></div>
<div style="padding:5px;float:left;color:#DDA3CC;font-size:14px;line-height:30px;"><span>Crazy Monkey共1人觉得很赞</span></div>
</div>
<div class="pinglun_dt" style="width:100%;margin:2px;height:75px;">
<div style="float:left;">
<div style="float:left;margin-left:10px;">
<textarea rows="3" cols="80" name="pinglun" style="color:#B2819E;
background-color:#792B53;line-height:20px;border:1px solid #400929;border-right:none;">说点儿什么吧</textarea>
</div>
<div style="float:left;border:1px solid #400929;border-left:none;">
<img src="images/相机11.jpg" alt="" />
</div>
</div>
</div>
<div style="width:100%;margin:2px;margin-left:5px;height:40px;line-height:30px;">
<div style="padding:5px;float:left;"><img src="images/笑脸1.jpg" alt="" /></div>
<div style="padding:5px;float:left;margin-left:3%;"><img src="images/链接2.jpg" alt="" /></div>
<div style="float:left; padding:5px;padding-top:0;"><form>
<input type="submit" name="发表" value="发表" style="margin-left:400px;width:80px;height:30px;background-color:#E65C98;border:1px solid #792B53;" />
</form>
</div>
</div>
</div>
<div class="dongtai3" style="width:100%;margin-top:10px;background-color:#70264B;">
<div class="header_dongtai" style="width:100%;height:40px;line-height:40px;border-bottom:0.5px solid #400929;">
<div style="float:left;"><form>
<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
<option value ="全部动态" selected>全部动态</option>
<option value ="相册">相册</option>
<option value="日志">日志</option>
</select>
</form>
</div>
<div style="float:left;margin-left:70%;">
<img src="images/刷新.jpg" alt="刷新" style="margin-top:5px;" />
</div>
<div style="float:left;margin-left:2%;">
<img src="images/设置.jpg" alt="设置" style="margin-top:5px;" />
</div>
</div>
<div class="pic_dongtai" style="width:100%;padding:20px;">
<div style="width:8%;padding:3px;float:left;">
<img src="images/小和尚.jpg" alt="" style="border-radius:20px;width:40px;height:40px;" />
</div>
<div style="width:8%;float:left;font-size:12px;color:#DDA3CC;">
<span>狐狸</span><br/><br/>
<span>11:20</span>
</div>
<div style="float:left;margin-left:60%;"><form>
<select style="background-color:#70264B;border:none;color:#DDA3CC;padding:10px;">
<option value ="全部动态" selected>全部动态</option>
<option value ="相册">相册</option>
<option value="日志">日志</option>
</select>
</form>
</div>
</div>
<div class="neirong_dt" style="width:100%;clear:both;" >
<div style="padding:1px;padding-left:15px;color:#DDA3CC;">
<p>中秋快乐!</p>
</div>
<div style="padding:1px;padding-left:15px;">
<img src="images/兔子.gif" alt="" />
</div>
</div>
<div class="liulan_dt" style="width:98%;margin:10px;height:40px;border-bottom:1px solid #400929; ">
<div style="color:#DDA3CC;padding:5px;font-size:13px;float:left;line-height:30px;"><span>浏览6次</span></div>
<div style="padding:5px;float:left;margin-left:60%;"><img src="images/点赞.jpg" alt="" /></div>
<div style="padding:5px;float:left;margin-left:3%;"><img src="images/消息框.jpg" alt="" /></div>
<div style="padding:5px;float:left;margin-left:3%;"><img src="images/分享.jpg" alt="" /></div>
</div>
<div class="dianzan_dt" style="width:100%;margin:10px;height:40px;" >
<div style="padding:5px;float:left;"><img src="images/点赞1.jpg" alt="" /></div>
<div style="padding:5px;float:left;color:#DDA3CC;font-size:14px;line-height:30px;"><span>Crazy Monkey共1人觉得很赞</span></div>
</div>
<div class="pinglun_dt" style="width:100%;margin:2px;height:75px;">
<div style="float:left;">
<div style="float:left;margin-left:10px;">
<textarea rows="3" cols="80" name="pinglun" style="color:#B2819E;
background-color:#792B53;line-height:20px;border:1px solid #400929;border-right:none;">说点儿什么吧</textarea>
</div>
<div style="float:left;border:1px solid #400929;border-left:none;">
<img src="images/相机11.jpg" alt="" />
</div>
</div>
</div>
<div style="width:100%;margin:2px;margin-left:5px;height:40px;line-height:30px;">
<div style="padding:5px;float:left;"><img src="images/笑脸1.jpg" alt="" /></div>
<div style="padding:5px;float:left;margin-left:3%;"><img src="images/链接2.jpg" alt="" /></div>
<div style="float:left; padding:5px;padding-top:0;"><form>
<input type="submit" name="发表" value="发表" style="margin-left:400px;width:80px;height:30px;background-color:#E65C98;border:1px solid #792B53;" />
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="body_right" style="width:15%;float:left;margin:1%;">
<div style="width:35%;height:70px;border:none;color:#B13C71;background-color:#531232;float:left;text-align:center;">
<div style="font-size:13px;margin-top:10px;"><span> 09.23</span><br/></div>
<div style="font-size:20px;"><span >签到</span></div>
</div>
<div style="width:60%;height:70px;border:none;color:#B13C71;background-color:#70264B;float:left;text-align:center;">
<div style="font-size:13px;margin-top:10px;"><span>本月签到次数</span><br/></div>
<div style="font-size:20px;"><span >21次</span></div>
</div>
</div>
</div>
</body>
</html>