1.实现与抽屉新热榜一样的布局
2.允许点赞、评论
3.开发登录、注册页面
4.开发发贴功能
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- 以最高的ie 浏览器 渲染 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口的设备 移动设备优先 支持移动端 在多个设备上适应 pc iphone 安卓 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>抽屉新热榜-聚合每日热门、搞笑、有趣资讯</title> <!-- Bootstrap 必须引入bootstrap --> <!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--> <link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.min.css"> <link rel="icon" href="./images/chouti.ico"> <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!--兼容IE9以下的版本--> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <link rel="stylesheet" href="./css/index.css"> </head> <body> <!--导航栏--> <nav class="navbar navbar-default navbar-fixed-top my-navbar"> <div class="container"> <!--页面导航--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="./images/logo.png" alt="logo"></a> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!--导航--> <ul class="nav navbar-nav my-navbar-nav"> <li class="active"><a href="#">全部<span class="sr-only">(current)</span></a></li> <li><a href="#">42区</a></li> <li><a href="#">段子</a></li> <li><a href="#">图片</a></li> <li><a href="#">挨踢1024</a></li> <li><a href="#">你问我答</a></li> <li><a href="#">视频</a></li> </ul> <!--搜索框--> <form class="navbar-form navbar-right my-form"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <a class="my-img" href="#"></a> </form> <!--注册登录--> <ul class="nav navbar-nav navbar-right my-navbar-nav"> <li><a style="color: white;" href="javascript:login();">注册</a></li> <li><a style="color: white;" href="javascript:login();">登录</a></li> </ul> </div> </div> </nav> <!--模态窗--> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1 myModalLabel2"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <!--登录页面--> <div class="pull-left"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button> <h4 class="modal-title" id="myModalLabel1">登录</h4> </div> <div class="modal-body my-modal-body"> <ul class="nav nav-pills"> <li role="presentation" class="active"><a href="#">手机号登录</a></li> <li role="presentation"><a href="#">用户名登录</a></li> </ul> <!--手机号登录--> <div class="my-phone-login"> <form> <div class="form-group"> <select class="form-control"> <option>中国（+86）</option> <option>中国香港（+852）</option> <option>中国澳门（+853）</option> <option>中国台湾（+886）</option> <option>美国（+1）</option> <option>加拿大（+1）</option> <option>马拉西亚（+60）</option> <option>日本（+81）</option> <option>韩国（+82）</option> <option>新加坡（+65）</option> <option>德国（+49）</option> </select> </div> <div class="form-group"> <input type="text" class="form-control" id="exampleInputText1" placeholder="手机号"> </div> <div class="form-group"> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码"> </div> <div class="checkbox"> <label> <input type="checkbox" checked> <small>一个月内自动登录</small> </label> <small> 忘记密码？</small> </div> </form> </div> <!--用户名登录--> <div class="my-user-login"> <form> <div class="form-group"> <input type="text" class="form-control" id="exampleInputText2" placeholder="用户名"> </div> <div class="form-group"> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="密码"> </div> <div class="checkbox"> <label> <input type="checkbox" checked> <small>一个月内自动登录</small> </label> <small> 忘记密码？</small> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary" data-dismiss="modal">登录</button> </div> </div> <!--注册页面--> <div class="pull-right"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel2">注册</h4> </div> <div class="modal-body my-modal-body"> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">1.填写手机号</a></li> <li role="presentation"><a href="#">2.填写基本资料</a></li> </ul> <!--填写手机号--> <div class="my-phone-register"> <form> <div class="form-group"> <select class="form-control"> <option>中国（+86）</option> <option>中国香港（+852）</option> <option>中国澳门（+853）</option> <option>中国台湾（+886）</option> <option>美国（+1）</option> <option>加拿大（+1）</option> <option>马拉西亚（+60）</option> <option>日本（+81）</option> <option>韩国（+82）</option> <option>新加坡（+65）</option> <option>德国（+49）</option> </select> </div> <div class="form-group form-inline"> <input type="text" class="form-control" id="exampleInputText3" placeholder="手机号"> <button type="submit" class="btn btn-primary">获取验证码</button> </div> <div class="form-group text-right" style="margin-top: -10px;"> <small>收不到短信？</small> <small style="color: #337ab7;">获取语音验证码</small> </div> <div class="form-group"> <input type="text" class="form-control" id="exampleInputText4" placeholder="验证码"> </div> <div class="form-group"> <input type="password" class="form-control" id="exampleInputPassword3" placeholder="密码"> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary my-btn-next" onclick="btnNext();">下一步</button> <button type="button" class="btn btn-primary my-btn-submit" data-dismiss="modal">提交资料</button> </div> </div> </div> </div> </div> <!--发布的模态窗--> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1 myModalLabel2"> <div class="modal-dialog" role="document"> <div class="modal-content clearfix"> <!--发布页面--> <div class="my-publish"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel3">分享新发现</h4> </div> <div class="modal-body my-modal-body"> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">链接</a></li> <li role="presentation"><a href="#">文字</a></li> <li role="presentation"><a href="#">图片</a></li> </ul> <!--链接--> <div class="my-link"> <form> <div class="form-group"> <label for="exampleInputUrl">添加链接</label> <input type="text" class="form-control" id="exampleInputUrl" placeholder="http://"> </div> <div class="form-group"> <label for="exampleInputTitle">标题</label> <input type="text" class="form-control" id="exampleInputTitle"> </div> <div class="form-group"> <label for="exampleInputTextarea">添加摘要（选填）</label> <textarea class="form-control" rows="3" id="exampleInputTextarea"></textarea> </div> <div class="form-group my-form-a"> <small>发布到：</small> <a href="#" class="btn btn-default btn-sm active" role="button">42区</a> <a href="#" class="btn btn-default btn-sm" role="button">段子</a> <a href="#" class="btn btn-default btn-sm" role="button">图片</a> <a href="#" class="btn btn-default btn-sm" role="button">挨踢1024</a> <a href="#" class="btn btn-default btn-sm" role="button">你问我答</a> </div> </form> </div> <!--文字--> <div class="my-text"> <form> <div class="form-group"> <textarea class="form-control" rows="3" id="exampleInputTextarea1" placeholder="发布段子"></textarea> </div> <div class="form-group my-form-a"> <small>发布到：</small> <a href="#" class="btn btn-default btn-sm active" role="button">段子</a> <a href="#" class="btn btn-default btn-sm" role="button">你问我答</a> </div> </form> </div> <!--图片--> <div class="my-photo"> <form> <div class="form-group"> <label for="exampleInputFile">添加图片</label> <input type="file" id="exampleInputFile"> </div> <div class="form-group"> <textarea class="form-control" rows="3" id="exampleInputTextarea2" placeholder="发布段子"></textarea> </div> <div class="form-group my-form-a"> <small>发布到：</small> <a href="#" class="btn btn-default btn-sm active" role="button">图片</a> <a href="#" class="btn btn-default btn-sm" role="button">你问我答</a> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">清空</button> <button type="button" class="btn btn-primary" data-dismiss="modal">发布</button> </div> </div> </div> </div> </div> <!--中心内容--> <div class="container my-container"> <div class="row"> <!--左侧列表内容--> <div class="col-md-8"> <!--标签页--> <div class="clearfix my-nav"> <ul class="nav nav-pills pull-left my-navbar-nav"> <li class="active"><a href="#">最热</a></li> <li><a href="#">发现</a></li> <li><a href="#">人类发布</a></li> </ul> <ul class="nav nav-pills pull-right my-navbar-nav my-active"> <li class="active"><a href="#">限时排序</a></li> <li><a href="#">24小时</a></li> <li><a href="#">3天</a></li> </ul> <button class="btn btn-default btn-success" onclick="publish()"><span class="glyphicon glyphicon-plus-sign"></span><span>发布</span></button> </div> <!--内容1--> <div class="list-group my-list-content"> <a href="#" class="list-group-item clearfix"> <div class="pull-left clearfix"> <h5>【支持女性开车就是“叛徒”？沙特女权活动家被捕】本周至少7名沙特女权活动家遭捕，她们曾为女性驾驶权开展活动。她们被指控破坏国家安全，当局在报纸头版上给她们打上“叛徒”标签。 <small>-news.haiwainet.cn<span> 42区</span></small></h5> <small>沙特活动家被沙特当局指控破坏国家安全而被捕，沙特当局在亲政府报纸头版上给他们打上“叛徒”的标签。</small> <p class="clearfix my-p-left pull-left"> <span class="span1 span_click1" title="推荐"><span class="span_count1">5</span></span> <span class="span2 span_click2" title="评论"><span class="span_count2" >1</span></span> <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span> <span class="span4"></span> <span class="span6">院长</span> <span class="span5">10分钟前</span> <small class="span7">入热搜</small> </p> <p class="clearfix my-p-right pull-right"> <span class="span1_1">分享到</span> <span class="span2_1"></span> <span class="span3_1"></span> <span class="span4_1"></span> <span class="span5_1"></span> </p> </div> <!--文章图片--> <div class="pull-right my-pull-right"> <img src="./images/1.png" alt="小图"> </div> </a> <!--评论区域--> <div class="panel panel-default my-comment"> <div class="panel-heading">最热评论(<span class="com-count">1</span>)<span class="close">X</span></div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">乌漆嘛黑</span> <span class="com-span3">这种手段我们很熟悉！</span> <span class="com-span4">5分钟前 发布 来自iphone</span> </small> </li> </ul> <div class="form-inline"> <textarea class="form-control" rows="2"></textarea> <button type="button" class="btn btn-info">评论</button> </div> </div> </div> </div> <!--内容2--> <div class="list-group my-list-content"> <a href="#" class="list-group-item clearfix"> <div class="pull-left clearfix"> <h5>各种阶层各种职业的中国人，这样度过了82年前的今天 <small>-mp.weixin.qq.com<span> 42社区</span></small></h5> <small>来自Android</small> <p class="clearfix my-p-left pull-left"> <span class="span1 span_click1" title="推荐"><span class="span_count1">5</span></span> <span class="span2 span_click2" title="评论"><span class="span_count2" >3</span></span> <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span> <span class="span4"></span> <span class="span6">提拉米喵帕斯</span> <span class="span5">30分钟前</span> <small class="span7">入热榜</small> </p> <p class="clearfix my-p-right pull-right"> <span class="span1_1">分享到</span> <span class="span2_1"></span> <span class="span3_1"></span> <span class="span4_1"></span> <span class="span5_1"></span> </p> </div> <!--文章图片--> <div class="pull-right my-pull-right"> <img src="./images/2.png" alt="小图"> </div> </a> <!--评论区域--> <div class="panel panel-default my-comment"> <div class="panel-heading">最热评论(<span class="com-count">3</span>)<span class="close">X</span></div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">雄霸大天王</span> <span class="com-span3">城市的井然有序，农村的精准扶贫，富有者的法律约束，饥饿者的社会救济，小市民的房产增值，给你点赞的人得混得多么差？</span> <span class="com-span4">20分钟前 来自Android</span> </small> </li> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">熊小雄</span> <span class="com-span3">历史的印记</span> <span class="com-span4">32分钟前 来自Android</span> </small> </li> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">monimonipo</span> <span class="com-span3">你还是没在旧社会活过，改开前估计也没经验</span> <span class="com-span4">1小时15分钟前 来自iphone</span> </small> </li> </ul> <div class="form-inline"> <textarea class="form-control" rows="2"></textarea> <button type="button" class="btn btn-info">评论</button> </div> </div> </div> </div> <!--内容3--> <div class="list-group my-list-content"> <a href="#" class="list-group-item clearfix"> <div class="pull-left clearfix"> <h5>【美国财长：中国进口美农产品将增近4成，能源翻倍】另一个复杂的信号是，美国贸易代表莱特希泽20日却发表了与姆努钦当天表态相互矛盾的声明， 称中国需要“真正的结构性改革”，除非中国对其经济做出“真正结构性的改变”，否则华盛顿可能仍然会诉诸关税及其他工具，包括投资限制与出口监管。 <small>-www.guancha.cn<span> 42区</span></small></h5> <!--<small>RSSHub 是一款轻量、易于扩展的 RSS 生成器，基于 node.js 10，可以给「任何」内容生成 RSS 订阅源，目前支持 B 站、微博、即刻、网易云音乐、......</small>--> <p class="clearfix my-p-left pull-left"> <span class="span1 span_click1" title="推荐"><span class="span_count1">11</span></span> <span class="span2 span_click2" title="评论"><span class="span_count2" >32</span></span> <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span> <span class="span4"></span> <span class="span6">cog</span> <span class="span5">1小时21分钟前</span> <small class="span7">入热搜</small> </p> <p class="clearfix my-p-right pull-right"> <span class="span1_1">分享到</span> <span class="span2_1"></span> <span class="span3_1"></span> <span class="span4_1"></span> <span class="span5_1"></span> </p> </div> <!--文章图片--> <div class="pull-right my-pull-right"> <img src="./images/3.png" alt="小图"> </div> </a> <!--评论区域--> <div class="panel panel-default my-comment"> <div class="panel-heading">最热评论(<span class="com-count">2</span>)<span class="close">X</span></div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">歪理邪说</span> <span class="com-span3">对于没有契约精神的流氓美帝，中国肯定要留一手的</span> <span class="com-span4">1小时19分钟前 来自Android</span> </small> </li> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">gamedeng</span> <span class="com-span3">美国印钱给其他国家化，转移通胀。中国是印钱给自己老百姓花，转移通胀</span> <span class="com-span4">1小时18分钟前 </span> </small> </li> </ul> <div class="form-inline"> <textarea class="form-control" rows="2"></textarea> <button type="button" class="btn btn-info">评论</button> </div> </div> </div> </div> <!--内容4--> <div class="list-group my-list-content"> <a href="#" class="list-group-item clearfix"> <div class="pull-left clearfix"> <h5>【许纯美要选台北市长！「4年后拼选总统」】台湾的「话题女王」许纯美坐拥300亿身家，是出了名的富婆， 20日被爆出有意参选台北市市长，她事后也证实此事，并表示这是为了4年后做准备。 <small>-star.ettoday.net <span> 42区</span></small></h5> <p class="clearfix my-p-left pull-left"> <span class="span1 span_click1" title="推荐"><span class="span_count1">6</span></span> <span class="span2 span_click2" title="评论"><span class="span_count2" >17</span></span> <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span> <span class="span4"></span> <span class="span6">ettoday</span> <span class="span5">1小时36分钟前</span> <small class="span7">入热榜</small> </p> <p class="clearfix my-p-right pull-right"> <span class="span1_1">分享到</span> <span class="span2_1"></span> <span class="span3_1"></span> <span class="span4_1"></span> <span class="span5_1"></span> </p> </div> <!--文章图片--> <div class="pull-right my-pull-right"> <img src="./images/4.png" alt="小图"> </div> </a> <!--评论区域--> <div class="panel panel-default my-comment"> <div class="panel-heading">最热评论(<span class="com-count">2</span>)<span class="close">X</span></div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">张局座召忠</span> <span class="com-span3">犹记得当你她上刚开播的《康熙来了》的情境，觉得跟我们的世界观差异太大了</span> <span class="com-span4">1小时33分钟前 来自Android</span> </small> </li> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">别问了反正你也不认识</span> <span class="com-span3">胖了</span> <span class="com-span4">1小时49分钟前 来自Android</span> </small> </li> </ul> <div class="form-inline"> <textarea class="form-control" rows="2"></textarea> <button type="button" class="btn btn-info">评论</button> </div> </div> </div> </div> <!--内容5--> <div class="list-group my-list-content"> <a href="#" class="list-group-item clearfix"> <div class="pull-left clearfix"> <h5>坚果R1手机刚上市，你就不得不“理解万岁”了 <small>-www.pingwest.com <span> 挨踢1024</span></small></h5> <small>一周前的锤子发布会上，罗永浩带来的两款所谓革命性产品中，坚果R1手机看起来还是有吸引力的。不管是骁龙845、最大8GBRAM和1TB存储空间， 还是带光学防抖和采用IMX363CMOS的影像系统，再或者线性马达、无线充电、压感屏幕都足以...</small> <p class="clearfix my-p-left pull-left"> <span class="span1 span_click1" title="推荐"><span class="span_count1">15</span></span> <span class="span2 span_click2" title="评论"><span class="span_count2" >59</span></span> <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span> <span class="span4"></span> <span class="span6">Pin</span> <span class="span5">2小时2分钟前</span> <small class="span7">入热搜</small> </p> <p class="clearfix my-p-right pull-right"> <span class="span1_1">分享到</span> <span class="span2_1"></span> <span class="span3_1"></span> <span class="span4_1"></span> <span class="span5_1"></span> </p> </div> <!--文章图片--> <div class="pull-right my-pull-right"> <img src="./images/5.png" alt="小图"> </div> </a> <!--评论区域--> <div class="panel panel-default my-comment"> <div class="panel-heading">最热评论(<span class="com-count">2</span>)<span class="close">X</span></div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">李多多</span> <span class="com-span3">罗锤子：个性化镜头，助您拍摄出与众不同的照片。</span> <span class="com-span4">2小时2分钟前 </span> </small> </li> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">一股清流</span> <span class="com-span3">奇怪，把一块普通玻璃像手机一样包装里，都不会磨成这样吧，感觉有猫腻</span> <span class="com-span4">1小时42分钟前 来自Android</span> </small> </li> </ul> <div class="form-inline"> <textarea class="form-control" rows="2"></textarea> <button type="button" class="btn btn-info">评论</button> </div> </div> </div> </div> <!--内容6--> <div class="list-group my-list-content"> <a href="#" class="list-group-item clearfix"> <div class="pull-left clearfix"> <h5>“美帝良心”从何而来？ <small>-img3.chouti.com<span> 挨踢1024 /span></small></h5> <p class="clearfix my-p-left pull-left"> <span class="span1 span_click1" title="推荐"><span class="span_count1"> 53</span></span> <span class="span2 span_click2" title="评论"><span class="span_count2" > 121</span></span> <span class="span3 span_click3" title="加入私藏"><span>私藏</span></span> <span class="span4"></span> <span class="span6">Peter</span> <span class="span5">2小时17分钟前</span> <small class="span7">入热搜</small> </p> <p class="clearfix my-p-right pull-right"> <span class="span1_1">分享到</span> <span class="span2_1"></span> <span class="span3_1"></span> <span class="span4_1"></span> <span class="span5_1"></span> </p> </div> <!--文章图片--> <div class="pull-right my-pull-right"> <img src="./images/6.png" alt="小图"> </div> </a> <!--评论区域--> <div class="panel panel-default my-comment"> <div class="panel-heading">最热评论(<span class="com-count">2</span>)<span class="close">X</span></div> <div class="panel-body"> <ul class="list-group"> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">小白公子</span> <span class="com-span3">所以这次事并不是因为5g标准</span> <span class="com-span4">2小时47分钟前 来自Android</span> </small> </li> <li class="list-group-item"> <small> <span class="com-span1"></span> <span class="com-span2">alanlin</span> <span class="com-span3">节操在哪里，柳家招人恨不是一天两天了，这波被黑活该。</span> <span class="com-span4">2小时2分钟前 发布</span> </small> </li> </ul> <div class="form-inline"> <textarea class="form-control" rows="2"></textarea> <button type="button" class="btn btn-info">评论</button> </div> </div> </div> </div> <!--分页--> <nav aria-label="Page navigation" style="text-align: center;"> <ul class="pagination"> <li> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li class="active"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a href="#" aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> <!--右侧列表内容--> <div class="col-md-4"> <div class="my-a-img"> <a href="#"><img src="images/有害信息举报专区.png" alt=""></a> <a href="#"><img src="images/儿童色情信息举报.png" alt=""></a> </div> <a href="#">如何避免自己被封号</a> <a href="#"><img src="images/不正经的咨询社区.png" alt=""></a> <div><span class="my-span-top">24小时全部<span> TOP 10</span></span></div> <!--面板链接 ul li 内容--> <div class="panel panel-default my-panel"> <!-- Default panel contents --> <div class="panel-heading">最热榜</div> <!-- List group --> <ul class="list-group my-list-group"> <li class="list-group-item"> <span class="badge">374</span> <a href="#">帅不过三秒</a> </li> <li class="list-group-item"> <span class="badge">316</span> <a href="#">压腿是个技术活，一般人受不了。建议声调小点~~</a> </li> <li class="list-group-item"> <span class="badge">218</span> <a href="#">例无虚发的撩妹最高境界</a> </li> <li class="list-group-item"> <span class="badge">203</span> <a href="#">阿拉丁神灯cos</a> </li> <li class="list-group-item"> <span class="badge">96</span> <a href="#">祝大家节日快乐，来自一只汪的祝福。</a> </li> </ul> </div> <!--广告图片--> <a href="#"><img src="./images/广告.png" alt=""></a> </div> </div> </div> <!--回到顶部图标--> <div class="move-top" title="回到顶部"></div> <!-- jQuery (Bootstrap 的所有 前段 插件都依赖 jQuery，所以必须放在前边) --> <!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>--> <script src="./jquery/jquery.min.js"></script> <!-- 加载 Bootstrap 的所有 前段 插件。也可以根据需要只加载单个插件。 --> <!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--> <script src="./bootstrap-3.3.7/js/bootstrap.min.js"></script> </body> <script src="./js/index.js"></script> </html>
index.css
.modal-open { overflow-y: scroll !important; } @media screen and (min-width: 765px) and (max-width:995px) { .my-form{display: none;} } body { background-color: #ededed; } .my-form{ position: relative; } .my-container{ padding-top: 70px; background-color: white; } .my-nav{ padding-bottom: 20px; overflow: hidden; } .my-nav .pull-right{ position: relative; right: 128px; } .my-nav .pull-right li{ font-size: 12px; } .my-nav .pull-right li a{ padding: 11px 8px; color: #333; } .my-nav .pull-right+button{ width: 120px; margin-left: 10px; position: relative; right: -155px; float: right; } .my-nav .pull-right+button span{ padding: 0 8px; } .my-nav .pull-right li.active a{ color: #5cb85c; } .my-nav .pull-right li a:hover{ color: #5cb85c; background-color: white; } .my-nav .pull-right li a:visited{ background-color: white; } .my-nav .my-active .active a{ background-color: white; } .my-navbar{ background-color: #2459A2; } .my-navbar .navbar-collapse:last-child li.active a{ color: white; background-color: #204982; } .my-navbar .navbar-collapse:last-child li.active a:visited{ color: white;background-color: #204982; } .my-navbar .my-navbar-nav>.active>a{ background-color: #204982; color: white; } .my-navbar .my-navbar-nav>.active:hover{ background-color: #396bb3; } .my-navbar .my-navbar-nav>.active a:hover{ background-color: #204982; color: white; } .my-navbar .my-navbar-nav>.active a:visited{ color: white;background-color: #204982; } .my-navbar .my-navbar-nav>li>a{ color: #c0cddf; } .my-navbar .my-navbar-nav>li>a:visited{ color: #c0cddf; } .my-navbar .my-navbar-nav>li:hover{ background-color: #396bb3; } .my-navbar .my-navbar-nav>li>a:hover{ color:white; } .my-list-content a{ cursor: default; } .my-list-content a h5{ color: black; } .my-list-content a h5>small{ cursor: text; } .my-list-content a h5,small,p,h5>small>span{ cursor: pointer; } .my-list-content a>div{ width: 83%; } .my-list-content a .pull-left p.pull-left{ /*width: 67%;*/ width: 100%; } .my-list-content a .pull-left p.my-p-right{ display: none; } .my-list-content div.my-pull-right { position: absolute; height: 120px; width: 120px; right: 20px; } .my-list-content a .pull-left small{ color: gray; } .my-list-content a .pull-left p{ margin: 12px 0 0 0; color: #9d9d9d; } .my-list-content a .pull-left p>span{ display: inline-block; width: 50px; height: 18px; margin-right: 10px; } .my-list-content a .pull-left p .span1{ background: url("../images/点赞.png") no-repeat 8px -40px; } .my-list-content a .pull-left p .span1:hover{ background: url("../images/点赞.png") no-repeat 8px -20px; color: #204982; } .my-list-content a .pull-left p span span{ float: right; } .my-list-content a .pull-left p .span2{ background: url("../images/点赞.png") no-repeat 8px -99px; } .my-list-content a .pull-left p .span2:hover{ background: url("../images/点赞.png") no-repeat 8px -79px; color: #204982; } .my-list-content a .pull-left p .span3{ width: 42px; background: url("../images/点赞.png") no-repeat 8px -159px; } .my-list-content a .pull-left p .span3:hover{ background: url("../images/点赞.png") no-repeat 8px -139px; color: #204982; } .my-list-content a .pull-left p .span3>span{ margin-right: -18px; } .my-list-content a .pull-left p .span4{ background: url("../images/图标.png") no-repeat left center/19px; border:1px solid #ccc; margin-left: 30px; width: 20px; position: relative; cursor: default; } .my-list-content a .pull-left p .span5{ width: 85px; color: orange; font-size: 12px; position: relative; cursor: text; top: -4px; left: -12px; } .my-list-content a .pull-left p .span6{ position: relative; top:-4px; left: -4px; } .my-list-content a .pull-left p .span7{ position: relative; top:-4px; left: -18px; } .my-list-content .pull-right img{ height: 64px; width: 64px; margin: 10px; position: absolute; top: 0; right: -10px; z-index: 2 } .my-list-content .pull-right img:hover{cursor: zoom-in;} .my-list-content .pull-right img.big:hover{ cursor: zoom-out;} .my-list-content a .pull-left p.my-p-right span{ width: 22px; margin: 0; height: 15px;} .my-list-content a .pull-left p.my-p-right .span1_1{ width: 41px; font-size: 12px; cursor: text;} .my-list-content a .pull-left p.my-p-right .span1_1~span{ position: relative;top:2px;} .my-list-content a .pull-left p.my-p-right .span2_1{ background:url("../images/share.png") no-repeat 5px 0;} .my-list-content a .pull-left p.my-p-right .span2_1:hover{ background:url("../images/share.png") no-repeat 5px -90px; color: gray;} .my-list-content a .pull-left p.my-p-right .span3_1{ background:url("../images/share.png") no-repeat 5px -15px;} .my-list-content a .pull-left p.my-p-right .span3_1:hover{ background:url("../images/share.png") no-repeat 5px -105px;} .my-list-content a .pull-left p.my-p-right .span4_1{ background:url("../images/share.png") no-repeat 5px -30px;} .my-list-content a .pull-left p.my-p-right .span4_1:hover{ background:url("../images/share.png") no-repeat 5px -120px;} .my-list-content a .pull-left p.my-p-right .span5_1{ background:url("../images/share.png") no-repeat 5px -60px;} .my-list-content a .pull-left p.my-p-right .span5_1:hover{ background:url("../images/share.png") no-repeat 5px -150px;} @media screen and (min-width: 990px) and (max-width: 1200px) { .my-list-content a .pull-left p.pull-left{ width: 78%;} .my-list-content a .pull-left p.my-p-right{ width: 18%;} } .my-img{ position: absolute; background: url("../images/搜索.png") no-repeat left center; display: inline-block;height: 32px; width: 37px;top: 1px; right: 12px; border-left: 1px solid #e0e0e0;} @media screen and (max-width: 765px) { .my-img{ top: 10px;} } .my-a-img a{ padding-right: 16px;} .my-a-img+a{ background: url("../images/搜索.png") no-repeat left center; display: block;height: 20px; padding-left: 30px; font-size: 14px;font-weight: bold; margin: 15px 0;} .my-span-top{ font-size: 14px; margin: 12px 0;display: block;font-weight: 600; } .my-span-top>span{ color: red;} .my-list-group{ padding-left: 30px; } .my-list-group li.list-group-item>span{ float: left; background-color: #e0e0e0;color: gray; position: absolute;left: -24px;} .my-list-group li.list-group-item a{ text-decoration: none; color: #333; } .my-list-group li.list-group-item a:hover{ color: #396bb3; } .my-panel .panel-heading{ background-color: #2459a2; color: white; text-align: center; } .my-modal-body>ul{ margin-bottom: 15px; } .my-modal-body .my-user-login{ display: none;} #myModal .modal-dialog{ width: 45%;} .my-comment{ display: none;} .my-comment ul.list-group li:hover{ background-color: #f5f5f5; } .my-comment .form-inline textarea{ width: 90%;} .my-comment .com-span1{ background: url(../images/图标.png) no-repeat left center/19px; width: 20px; height: 20px; display: inline-block; border: 1px solid #ccc; position: relative; top: 4px;} .my-comment .com-span2{ color: #2459a2; margin-left: 5px; } .my-comment .com-span3{ margin-left: 10px; } .my-comment .com-span4{ color: #ccc; margin-left: 20px; } .move-top{ display: none; position:fixed; z-index: 3; background: url("../images/movetop.png") no-repeat 0 0; width: 40px; height: 40px; bottom: 30px;right: 100px; cursor: pointer; } .move-top:hover{ background: url("../images/movetop.png") no-repeat 0 -40px;} .my-publish .my-text,.my-photo{ display: none; }
index.js
$(function () { $('.my-list-content>a').click(function (ev) { ev.preventDefault(); //阻止默认事件 href // ev.stopPropagation(); // 阻止事件冒泡 // return false; // 阻止了冒泡和默认 }); //鼠标点击 ul li 下的 active 样式切换 $('.my-navbar-nav li').click(function () { $(this).addClass('active').siblings('li').removeClass('active'); }); //模态窗中的标签样式切换 $('.pull-left .my-modal-body ul li').click(function () { $(this).addClass('active').siblings('li').removeClass('active'); $($('.my-modal-body ul').siblings('div')[$(this).index()]).show().siblings('div').hide(); }); //鼠标移入到内容中，显示分享的小图标 $('.my-list-content a').each(function (index,ele) { $(this).hover(function () { $($('.pull-left p.my-p-right')[index]).css('display','block'); },function () { $($('.pull-left p.my-p-right')[index]).css('display','none'); }) }); //鼠标移入到内容的图片上，将小图片变成大图片 $('.pull-right img').each(function (index,ele) { $(this).click(function () { if($(this).hasClass('big')){ $(this).animate({width:'64px',height:'64px'},500); $(this).removeClass('big'); }else { $(this).animate({width:'120px',height:'120px'},500); $(this).addClass('big'); } }) }); //推荐的点击事件 $('.span_click1').each(function (index,ele) { var isFlag1 = true; $(this).click(function () { var count1 = $($('.span_count1')[index]).text(); if(isFlag1){ $($('.span_count1')[index]).text(Number(count1)+1); $(this).css({'background':'url(./images/点赞.png) no-repeat 8px -20px','color':'#58cb05'}); $(this).attr('title','取消推荐'); isFlag1 = false; }else{ $($('.span_count1')[index]).text(Number(count1)-1); $(this).css({'background':'url(./images/点赞.png) no-repeat 8px -40px','color':'#9d9d9d'}); $(this).attr('title','推荐'); isFlag1 = true; } }); }); //评论的点击事件 $('.span_click2').each(function (index,ele) { var isFlag2 = true; $(this).click(function () { console.log($(this).index()); if(isFlag2){ $($('.my-comment')[index]).show(); $(this).css({'background':'url(./images/点赞.png) no-repeat 8px -79px','color':'#63c8ff'}); isFlag2 = false; }else{ $($('.my-comment')[index]).hide(); $(this).css({'background':'url(./images/点赞.png) no-repeat 8px -99px','color':'#9d9d9d'}); isFlag2 = true; } }) }); //关闭评论框 $('.my-comment .close').each(function (index,ele) { $(this).click(function () { $($('.my-comment')[index]).hide(); $($('.span_click2')[index]).css({'background':'url(./images/点赞.png) no-repeat 8px -99px','color':'#9d9d9d'}); }) }); //私藏的 点击事件 $('.span_click3').each(function (index,ele) { var isFlag3 = true; $(this).click(function () { if(isFlag3){ $(this).css({'background':'url(./images/点赞.png) no-repeat 8px -139px','color':'orange'}); $(this).attr('title','移除私藏'); isFlag3 = false; }else{ $(this).css({'background':'url(./images/点赞.png) no-repeat 8px -159px','color':'#9d9d9d'}); $(this).attr('title','加入私藏'); isFlag3 = true; } }); }); //评论内容追加到 ul li 中 $('.my-comment button').each(function (index,ele) { $(this).bind('click',function () { var date = new Date(); var strDate = date.getFullYear() + '-' + Number(date.getMonth())+1 + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds(); var comCount = $($('.com-count')[index]).text(); var comment = $($('.my-comment textarea')[index]).val(); var str = "<li class=\"list-group-item\"> <small>" + "<span class=\"com-span1\"></span>" + "<span class=\"com-span2\">kris</span> " + "<span class=\"com-span3\">"+comment+"</span> " + "<span class=\"com-span4\">"+strDate+" 发布</span> " + "</small></li> "; $($('.my-comment ul.list-group')[index]).append(str); $($('.com-count')[index]).text(Number(comCount)+1); $($('.span_count2')[index]).text(Number(comCount)+1); $($('.my-comment textarea')[index]).val(''); }) }); //监听页面滚动 $(document).scroll(function () { $(document).scrollTop() > 0 ? $('.move-top').show() : $('.move-top').hide(); }); //回到顶部 点击事件 $('.move-top').click(function () { $(document.documentElement).animate({scrollTop:'0'},500) }); //发布页面的导航,内容切换 $('.my-publish ul.nav li').click(function () { $(this).addClass('active').siblings('li').removeClass('active'); $($('.my-publish ul.nav').siblings('div')[$(this).index()]).show().siblings('div').hide(); }); // 发布到的切换 $('.my-form-a a').click(function () { $(this).addClass('active').siblings('a').removeClass('active'); }) }); //注册登录页面 function login() { $('#myModal').modal({ keyboard:false }); /* 为了弹出框 弹出时滚动条不消失 背景不影响*/ $('body').css('padding-right','0'); } //注册 选择下一步时的操作 function btnNext() { $('.my-phone-register').hide(); $('.my-info-register').show(); $('.my-btn-next').hide(); $('.my-btn-submit').show(); $('.pull-right .my-modal-body ul li').last().addClass('active').siblings('li').removeClass('active'); } //发布 function publish() { $('#myModal1').modal({ keyboard:false }); $('body').css('padding-right','0'); }