前端开发之抽屉热搜榜

最新推荐文章于 2023-07-24 12:36:25 发布
最新推荐文章于 2023-07-24 12:36:25 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangql517/article/details/80847209
版权
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>抽屉新热榜</title> <style type="text/css">
摘要由CSDN通过智能技术生成 
<!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
最低0.47元/天 解锁文章
huangql517
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS实现（排行榜+棋盘+表格+图片商品列表）
m0_58761900的博客
11-05 3474
1. 排行榜 2. 棋盘 3. 表格 4. 图片商品列表
用html实现一个简易的百度热榜
最新发布
m0_73740682的博客
02-28 617
练习小作品
热搜词效果代码
weixin_30737433的博客
02-02 550
- (void)createDataSource{ _dataSource = [[NSMutableArray alloc] initWithObjects:@"有意义有意义",@"额企鹅请问企鹅请问我",@"而且",@"额订单喔喔喔喔",@"维恩的",@"订单",@"方法个",@"仿佛",@"威锋网",@"方法",@"大大大", @"呃呃呃",@"鹅鹅鹅鹅鹅鹅饿",nil...
搜索插件实现热搜词，历史查询功能
lee2813的博客
04-20 909
一、wxSearchView插件介绍： wxSearchView为一个改良后的微信搜索插件，即装即用。 下载链接： 使用步骤： 把文件包解压放在微信目录下，导入到设定的搜索页面中。 导入语句如下： @import "../../wxSearchView/wxSearchView.wxss";//导入wxss文件 var WxSearch = require('../../wxSearchView/wxSearchView.js');// 导入js文件 <include src="../../w
前端:运用html+css+js模仿百度热搜电影榜鼠标移入特效
坚持不懈的大白的博客
07-24 1689
百度热搜上电影榜鼠标移入特效如上图所示。个人觉得上述特效实现原理为使用相对定位、绝对定位实现的(鼠标移入和没有移入时，元素布局有一些不同而已)。至于鼠标移入时，出现延迟效果，则是在css上设置transition(用于设置过渡效果的)实现的。我的实现效果如下(只把那个特效实现，其他元素布局没有搞)
抽屉新热榜
06-14
抽屉新热榜-最好玩的新闻软件
Android开发之DrawerLayout实现抽屉效果
01-05
谷歌官方推出了一种侧滑菜单的实现方式（抽屉效果），即 DrawerLayout，这个类是在Support Library里的，需要加上android-support-v4.jar这个包。 使用注意点 1、DrawerLayout的第一个子元素必须是默认内容，即抽屉...
WEB前端爱新鲜抽屉式特效
04-16
总的来说，"WEB前端爱新鲜抽屉式特效"是Web前端开发中的一个实用技巧，它结合了JavaScript动态控制和CSS3动画，为用户带来了丰富的视觉体验和交互感受。掌握并灵活运用这种特效，可以帮助开发者提升网站或应用的用户...
iOS开发之抽屉效果实现
12-22
说道抽屉效果在iOS中比较有名的第三方类库是PPRevealSideViewController。一说到第三方类库自然而然的想到我们的CocoaPods，的博客中用CocoaPods引入PPRevealSideViewController，然后在我们的工程中以代码结合...
jQuery百度新闻热搜词代码.zip
07-04
jQuery百度新闻热搜词代码，鼠标滑过标签，文字层动画向下滑出，鼠标滑走，文字层动画向下消失。
HTML5制作的精美前端音乐页面
11-12
一个静态页面，包含css，js，html等内容，可以播放音乐
iOS开发之路–仿网易抽屉效果
01-05
// 19_抽屉效果_仿网易 // // Created by beyond on 14-8-1. // Copyright (c) 2014年 com.beyond. All rights reserved. // #import #import LeftTableViewControllerDelegate.h @interface BeyondViewController ...
2023 抖音\百度\哔哩哔哩热搜热榜单页HTML源码
07-20 645
抖音、百度、哔哩哔哩热搜热榜单页的HTML源码。一个方便的工具，可通过对接官方接口实时更新热搜内容。用户可以通过点击标题直接跳转到相关的热搜内容，并且可以根据接口文档的指引添加其他平台的热搜。通过使用这个工具，用户可以实时获取抖音、百度、哔哩哔哩等平台的热搜内容，并且能够快速跳转到相关的内容页面。如果需要添加其他平台的热搜，只需按照接口文档的要求进行相应的配置即可。2.根据接口文档的说明，对接抖音、百度、哔哩哔哩等平台的官方接口。4.在页面上展示热搜标题，并为每个标题添加跳转链接。
【React】从零搭建一个纯前端起始页浏览器插件（二）：搜索框关键词推荐（搜索建议）
Howie_Why的博客
06-02 774
本文主要和大家分享讲解了如何获取搜索建议，以及其中的一些关键性的问题
抽屉新热榜html源码,利用scrapy获取抽屉新热榜的标题和内容以及新闻地址保存到本地...
weixin_32016817的博客
06-15 231
1、安装scrapypip3 install scrapy2、打开terminal，cd 到想要创建程序的目录下3、创建一个scrapy项目在终端输入：scrapy startproject my_first_scrapy(项目名)4、在终端输入：cdmy_first_scrapy 进入到项目目录下5、新建爬虫：输入： scrapy genspider chouti chouti.com (...
仿写微博热榜的HTML+CSS(静态页面)
qq_44723773的博客
09-27 4809
效果 效果图： 源码： <!-- * @Author: OriginalCoder * @Date: 2020-09-10 21:34:31 * @version: * @LastEditors: OriginalCoder * @LastEditTime: 2020-09-15 15:21:10 * @Descripttion: --> <!DOCTYPE html> <html lang="en"> <head> <meta
微博热搜榜html源码,几行代码完成微博热搜榜爬虫
weixin_29696567的博客
06-05 3424
每天微博热搜都在不定时的变，通过抓取热搜数据，可以方便我们知道每天的热搜内容。python的几行代码就能简单爬取到热搜的数据。1.数据抓取首先，我们得知道微博热搜内容的具体链接。如下图所示，通过访问网站链接，可以拿到当天此时的热搜数据。接下来，我们需要通过代码去实现它。image.pngdef get_html_data(self):res = requests.get(self.url, hea...
Web前端开发-关注热榜
Zero
05-17 381
HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>关注热榜</title> <link rel="stylesheet" type="text/css" href="../css/关注热榜.css" /> </head> <body> <div id="div-newList"&..
谷歌Material Design中文版全面更新，前端开发必读
在Android开发中，Material Design提供了丰富的UI组件和工具，如按钮、输入框、滑动切换、抽屉导航等，这些组件遵循Material Design的样式和交互原则，可以帮助开发者快速构建符合设计规范的应用。开发者可以通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值