前端开发之抽屉热搜榜
生活随笔
收集整理的這篇文章主要介紹了
前端开发之抽屉热搜榜
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>抽屜新熱榜</title>
<style type="text/css">
*{margin: 0;padding: 0}
a{text-decoration: none}
li{list-style: none}
/*頂部菜單欄樣式*/
#head1{height: 44px;width: 100%;background-color: #2459a2}
#head1_in{height: 44px;width: 1018px;margin: 0 auto 0 ;position: relative}
#head1_in_a{display: inline-block;height: 44px;margin-top: 10px}
#head1_in_1{display: inline-block;position: absolute;left: 132px;font-size: 0}
#head1_in_1 .a1{display: inline-block;height: 44px;width: 53px;text-align: center;line-height: 44px;font-size: 11px;color: #c0cddf}
#head1_in_1 .a2{display: inline-block;height: 44px;width: 80px;text-align: center;line-height: 44px;font-size: 11px;color: #c0cddf}
#head1_in_1 a:hover{background-color: rgba(192,205,223,.5) ;color: white}
#head1_in_2{display: inline-block;position: absolute;right: 145px;font-size: 0}
#head1_in_2_2{display: none;position: absolute;right: 145px;font-size: 0}
#head1_in_2 .a3{display: inline-block;height: 44px;width: 64px;text-align: center;line-height: 44px;font-size: 11px;color: white}
#head1_in_2_2 a{display: inline-block;height: 44px;width: 128px;text-align: center;line-height: 44px;font-size: 11px;color: white}
#head1_in_2 a:hover{background-color: rgba(192,205,223,.5)}
#head1_in_3{display: inline-block; height: 38px;width: 137px; position: absolute;right: 0;font-size: 0;margin-top: 4px}
#head1_in_3 .a4{display: inline-block;height: 31px;width: 100px}
#head1_in_3 .a5{display: inline-block;height: 33px;width: 33px;background-color: white}
/*body主體架構*/
#body1{width: 100%;height: 100%;background-color: #ededed}
#body2{width: 1018px;height: 1500px;background-color: white;margin: 0 auto 0;position: relative}
#body2_l{width: 630px;height: 100%;display: inline-block;position: absolute;left: 30px;top: 10px}
#body2_r{width: 300px;height: 100%;display: inline-block;position: absolute;right: 30px;top: 10px}
/*body左模塊頂部頁簽欄樣式*/
#body2_l_top{width: 630px;height: 43px;border-bottom: 1px solid #c0cddf;position: relative}
#body2_l_top .b1{display: inline-block; width: 190px;height: 42px;font-size: 0}
#body2_l_top .b2{display: inline-block; width: 142px;height: 20px;position: absolute;right: 137px;top: 10px}
#body2_l_top .b3{display: inline-block; width: 136px;height: 32px;background-color: #84a42b;text-align: center;line-height: 32px;position: absolute;right: 0;top: 5px}
#body2_l_top .b1 div{display: inline-block;width: 60px;height: 42px;font-size: 11px;text-align: center;line-height: 42px;color: #369;font-weight: 700}
#body2_l_top .b2 a{font-size: 8px;}
#body2_l_top .b2 .b2_a1{color: #b4b4b4}
#body2_l_top .b2 .b2_a2{color: #390}
#body2_l_top .b3 span{color: white}
#body2_l_top .b1 div,#body2_l_top .b3:hover{cursor: pointer}
.item{width: 630px;height: 100%;border-bottom: 1px solid #c0cddf;position: relative}
/*body左模塊內容板塊樣式*/
.item>div{width: 100%;height: 100%;display: inline-block}
.item .item_1{width: 550px;height: 100%;margin-top: 12px}
.item .item_1 .item_title{font-size: 15px;color: #369;font-weight: 700}
.item .item_1 .item_url{font-size: 10px;color: #b4b4b4;margin-left: 10px}
.item .item_1 .item_addr{font-size: 11px;color: #b4b4b4;margin-left: 10px;text-decoration: underline}
.item .item_2{width: 550px;height: 25px;margin-top: 10px;position: relative;margin-bottom: 10px}
.item .little_img{display: inline-block; position: absolute;right: 0;top: 12px;width: 60px;height: 60px}
.item_2 .dianzan b{color: #99aecb}
.item_2 .pinglun{margin-left: 15px}
.item_2 .pinglun b{color: #99aecb}
.item_2 .sicang{margin-left: 25px}
.item_2 .sicang b{color: #99aecb;font-size: 12px}
.item_2 .user_logo{font-size: 13px;margin-left: 45px;color: #99aecb}
.item_2 .time_count{font-size: 13px;margin-left: 12px;color: #b4b4b4}
.item_2 .time_count .time_count_1{color: #e59373}
.item_2 .time_count b{text-decoration: none}
.item_2 .fenxiang{position: absolute;right: 0;bottom: -4px;}
.item_title,.pinglun,.dianzan,.sicang,.user_logo,.time_count_1:hover{cursor: pointer}
.item .little_img:hover{cursor: pointer}
/*body右模塊樣式*/
#body2_r_top{width: 300px;height: 68px;position: relative}
#body2_r_top .a2{position: absolute;right: 0}
#body2_r_search{width: 300px;height: 30px;position: relative}
#body2_r_search a{font-size: 15px; position: absolute;bottom: 0;color: #369;font-weight: 700}
#body2_r_img{width: 300px;height: 202px;margin-top: 10px}
#body2_r_hot{width: 300px;height: 500px;margin-top: 10px}
#body2_r_hot_1{width: 300px;height: 28px;}
#body2_r_hot_1 span{font-size: 15px;font-weight: 700}
#body2_r_hot_1 .top10{color: #c30}
#body2_r_hot_2{width: 300px;height: 35px;background-color: #2459a2;text-align: center;line-height: 35px;font-size: 11px;color: white;}
#body2_r_hot_3 .top-item{width: 300px;height: 67px;border-bottom: dotted 1px gray;margin-top: 20px;font-size: 11px}
#body2_r_hot_3 .top-item .top_count{display: inline-block;height: 22px;width: 32px; background-color: #f0f0f0;font-size: 12px;font-weight: 700;color: #666;text-align: center;line-height: 22px}
#body2_r_hot_3 .top-item .top_title{color: black}
#body2_r_hot_3 .top-item .top_title:hover{color: #2459a2}
/*分享彈窗樣式*/
#all_area_pub{width: 100%;height: 100%;background-color: rgba(150,150,150,0.6);position: fixed;top: 0;left: 0;display: none}
#fenxiang_tc{width: 581px;height: 337px;background-color: white;margin: 0 auto 0;margin-top: 130px;border-radius:5px;}
#tc_title{width: 581px;height: 28px;background-color: #e6ecf3;border-top-left-radius:5px;border-top-right-radius:5px;position: relative}
#tc_title_1{display: inline-block;color: #8aa3c4;position: absolute;font-size: 15px;font-weight: 500;left: 12px;top: 3px}
#tc_title_2{display: inline-block;position: absolute;right: 12px;color: #8aa3c4;font-weight: 700;}
#tc_title_2:hover{cursor: pointer}
#tc_neirong{width: 541px;height: 275px;margin: 0 auto 0;margin-top: 15px}
#tc_yeqian{width: 541px;height: 37px;border-bottom: 1px solid #e6ecf3;}
#tc_text_area{width: 541px;height: 98px;margin-top: 16px;border-top-left-radius:5px;border-top-right-radius:5px;background-color: #e6ecf3}
#tc_count{width: 541px;height: 30px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-color: #e6ecf3;}
#tc_leixing{width: 541px;height: 30px;margin-top: 10px;}
#tc_publish{width: 541px;height: 30px;margin-top: 15px;}
#tc_yeqian a{display: inline-block;width: 93px;height: 35px;text-align: center;line-height: 35px;background-color: #e6ecf3;border-top-left-radius:5px;border-top-right-radius:5px;font-size: 15px;color: #2459a2;font-weight: 700;border: 1px solid #ccdcef}
#tc_yeqian .active{background-color: white;border-bottom: none}
#tc_yeqian a,#tc_leixing a,#tc_publish a:hover{cursor: pointer}
#tc_text_area textarea{width: 529px;height: 76px;margin-top: 5px;margin-left: 5px;border: 1px solid #ccdcef}
#tc_count div{margin-left: 420px;color: #8aa3c4;font-size: 15px}
#tc_leixing span{color: #999;font-size: 12px}
#tc_leixing a{display: inline-block;width: 60px;height: 30px;font-size: 12px;font-weight: 700;text-align: center;line-height: 30px;color: white;background-color: #e6ecf3;border-radius: 5px;margin-left: 5px}
#tc_leixing .active{background-color: #2459a2}
#tc_publish .clear{margin-left: 395px;font-size: 12px;color: #2459a2}
#tc_publish .publish{display: inline-block;width: 96px;height: 30px;border-radius: 5px;text-align: center;line-height: 30px;background-color: #e6ecf3;color: white;font-size: 15px;margin-left: 20px;font-weight: 700}
#tc_publish .active{background-color: #84a42b}
/*登陸注冊彈窗樣式*/
#all_area_login{width: 100%;height: 100%;background-color: rgba(150,150,150,0.6);position: fixed;top: 0;left: 0;display: none}
#login_tc{width: 700px;height: 375px;background-color: white;margin: 0 auto 0;margin-top: 100px;border-radius:5px;}
#login_tc_top{width: 700px;height: 28px;background-color: #e6ecf3;border-top-left-radius: 5px;border-top-right-radius: 5px;position: relative}
#login_tc_top span{color: #8aa3c4;position: absolute;font-size: 15px;font-weight: 500;}
#login_tc_top .title_login{left: 12px;top: 3px}
#login_tc_top .title_regedit{left: 362px;top: 3px}
#login_tc_top .title_close{right: 12px;top: 3px}
#login_tc_top .title_close:hover{cursor: pointer}
#login_tc_left{width: 348px;height: 335px;display: inline-block;border-right: 1px dotted;position: relative}
#login_tc_right{width: 346px;height: 335px;display: inline-block;position: relative}
#login_input{width: 222px;height: 250px;position: absolute;top: 22px;left: 60px}
#regedit_input{width: 222px;height: 270px;position: absolute;top: 22px;left: 55px}
#login_type{width: 100%;height: 20px;text-align: center;line-height: 30px}
#num_area_select select{width: 100%;height: 28px;border: 1px solid #ccdcef;margin-top: 17px}
#num_area_select input{width: 220px;height: 28px;border: 1px solid #ccdcef;margin-top: 17px}
#auto_login span{font-size: 12px}
#auto_login{margin-top: 17px}
#auto_login a{color: #2459a2;margin-left: 50px}
#login_button span{display: inline-block; width: 95px;height: 31px;background-color: #2459a2;text-align: center;line-height: 31px;margin-top: 17px;color: white;border-radius: 5px}
.phone_num{font-size: 15px;color: #2459a2}
.user_id{font-size: 15px;color: #abb6d2}
#regedit_tc_top{width: 100%;height: 20px;text-align: center;line-height: 30px}
#num_area_select2 select{width: 100%;height: 28px;border: 1px solid #ccdcef;margin-top: 17px}
#num_area_select2 input{width: 140px;height: 28px;border: 1px solid #ccdcef;margin-top: 17px;display: inline-block}
#get_MsgCode{font-size: 12px;width: 70px;height: 28px;background-color: #2459a2;color: white;text-align: center;line-height: 28px;border-radius: 5px;display: inline-block;margin-left: 5px}
#not_get_msg{font-size: 12px;margin-left: 65px}
#not_get_msg a{color: #2459a2}
#checkcode_pwd input{width: 220px;height: 28px;border: 1px solid #ccdcef;margin-top: 17px}
#next_step_button span{display: inline-block; width: 95px;height: 31px;background-color: #2459a2;text-align: center;line-height: 31px;margin-top: 17px;color: white;border-radius: 5px}
#login_button span,#next_step_button span,#get_MsgCode:hover{cursor: pointer}
/*評論模塊樣式*/
#body2_l_area .pinglun_model{width: 628px;height: 100%;background-color: #f6f6f6;margin-bottom: 10px;border: 1px solid #cbdcee;border-radius: 5px;display: none}
.pinglun_top{height: 38px;width: 100%;border-bottom: 1px dotted grey;position: relative}
.pinglun_top .pinglun_title,.pinglun_top .pinglun_close{font-size: 12px;color: #b4b4b4;font-weight: 700;position: absolute}
.pinglun_top .goto_page{font-size: 11px;color: #99aecb;position: absolute}
.pinglun_top .pinglun_title{top: 10px;left: 15px}
.pinglun_top .goto_page{top: 10px;left: 105px}
.pinglun_top .pinglun_close{top: 5px;right: 15px}
.pinglun_area{width: 100%;height: 95px; position: relative;}
.pinglun_area textarea{width:516px;height: 46px;border: 1px solid rgb(204, 220, 239);display: inline-block;position: absolute;left: 15px;top: 10px}
.pinglun_btn1{width: 62px;height: 31px;color: white;font-size: 14px;font-weight: 700;background-color: #e6ecf3;border-radius: 5px;display: inline-block;text-align: center;line-height: 31px;position: absolute;right: 15px;top: 10px}
.pinglun_area a{font-size: 11px;color: #99aecb;position: absolute;right: 25px;bottom: 20px}
.pinglun_li{display: inline-block;width: 100%;height: 29px;border-bottom: 1px dotted grey;margin-top: 8px}
.pinglun_li a{font-size: 12px;color: #2459a2;margin-left: 15px}
.pinglun_li .li1{font-size: 12px;margin-left: 15px}
.pinglun_li .li2{font-size: 12px;color: #b4b4b4;margin-left: 15px}
.pinglun_li .li3{font-size: 12px;color: #b4b4b4;margin-left: 15px}
.pinglun_top .pinglun_close,.pinglun_btn1:hover{cursor: pointer}
.pinglun_area a:hover{cursor: pointer}
.pinglun_area .active{background-color: #2459a2}
</style>
</head>
<body>
<div id="head1">
<div id="head1_in">
<a id="head1_in_a" href="#"><img src="https://dig.chouti.com/images/logo.png"></a>
<div id="head1_in_1">
<a class="a1" href="#">全部</a>
<a class="a1" href="#">42區</a>
<a class="a1" href="#">段子</a>
<a class="a1" href="#">圖片</a>
<a class="a2" href="#">挨踢1024</a>
<a class="a2" href="#">你問我答</a>
</div>
<div id="head1_in_2">
<a class="a3" href="#">注冊</a>
<a class="a3" href="#">登陸</a>
</div>
<div id="head1_in_3">
<input type="text" class="a4">
<input type="button" class="a5" value="搜">
</div>
<div id="head1_in_2_2">
<a href="#">無名氏</a>
</div>
</div>
</div>
<div id="body1">
<div id="body2">
<div id="body2_l">
<div id="body2_l_top">
<div class="b1">
<div>最熱</div>
<div>發現</div>
<div>人類發布</div>
</div>
<div class="b2">
<a href="#" class="b2_a1">即時排序</a>
<a href="#" class="b2_a2">24小時</a>
<a href="#" class="b2_a2">3天</a>
</div>
<div class="b3">
<span class="add">+</span>
<span>發布</span>
</div>
</div>
<div id="body2_l_area">
<div class="item">
<div>
<div class="item_1">
<a class="item_title">阿里云大面積癱瘓，據多地網友反應，阿里云服務器出現大面積故障...</a>
<a class="item_url">-www.maoqiuapp.com</a>
<a class="item_addr" href="#">42區</a>
</div>
<div class="item_2">
<a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a>
<a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a>
<a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a>
<a class="user_logo">麥的垛朱尼爾</a>
<a class="time_count"><span class="time_count_1">1小時6分鐘前</span><span>入熱榜</span></a>
<a class="fenxiang"><img src="chouti_img/3.png"></a>
</div>
</div>
<div class="little_img"><a><img src="chouti_img/1.png"></a></div>
<div class="pinglun_model">
<div class="pinglun_top">
<span class="pinglun_title">最熱評論(<a>2</a>)</span>
<span class="goto_page">去評論頁面</span>
<span class="pinglun_close">x</span>
</div>
<ul class="pinglun_ul">
<li class="pinglun_li">
<a>無名氏1</a>
<span class="li1">評論內容aaaaaa</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
<li class="pinglun_li">
<a>無名氏2</a>
<span class="li1">評論內容aaaaaabbbbbbbbbbbbbbbbbbbb</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
</ul>
<div class="pinglun_area">
<textarea></textarea>
<div class="pinglun_btn1">評論</div>
<a>收起</a>
</div>
</div>
</div>
<div class="item">
<div>
<div class="item_1">
<a class="item_title">阿里云大面積癱瘓，據多地網友反應，阿里云服務器出現大面積故障，導致很多服務無法使用！原因不詳！</a>
<a class="item_url">-www.maoqiuapp.com</a>
<a class="item_addr" href="#">42區</a>
</div>
<div class="item_2">
<a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a>
<a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a>
<a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a>
<a class="user_logo">麥的垛朱尼爾</a>
<a class="time_count"><span class="time_count_1">1小時6分鐘前</span><span>入熱榜</span></a>
<a class="fenxiang"><img src="chouti_img/3.png"></a>
</div>
</div>
<div class="little_img"><a><img src="chouti_img/1.png"></a></div>
<div class="pinglun_model">
<div class="pinglun_top">
<span class="pinglun_title">最熱評論(<a>2</a>)</span>
<span class="goto_page">去評論頁面</span>
<span class="pinglun_close">x</span>
</div>
<ul class="pinglun_ul">
<li class="pinglun_li">
<a>無名氏1</a>
<span class="li1">評論內容aaaaaa</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
<li class="pinglun_li">
<a>無名氏2</a>
<span class="li1">評論內容aaaaaabbbbbbbbbbbbbbbbbbbb</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
</ul>
<div class="pinglun_area">
<textarea></textarea>
<div class="pinglun_btn1">評論</div>
<a>收起</a>
</div>
</div>
</div>
<div class="item">
<div>
<div class="item_1">
<a class="item_title">阿里云大面積癱瘓，據多地網友反應，阿里云...</a>
<a class="item_url">-www.maoqiuapp.com</a>
<a class="item_addr" href="#">42區</a>
</div>
<div class="item_2">
<a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a>
<a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a>
<a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a>
<a class="user_logo">麥的垛朱尼爾</a>
<a class="time_count"><span class="time_count_1">1小時6分鐘前</span><span>入熱榜</span></a>
<a class="fenxiang"><img src="chouti_img/3.png"></a>
</div>
</div>
<div class="little_img"><a><img src="chouti_img/1.png"></a></div>
<div class="pinglun_model">
<div class="pinglun_top">
<span class="pinglun_title">最熱評論(<a>2</a>)</span>
<span class="goto_page">去評論頁面</span>
<span class="pinglun_close">x</span>
</div>
<ul class="pinglun_ul">
<li class="pinglun_li">
<a>無名氏1</a>
<span class="li1">評論內容aaaaaa</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
<li class="pinglun_li">
<a>無名氏2</a>
<span class="li1">評論內容aaaaaabbbbbbbbbbbbbbbbbbbb</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
</ul>
<div class="pinglun_area">
<textarea></textarea>
<div class="pinglun_btn1">評論</div>
<a>收起</a>
</div>
</div>
</div>
<div class="item">
<div>
<div class="item_1">
<a class="item_title">阿里云大面積癱瘓，據多地網友反應，阿里云服務器出現大面積故障，導致很多服務無法使用！原因不詳！很多服務無法使用！原因不詳！很多服務無法使用！原因不詳！很多服務無法使用！原因不詳！</a>
<a class="item_url">-www.maoqiuapp.com</a>
<a class="item_addr" href="#">42區</a>
</div>
<div class="item_2">
<a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a>
<a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a>
<a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a>
<a class="user_logo">麥的垛朱尼爾</a>
<a class="time_count"><span class="time_count_1">1小時6分鐘前</span><span>入熱榜</span></a>
<a class="fenxiang"><img src="chouti_img/3.png"></a>
</div>
</div>
<div class="little_img"><a><img src="chouti_img/1.png"></a></div>
<div class="pinglun_model">
<div class="pinglun_top">
<span class="pinglun_title">最熱評論(<a>2</a>)</span>
<span class="goto_page">去評論頁面</span>
<span class="pinglun_close">x</span>
</div>
<ul class="pinglun_ul">
<li class="pinglun_li">
<a>無名氏1</a>
<span class="li1">評論內容aaaaaa</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
<li class="pinglun_li">
<a>無名氏2</a>
<span class="li1">評論內容aaaaaabbbbbbbbbbbbbbbbbbbb</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
</ul>
<div class="pinglun_area">
<textarea></textarea>
<div class="pinglun_btn1">評論</div>
<a>收起</a>
</div>
</div>
</div>
<div class="item">
<div>
<div class="item_1">
<a class="item_title">阿里云大面積癱瘓，據多地網友反應，阿里云服務器出現大面積故障，導致很多服務無法使用！原因不詳！</a>
<a class="item_url">-www.maoqiuapp.com</a>
<a class="item_addr" href="#">42區</a>
</div>
<div class="item_2">
<a class="dianzan"><img src="chouti_img/4.png"><b>6</b></a>
<a class="pinglun"><img src="chouti_img/5.png"><b>2</b></a>
<a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a>
<a class="user_logo">麥的垛朱尼爾</a>
<a class="time_count"><span class="time_count_1">1小時6分鐘前</span><span>入熱榜</span></a>
<a class="fenxiang"><img src="chouti_img/3.png"></a>
</div>
</div>
<div class="little_img"><a><img src="chouti_img/1.png"></a></div>
<div class="pinglun_model">
<div class="pinglun_top">
<span class="pinglun_title">最熱評論(<a>2</a>)</span>
<span class="goto_page">去評論頁面</span>
<span class="pinglun_close">x</span>
</div>
<ul class="pinglun_ul">
<li class="pinglun_li">
<a>無名氏1</a>
<span class="li1">評論內容aaaaaa</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
<li class="pinglun_li">
<a>無名氏2</a>
<span class="li1">評論內容aaaaaabbbbbbbbbbbbbbbbbbbb</span>
<span class="li2">5分鐘前發布</span>
<span class="li3">來自iPhone</span>
</li>
</ul>
<div class="pinglun_area">
<textarea></textarea>
<div class="pinglun_btn1">評論</div>
<a>收起</a>
</div>
</div>
</div>
</div>
</div>
<div id="body2_r">
<div id="body2_r_top">
<a href="#"><img src="https://dig.chouti.com/images/report.png"></a>
<a href="#" class="a2"><img src="https://dig.chouti.com/images/report_children.png"></a>
</div>
<div id="body2_r_search">
<a href="#">如何避免自己被封號</a>
</div>
<div id="body2_r_img">
<a><img src="https://dig.chouti.com/images/homepage_download.png"></a>
</div>
<div id="body2_r_hot">
<div id="body2_r_hot_1">
<span>24小時全部</span>
<span class="top10">TOP 10</span>
</div>
<div id="body2_r_hot_2">最熱榜</div>
<div id="body2_r_hot_3">
<div class="top-item">
<a class="top_count" href="#">310</a>
<a class="top_title" href="#">評分 9.8，這部只拍燒烤的紀錄片，沒吃宵夜的你千萬別點開</a>
</div>
<div class="top-item">
<a class="top_count" href="#">298</a>
<a class="top_title" href="#">評分 9.8，這部只拍燒烤的紀錄片，沒吃宵夜的你千萬別點開</a>
</div>
<div class="top-item">
<a class="top_count" href="#">210</a>
<a class="top_title" href="#">評分 9.8，這部只拍燒烤的紀錄片，沒吃宵夜的你千萬別點開</a>
</div>
<div class="top-item">
<a class="top_count" href="#">150</a>
<a class="top_title" href="#">評分 9.8，這部只拍燒烤的紀錄片，沒吃宵夜的你千萬別點開</a>
</div>
<div class="top-item">
<a class="top_count" href="#">106</a>
<a class="top_title" href="#">評分 9.8，這部只拍燒烤的紀錄片，沒吃宵夜的你千萬別點開</a>
</div>
<div class="top-item">
<a class="top_count" href="#">66</a>
<a class="top_title" href="#">評分 9.8，這部只拍燒烤的紀錄片，沒吃宵夜的你千萬別點開</a>
</div>
<div class="top-item">
<a class="top_count" href="#">36</a>
<a class="top_title" href="#">評分 9.8，這部只拍燒烤的紀錄片，沒吃宵夜的你千萬別點開</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="all_area_pub">
<div id="fenxiang_tc">
<div id="tc_title">
<span id="tc_title_1">分享新發現</span>
<span id="tc_title_2">x</span>
</div>
<div id="tc_neirong">
<div id="tc_yeqian">
<a>鏈接</a>
<a class="active">文字</a>
<a>圖片</a>
</div>
<div id="tc_text_area">
<textarea></textarea>
</div>
<div id="tc_count">
<div>還可以輸入<span id="word_count">150</span>字</div>
</div>
<div id="tc_leixing">
<span>發布到:</span>
<a class="duanzi active">段子</a>
<a class="wenda">你問我答</a>
</div>
<div id="tc_publish">
<a class="clear">清空</a>
<a class="publish active">發布</a>
</div>
</div>
</div>
</div>
<div id="all_area_login">
<div id="login_tc">
<div id="login_tc_top">
<span class="title_login">登陸</span>
<span class="title_regedit">注冊</span>
<span class="title_close">x</span>
</div>
<div id="login_tc_body">
<div id="login_tc_left">
<div id="login_input">
<div id="login_type">
<span class="phone_num">手機號登陸</span>
<span class="user_id">|</span>
<span class="user_id">用戶名登陸</span>
</div>
<div id="num_area_select">
<select>
<option>中國(+86)</option>
<option>中國香港(+852)</option>
<option>中國澳門(+853)</option>
<option>中國臺灣(+886)</option>
<input type="text" placeholder="手機號" class="username_num">
<input type="password" placeholder="密碼">
</select>
</div>
<div id="auto_login">
<span><input type="checkbox" checked="">一個月內自動登錄</span>
<span><a href="#">忘記密碼?</a></span>
</div>
<div id="login_button">
<span>登錄</span>
</div>
</div>
</div>
<div id="login_tc_right">
<div id="regedit_input">
<div id="regedit_tc_top">
<span class="phone_num">1 填寫手機號</span>
<span class="user_id"> > </span>
<span class="user_id">2 填寫基本資料</span>
</div>
<div id="num_area_select2">
<select>
<option>中國(+86)</option>
<option>中國香港(+852)</option>
<option>中國澳門(+853)</option>
<option>中國臺灣(+886)</option>
</select>
<div>
<input type="text" placeholder="手機號">
<div id="get_MsgCode">獲取驗證碼</div>
<span id="not_get_msg">收不到短信？<a href="#">獲取語音驗證碼</a></span>
</div>
</div>
<div id="checkcode_pwd">
<input type="text" placeholder="驗證碼">
<input type="password" placeholder="密碼">
</div>
<div id="next_step_button">
<span>下一步</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//點擊注冊或者登陸按鈕，顯示注冊/登陸彈窗
$('#head1_in_2 .a3').click(function(){
$('#all_area_login').css({'display':'block'});
});
//點擊彈窗的x，隱藏注冊/登陸彈窗
$('#login_tc_top .title_close').click(function(){
$('#all_area_login').css({'display':'none'});
});
//點擊登陸按鈕，關閉當前彈窗，右上角隱藏登陸/注冊按鈕，并顯示登陸用戶名
$('#login_button>span').click(function(){
$('#all_area_login').css({'display':'none'});
var username = $('#num_area_select .username_num').val();
$('#head1_in_2').css({'display':'none'});
$('#head1_in_2_2').css({'display':'inline-block'});
$('#head1_in_2_2 a').text(username)
});
//點擊發布按鈕，顯示文字輸入的彈窗
$('#body2_l_top .b3').click(function(){
$('#all_area_pub').css({'display':'block'});
});
//點擊發布彈窗的x，隱藏彈窗
$('#tc_title_2').click(function(){
$('#all_area_pub').css({'display':'none'})
});
//點擊發布彈窗的發布按鈕，隱藏當前彈窗，#body2_l_area下面增加div塊
$('#tc_publish .publish').click(function(){
if($('#tc_text_area textarea').val()){
var input_text = $('#tc_text_area textarea').val();
}else{
var input_text = '這個家伙很懶，什么內容也沒寫。';
}
$('#tc_text_area textarea').val('');
$('#all_area_pub').css({'display':'none'});
var user_name = $('#head1_in_2_2 a').text();
$('#body2_l_area').prepend('<div class="item"><div><div class="item_1"><a class="item_title">'+input_text+'</a><a class="item_url">-www.maoqiuapp.com</a><a class="item_addr" href="#">42區</a></div><div class="item_2"><a class="dianzan"><img src="chouti_img/4.png"><b>0</b></a><a class="pinglun"><img src="chouti_img/5.png"><b>0</b></a><a class="sicang"><img src="chouti_img/6.png"><b>私藏</b></a> <a class="user_logo">'+user_name+'</a><a class="time_count"><span class="time_count_1">1分鐘前</span><span>入熱榜</span></a><a class="fenxiang"><img src="chouti_img/3.png"></a></div> </div><div class="little_img"><a><img src="chouti_img/1.png"></a></div><div class="pinglun_model"><div class="pinglun_top"><span class="pinglun_title">最熱評論(<a>2</a>)</span><span class="goto_page">去評論頁面</span><span class="pinglun_close">x</span></div><ul class="pinglun_ul"></ul><div class="pinglun_area"><textarea></textarea><div class="pinglun_btn1">評論</div><a>收起</a></div></div></div>')
});
//清空按鈕事件
$('#tc_publish .clear').click(function(){
$('#tc_text_area textarea').val('')
});
//點贊功能，新增評論為后加入的元素，需要事件代理
$('#body2_l_area').on('click','.dianzan' , function(){
$(this).children('b').text(Number($(this).children('b').text())+1)
});
//輸入框字數提醒，實時監測文本框輸入數字，并且根據內容更改發布按鈕的樣式
$('#tc_text_area textarea').bind('input propertychange change',function(){
$('#word_count').text(150-$('#tc_text_area textarea').val().length);
if($('#tc_text_area textarea').val().length >=1){
$('#tc_publish .publish').addClass('active')
}else{
$('#tc_publish .publish').removeClass('active')
}
});
//點擊展開評論功能函數
$('#body2_l_area').on('click', '.pinglun', function(){
$(this).parent().parent().parent().children('.pinglun_model').css({'display':'block'});
});
//點擊評論模塊的x按鈕，隱藏評論模塊
$('#body2_l_area').on('click', '.pinglun_close', function(){
$(this).parent().parent().css({'display':'none'});
});
//點擊評論模塊的收起按鈕，隱藏評論模塊
$('#body2_l_area').on('click', '.pinglun_area a', function(){
$(this).parent().parent().css({'display':'none'});
});
//頁面評論框輸入內容使按鈕高亮
$('#body2_l_area').on('input propertychange change', '.pinglun_area textarea', function(){
if($(this).val().length >=1){
$(this).siblings('.pinglun_btn1').addClass('active')
}else{
$(this).siblings('.pinglun_btn1').removeClass('active')
}
});
//點擊評論按鈕，ul下面新增li，評論數量更新
$('#body2_l_area').on('click', '.pinglun_btn1', function(){
var user_name = $('#head1_in_2_2 a').text();
if($(this).siblings('textarea').val()){
var input_text = $(this).siblings("textarea").val();
}else{
var input_text = '無語。';
}
$(this).siblings('textarea').val('');
$(this).parent().parent().children('ul').prepend('<li class="pinglun_li"><a>'+user_name+'</a><span class="li1">'+input_text+'</span><span class="li2">1分鐘前發布</span><span class="li3">來自iPhone</span></li>')
var count_li= $(this).parent().parent().children('ul').children('li').length;
console.log(count_li);
$(this).parent().parent().children('.pinglun_top').children('.pinglun_title').children('a').text(count_li);
$(this).parent().parent().parent().children('div').children('.item_2').children('.pinglun').children('b').text(count_li)
});
</script>
</html>
總結
以上是生活随笔為你收集整理的前端开发之抽屉热搜榜的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2.4gwifi最高下载速度_2.4gw
- 下一篇： 前端MVC设计模式VSM,V,VM设计模