博客列表 >5月17日作业——仿QQ空间前端页面

5月17日作业——仿QQ空间前端页面

钱光照的博客
钱光照的博客原创
2018年05月21日 16:43:121279浏览

仿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°、给你买辣条、尘子丿瘾君子、马到成功、。、
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议