抽屉新热榜
Posted kris12
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了抽屉新热榜相关的知识，希望对你有一定的参考价值。
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()抽屉新热榜头部实现爬虫学习---基础操作--抽屉新热榜自动点赞与豆瓣自动统一短评