前端开发之抽屉热搜榜

74 阅读 0 评论 49 点赞
我是靠谱客的博主纯真蜜蜂，最近开发中收集的这篇文章主要介绍前端开发之抽屉热搜榜，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述

<!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>