抽屉新热榜
1.實現(xiàn)與抽屜新熱榜一樣的布局 2.允許點贊、評論 3.開發(fā)登錄、注冊頁面 4.開發(fā)發(fā)貼功能
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><!-- 以最高的ie 瀏覽器 渲染 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 視口的設備 移動設備優(yōu)先 支持移動端 在多個設備上適應 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:// 協(xié)議（就是直接將 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區(qū)</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><!--模態(tài)窗--><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" οnclick="btnNext();">下一步</button><button type="button" class="btn btn-primary my-btn-submit" data-dismiss="modal">提交資料</button></div></div></div></div></div><!--發(fā)布的模態(tài)窗--><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"><!--發(fā)布頁面--><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">分享新發(fā)現(xiàn)</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>發(fā)布到：</small><a href="#" class="btn btn-default btn-sm active" role="button">42區(qū)</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="發(fā)布段子"></textarea></div><div class="form-group my-form-a"><small>發(fā)布到：</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="發(fā)布段子"></textarea></div><div class="form-group my-form-a"><small>發(fā)布到：</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">發(fā)布</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="#">發(fā)現(xiàn)</a></li><li><a href="#">人類發(fā)布</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" οnclick="publish()"><span class="glyphicon glyphicon-plus-sign"></span><span>發(fā)布</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區(qū)</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><!--評論區(qū)域--><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分鐘前 發(fā)布 來自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>各種階層各種職業(yè)的中國人，這樣度過了82年前的今天 <small>-mp.weixin.qq.com<span> 42社區(qū)</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><!--評論區(qū)域--><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">城市的井然有序，農(nóng)村的精準扶貧，富有者的法律約束，饑餓者的社會救濟，小市民的房產(chǎn)增值，給你點贊的人得混得多么差？</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">你還是沒在舊社會活過，改開前估計也沒經(jīng)驗</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>【美國財長：中國進口美農(nóng)產(chǎn)品將增近4成，能源翻倍】另一個復雜的信號是，美國貿易代表萊特希澤20日卻發(fā)表了與姆努欽當天表態(tài)相互矛盾的聲明，稱中國需要“真正的結構性改革”，除非中國對其經(jīng)濟做出“真正結構性的改變”，否則華盛頓可能仍然會訴諸關稅及其他工具，包括投資限制與出口監(jiān)管。 <small>-www.guancha.cn<span> 42區(qū)</span></small></h5><!--<small>RSSHub 是一款輕量、易于擴展的 RSS 生成器，基于 node.js 10，可以給「任何」內容生成 RSS 訂閱源，目前支持 B 站、微博、即刻、網(wǎng)易云音樂、......</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><!--評論區(qū)域--><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年后拼選總統(tǒng)」】臺灣的「話題女王」許純美坐擁300億身家，是出了名的富婆，20日被爆出有意參選臺北市市長，她事后也證實此事，并表示這是為了4年后做準備。 <small>-star.ettoday.net <span> 42區(qū)</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><!--評論區(qū)域--><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>一周前的錘子發(fā)布會上，羅永浩帶來的兩款所謂革命性產(chǎn)品中，堅果R1手機看起來還是有吸引力的。不管是驍龍845、最大8GBRAM和1TB存儲空間，還是帶光學防抖和采用IMX363CMOS的影像系統(tǒng)，再或者線性馬達、無線充電、壓感屏幕都足以...</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><!--評論區(qū)域--><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><!--評論區(qū)域--><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">節(jié)操在哪里，柳家招人恨不是一天兩天了，這波被黑活該。</span><span class="com-span4">2小時2分鐘前 發(fā)布</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/有害信息舉報專區(qū).png" alt=""></a><a href="#"><img src="images/兒童色情信息舉報.png" alt=""></a></div><a href="#">如何避免自己被封號</a><a href="#"><img src="images/不正經(jīng)的咨詢社區(qū).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="#">例無虛發(fā)的撩妹最高境界</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="#">祝大家節(jié)日快樂，來自一只汪的祝福。</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 的所有 前段 插件。也可以根據(jù)需要只加載單個插件。 --><!--<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');});//模態(tài)窗中的標簽樣式切換$('.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+" 發(fā)布</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('');})});//監(jiān)聽頁面滾動 $(document).scroll(function () {$(document).scrollTop() > 0 ? $('.move-top').show() : $('.move-top').hide();});//回到頂部 點擊事件$('.move-top').click(function () {$(document.documentElement).animate({scrollTop:'0'},500)});//發(fā)布頁面的導航,內容切換$('.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();});// 發(fā)布到的切換$('.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'); }//發(fā)布 function publish() {$('#myModal1').modal({keyboard:false});$('body').css('padding-right','0'); }?
?轉載于:https://www.cnblogs.com/shengyang17/p/9084852.html
總結
- 上一篇： thinkphp源码解读
- 下一篇： kafka单节点创建 topic 超时