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');
}
来源：https://www.cnblogs.com/shengyang17/p/9084852.html