前端开发之抽屉热搜榜
2024-06-01 01:59:13
<!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>
前端开发之抽屉热搜榜相关推荐
- python热搜_Python实例---抽屉热搜榜前端代码分析
欢迎来到FTL的网站 /*------------------------------------头部信息开始------------------------*/ * { margin: 0; pad ...
- Python抓取网易云音乐热搜榜热评
引子 啊~最有个小姐姐要做微信公众号,她需要优质的句子.文章,于是我想到了网易云每首伤感歌曲下面的评论,嗯~很感人,甚至有的时候真的感觉这里就是能触及我心灵最柔软的地方,正好这几天在学习python, ...
- 互联网日报 | 微博热搜榜被暂停更新一周；陆正耀辞任神州租车董事会主席；教育部严格国际学生申请资格...
今日看点 ✦ 北京市网信办依法约谈处罚新浪微博,暂停更新微博热搜榜一周 ✦ 陆正耀辞任神州租车董事会主席职务,专注神州优车业务 ✦ 京东超市与蒙牛升级战略合作,签3年200亿销售目标 ✦ 打通种草.预 ...
- Python爬取微博热搜榜，将数据存入数据库
一直想学习用Python来进行数据的爬取,也一直想知道Python连接数据库的操作,今天刚好看到的这篇文章满足了这两个条件,我试着爬了下微博,并成功将数据添加到数据库中,颇为欢喜.作者写的很简单,有些 ...
- 爬虫—爬取微博热搜榜
1. 引言 利用scrapy框架爬取微博热搜榜网站前50条热搜. 爬取信息:热搜排名.热搜新闻名.热搜新闻热搜量. 数据存储:存储为.csv文件. 2.爬取流程 新建scrapy爬虫项目: 在终端输入 ...
- python爬取微博热搜显示到折线图_微博热搜榜前20信息数据爬取进行数据分析与可视化...
一.设计方案 1.主题式网络爬虫名称:微博热搜榜前20信息数据爬取进行数据分析与可视化 2.爬取内容与数据特征分析:爬取微博热搜榜前20热搜事件.排名与热度,数据呈一定规律排序. 3.设计方案概述:思 ...
- 2017未来发布峰会召开 未来图灵发布《AI明星企业家热搜榜》
11月25日,由财视传媒.未来图灵主办的2017未来发布峰会在国家会议中心隆重召开.这是继今年10月未来图灵发布后再一次重磅亮相.在下半场的未来图灵峰会专场上,聚集了京东集团CTO张晨.百度度秘事业部 ...
- 谁是AI行业最受关注的人？未来图灵发布《AI明星企业家热搜榜》
AI时代正在加速到来.在2017年的AI行业中,哪些企业家成为了人工智能这一前沿领域最受关注的名字?又有哪些企业家在创新AI应用的道路上越走越远? 11月25日,2017未来发布峰会在北京国家会议中心 ...
- 【今日头条】热文周榜、热搜榜
所有平台热榜网:https://tophub.today/ 今日头条 热文周榜:https://tophub.today/n/20MdKa2ow1 热搜榜(需登录):https://mp.toutia ...
- 新浪微博被罚了，暂停更新微博热搜榜一周
6月10日消息,据"网信中国"微信号发布的消息,国家互联网信息办公室指导北京市互联网信息办公室,约谈新浪微博负责人,针对微博在蒋某舆论事件中干扰网上传播秩序,以及传播违法违规信息等 ...
最新文章
- jsp内置对象page
- pandas apply()函数参数 args
- ELK日志管理之——elasticsearch部署
- Nature论文解读：用于改善加权生物网络信噪比的网络增强方法
- 怎样将employee 加到Territory里
- Nginx源码分析-启动初始化过程（一）
- android中拖拽浮动按钮,Android自定义view实现拖拽选择按钮
- PostgreSQL 荣获 2019 年 O'Reilly 终身成就奖
- python元素相邻_在python中,如何根据键(相邻组)将元素分组在...
- WEB-INF目录结构
- 机器学习落地的五个阶段
- Composer Laravel 下载安装
- 【计算机网络 1】计算机网络概述，nginx原理jiangmo
- 到极地拍摄北极熊 你需要这样的装备
- DRM破解再升级 支持新版WM11
- 关于网络、交换机、路由器
- ddr布线 pads_[转载]Pads Router布线技巧,等长，蛇线，差分
- springboot红色吕梁网站的设计与开发毕业设计源码150923
- element table 表头固定,表格高度自适应
- 13.56M芯片OBU方案——SI522