仿QQ空间前端页面，全手写；
一、index.html 文件代码如下：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>瀿澕落儘 [http://88526.qzone.qq.com]</title> <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="static/font-awesome-4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="static/css/site.css"> </head> <body> <div class="header"> <div class="container"> <div class="left"> <a href="" class="logo"></a> <a href="" class="home"><i class="fa fa-home">他的主页</i></a> <a href="" class="user"><i class="fa fa-user">他的动态</i></a> </div> <div class="right"> <a href="" class="diamond"><i class="fa fa-diamond"></i></a> <a href="" class="cog"><i class="fa fa-cog"></i></a> <a href="" class="userinfo">Appler[退出]</a> <img src="/qq/static/imgs/userinfo.png"> <span>|</span> <a href="" class="userinfo">返回个人中心</a> <span>|</span> <div class="searchbox"> <input type="text" name="input" placeholder="用户/游戏/动态"> <a href="" class="search"><i class="fa fa-search"></i></a> </div> </div> </div> </div> <div class="body"> <div class="container"> <div class="left"> <h1><span>瀿澕落儘</span></h1> <a href="" class="lv"></a> <a href="" class="fly"></a> <div class="addr">瀿澕落儘 http://88526.qzone.qq.com</div> </div> <div class="right"> <a href=""><i class="fa fa-plus"> 加好友</i></a> <a href=""><i class="fa fa-thumbs-up"> 赞 | 1</i></a> </div> </div> <div class="container" style="margin-top:-30px;"> <div class="user-detail"> <img class="avatar" src="/qq/static/imgs/userinfo.png"> <div class="nickname">猪哥@php.cn</div> <div class="vip-year"> <img src="/qq/static/imgs/vip_year_8.png"> <span>成长值 360000 成长速度 35点/天</span> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar"></div> </div> <a href=""><img src="/qq/static/imgs/icon-vip-fee-year.png"></a> <a href="" class="level"></a> </div> <div class="weather"> <img src="http://qzonestyle.gtimg.cn/aoi/img/weather/weather-cloudy-sunny.png"> <span class="temperature">30°</span> <div style="float:right;font-size:18px;"> <span>合肥</span> <br> <span style="font-size: 12px">4月24日</span> </div> </div> <div class="nav"> <ul> <li><a href="">主页</a></li> <li><a href="/day.php">日志</a></li> <li><a href="">留言板</a></li> <li><a href="">相册</a></li> <li><a href="">个人档</a></li> <li><a href="">好友秀</a></li> <li><a href="">更多</a></li> </ul> </div> </div> </div> <div class="container"> <div class="main"> <div class="col-md-4" style="padding:0px;"> <div class="main-left-nav"> <ul> <li class="col-md-4 first"> <a href=""> <span class="num">1</span> <span>照片</span> </a> </li> <li class="col-md-4"> <a href=""> <span class="num">1</span> <span>说说</span> </a> </li> <li class="col-md-4"> <a href=""> <span class="num">1</span> <span>日志</span> </a> </li> </ul> </div> <div class="main-left-profile"> <ul class="list-group"> <li class="list-group-item active"> <strong>个人档</strong> </li> <li class="list-group-item"> <i class="fa fa-vcard-o"></i>瀿澕落儘 </li> <li class="list-group-item"> <i class="fa fa-wpforms"></i>28岁 白羊座 男 </li> <li class="list-group-item"> <i class="fa fa-shopping-bag"></i>软件公司 </li> <li class="list-group-item"> <i class="fa fa-graduation-cap"></i>来自 安徽合肥 </li> <li class="list-group-item"> <a href="" style="color:#cc8f14;">查看详细资料</a> </li> </ul> </div> <div class="main-left-board"> <ul class="list-group"> <li class="list-group-item active"> <strong>留言板</strong> </li> <li class="list-group-item"> <textarea class="form-control" id="board_msg" placeholder="我也留个言吧"></textarea> <div class="board-msg"> <a href=""> <i class="fa fa-smile-o"></i></a> <div class="right1"> <label> <input type="checkbox">秘密留言 </label> <i class="fa fa-diamond"></i> <button onclick="add_board()">发表</button> </div> <div style="clear:both;"></div> </div> </li> <li class="list-group-item msg-list"> <span class="name">消逝·二拐</span>： <span> <img src="/qq/static/imgs/e168.gif" style="width:16px;height:16px;"> <img src="/qq/static/imgs/e168.gif" style="width:16px;height:16px;"> <img src="/qq/static/imgs/e168.gif" style="width:16px;height:16px;"> <img src="/qq/static/imgs/e168.gif" style="width:16px;height:16px;"> <img src="/qq/static/imgs/e168.gif" style="width:16px;height:16px;"> <img src="/qq/static/imgs/e168.gif" style="width:16px;height:16px;"> <img src="/qq/static/imgs/e168.gif" style="width:16px;height:16px;"> </span> <p style="margin-top:10px;color:gray;">2018-04-26 16:22:03</p> </li> <li class="list-group-item msg-list"> <span class="name">消逝·二拐</span>： <span>愿你既可以朝九晚五，又能够诗情画意。愿你一生努力，一生被爱，想要的都拥有，得不到的都释怀。</span> <p style="margin-top:10px;color:gray;">2018-04-26 16:21:53</p> </li> <li class="list-group-item msg-list"> <span class="name">某男子</span>： <span>中文网越办越好！</span> <p style="margin-top:10px;color:gray;">2018-04-26 16:21:42</p> </li> <li class="list-group-item msg-list"> <a href="" style="color:#cc8f14;">查看更多留言</a> </li> </ul> </div> </div> <div class="main-right-board col-md-8"> <div class="panel panel-default birthday"> <div class="panel-body"> <div class="userinfo"> <img src="/qq/static/imgs/userinfo.png"> <div class="info"> <p>猪哥@php.cn</p> <p class="date">4月11日 09:54</p> </div> <div class="toggle"> <a href=""><i class="fa fa-angle-down"></i></a> </div> </div> <div class="clear gift"> <img src="/qq/static/imgs/gift-default.jpg"> <div class="detail"> <p>4月13日是 <span style="color:#cc8f14;">猪哥@php.cn</span> 的生日，赶紧送礼物祝他生日快乐吧！</p> <p><button>赠送礼物</button></p> </div> </div> </div> </div> <div class="panel panel-default content-list"> <div class="panel-body"> <div class="userinfo"> <img src="/qq/static/imgs/userinfo.png"> <div class="info"> <p>猪哥@php.cn</p> <p class="date">04月26日 13:47</p> </div> <div class="toggle"> <a href=""><i class="fa fa-angle-down"></i></a> </div> </div> <div class="clear msg"> <p>看看测试下还有多少人在玩QQ空间</p> <p> <img src="/qq/static/imgs/psb.jpg" style="max-width:100%;"> <br> </p> </div> <div class="clear send-info"> <i class="fa fa-mobile"></i> <span>来自 iPhone 7 Plus (4G)</span> </div> <div class="send-detail" style="float:left;"> <span>浏览501次</span> <div class="option"> <a href="javascript:;" onclick="zan(2)"><i class="fa fa-thumbs-up"></i></a> <a href=""><i class="fa fa-commenting"></i></a> <a href=""><i class="fa fa-mail-forward"></i></a> </div> </div> <hr style="width:100%;"> <div class="comment"> <i class="fa fa-thumbs-up" style="color:#cc8f14;"></i> <span>Young °、老新、张小飞、东风、国际金融域名注册局中国办、 、汪星、IDoog、人生、hanbindsg、◆ 郝先生i°、给你买辣条、尘子丿瘾君子、马到成功、。、
