仿写微博热榜的HTML+CSS(静态页面)

最新推荐文章于 2021-07-26 11:32:53 发布
最新推荐文章于 2021-07-26 11:32:53 发布
阅读量5.2k 收藏 44
点赞数 10
分类专栏： 04-前端技术 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44723773/article/details/108830061
版权

效果

效果图：
在这里插入图片描述

源码：

<!--
 * @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 charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博热搜榜</title>
    <style>
        .wrap {
            width: 900px;
            margin: 0 auto;
            position: relative;
            padding-top: 10rpx;
        }
        #left {
            flex-direction: column;
            width: 450px;
            height: 750px;
            background-image: linear-gradient(#e0dddd, #fff);
            position: absolute;
            top: 0;
            left: 0;
        }

        #right {
            flex-direction: column;
            width: 450px;
            height: 750px;
            color: #fff;
            /* background-image: url(https://ww1.sinaimg.cn/bmiddle/ca6a0e02ly1gemi4jmvrlj20k00k0tav.jpg); */
            position: absolute;
            top: 0;
            right: 0;
        }

        #title1 {
            font-size: 1.4rem;
            font-weight: bold;
            padding-left: 1ch;
        }

        #title2 {
            color: #000;
            font-size: 2.3rem;
            font-weight: bold;
            padding-left: 2ch;
            padding-top: 20px;
        }

        .container1 {
            padding-left: 1rem;
        }

        .container2 {
            display: inline-block;
            padding-top: 1rem;
            padding-left: 3rem;
            /* padding-left: 2rem; */
        }

        .top {
            font-size: 20px;
            margin-left: 120px;
            position: relative;
            font-weight: bold;
        }

        .content {
            margin-left: 120px;
            position: relative;
        }

        .box {
            display: flex;
            margin: 20px 0;
        }

        .box img {
            border-radius: 5px;
            overflow: hidden;
            box-shadow: 10px 10px 5px #888;
        }

        .box .txt {
            margin-left: 20px;
        }
        .box .tags {
            font-size: 5px;
            color: #000;
        }
        .number {
            color: #eb7350;
            font-size: 1rem;
            font-weight: bold;
        }
        .badge1 {
            width: 44px;
            height: 16px;
            color: #fff;
            background: #ee0808;
            text-align: center;
            border-radius: 10px;
            line-height: 16px;
            overflow: hidden;
            font-weight: normal;
        }
        .badge2 {
            width: 44px;
            height: 16px;
            color: #fff;
            background: #e25017;
            text-align: center;
            border-radius: 10px;
            line-height: 16px;
            overflow: hidden;
            font-weight: normal;
        }
        .badge3 {
            width: 44px;
            height: 16px;
            color: #fff;
            background: #c7724b;
            text-align: center;
            border-radius: 10px;
            line-height: 16px;
            overflow: hidden;
            font-weight: normal;
        }
        .badge4 {
            width: 44px;
            height: 16px;
            color: #fff;
            background: #e29b58;
            text-align: center;
            border-radius: 10px;
            line-height: 16px;
            overflow: hidden;
            font-weight: normal;
        }
        .badge5 {
            width: 44px;
            height: 16px;
            color: #fff;
            background: #d6a16c;
            text-align: center;
            border-radius: 10px;
            line-height: 16px;
            overflow: hidden;
            font-weight: normal;
        }
        
        .topic {
            font-size:20px;
            font-weight: bold;
            margin-bottom:8px;
        }

        .subtitle {
            width: 310px;
            color: #000;
            font-size: 10px;
            margin-top:3px;
            margin-left: 3px;
            word-break: break-all;
            text-overflow: ellipsis;/**显示省略号**/
            display: -webkit-box; /* 将对象作为伸缩盒子模型显示 */      
            -webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-line-clamp: 1; /** 显示的行数 **/
            overflow: hidden;  /** 隐藏超出的内容 **/
        }
        
    </style>
</head>

<body>

    <div class="wrap">
        <div id="left">
            <p id="title1">微博热门话题</p>
            <div class="container1">
                <div class="box">
                    <img src="https://wx2.sinaimg.cn/large/001WLsZ7ly1gilu1auknrj60dw0dwgmt02.jpg" width="95"
                        height="95" alt="">
                    <div class="txt">
                        <span class="badge1">TOP1</span>
                        <a href="https://3w.huanqiu.com/a/de583b/3zppNXp1KRQ?agt=20">
                            <span class="topic">#华为高管回应芯片#</span>
                            <div class="subtitle">芯片问题给了企业反思，没有选择就是最好的选择。“限制反而让大家有一个非常好的机会，危、机并存。”</div>
                        </a>
                        <div class="tags">
                            <p><span class="number">8亿</span></span>次阅读，<span class="number">30万</span>次讨论</p>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="https://wx1.sinaimg.cn/large/005vnhZYly1gimcxhk77bj60dw0dwgmb02.jpg" width="95"
                        height="95" alt="">
                    <div class="txt">
                        <span class="badge2">TOP2</span>
                        <a href="https://weibo.com/ttarticle/p/show?id=2309354547871260409868">
                            <sanp class="topic">#国产新冠灭火病毒疫苗#</sanp>
                            <div class="subtitle">国药集团中国生物负责人就新冠灭活疫苗紧急使用和海外III期临床研究情况接受媒体采访时透露，<br>
                                国药中国生物研制的两款新冠灭活疫苗紧急使用，已经接种了数十万人次，无一例明显不良反应，
                                无一人感染；其中打完疫苗之后去海外高风险国家和地区的数万人，截至目前实现了零感染。</div>

                        </a>
                        <div class="tags">
                            <p><span class="number">5亿</span>次阅读，<span class="number">20万</span>次讨论</p>
                        </div>
                        
                    </div>
                </div>
                <div class="box">
                    <img src="https://wx1.sinaimg.cn/large/002TLsr9ly1gikhy8sbvmj60dw0dwgmd02.jpg" width="95"
                        height="95" alt="">
                    <div class="txt">
                        <span class="badge3">TOP3</span>
                        <a href="https://weibo.com/tv/show/1034:4547372995510298?from=old_pc_videoshow">
                            <span class="topic">#外卖平台设置多等五分钟#</span>
                            <div class="subtitle">有外卖平台回应，会为用户设置“我愿意多等5分钟/10分钟”按钮。你认为此举是否能缓解外卖员的“时间压力”？</div>
                        </a>
                        <div class="tags">
                            <p><span class="number">4.8亿</span>次阅读，<span class="number">15万</span>次讨论</p>
                        </div>
                        
                    </div>
                </div>
                <div class="box">
                    <img src="https://wx2.sinaimg.cn/large/001WLsZ7ly1gimh1pq6otj60cy0cymye02.jpg" width="95"
                        height="95" alt="">
                    <div class="txt">
                        <span class="badge4">TOP4</span>
                        <a href="https://s.weibo.com/weibo?q=%23%E9%AB%98%E6%A0%A1%E4%B8%8D%E5%BE%97%E4%BB%A5%E4%BB%BB%E4%BD%95%E6%96%B9%E5%BC%8F%E5%BC%BA%E8%BF%AB%E6%AF%95%E4%B8%9A%E7%94%9F%E7%AD%BE%E7%BA%A6%23#_loginLayer_1599810400574">
                            <span class="topic">#宠物博主让狗当大胃王#</span>
                            <div class="subtitle">某短视频平台上，当有人挑战喂狗几十种零食后，就有人不服，敢挑战100种。还有博主喂狗吃3斤的牛心，或是满满一大铁盆鸡腿。
                                评论里有网友开玩笑，让博主教狗狗催吐。还有网友指出，博主为了卖货不择手段。除了让狗吃过量的食物外，还有人强迫狗吃辣椒、跳跳糖等。</div>
                        </a>
                        <div class="tags">
                            <p><span class="number">4.1亿</span>次阅读，<span class="number">10万</span>次讨论</p>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="https://wx2.sinaimg.cn/large/001N9Ovwly1gimk9xqvvkj60dw0dw3z502.jpg" width="95"
                        height="95" alt="">
                    <div class="txt">
                        <span class="badge5">TOP5</span>
                        <a href="https://s.weibo.com/weibo?q=%23%E5%AF%B9%E4%BA%8E%E5%A5%B3%E6%80%A7%E8%83%96%E7%98%A6%E6%98%AF%E5%90%A6%E5%A4%AA%E8%8B%9B%E5%88%BB%E4%BA%86%23">
                            <span class="topic">#对于女性胖瘦是否太苛刻了#</span>
                            <div class="subtitle">近年来对于女性身材的主流审美多为“以瘦为美”，减肥伴随着许多女性的一生。你认为，人们对于女性胖瘦是否太苛刻了？</div>
                        </a>
                        <div class="tags">
                            <p><span class="number">3.1亿次</span>次阅读，<span class="number">9万</span>次讨论</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="right">
            <p id="title2">微博热门话题</p>
            <div class="container2">
                <div class="box">
                    <img src="https://wx2.sinaimg.cn/large/001WLsZ7ly1gilu1auknrj60dw0dwgmt02.jpg" width="95"
                        height="95" alt="">
                    <div class="txt">
                        <a href="https://3w.huanqiu.com/a/de583b/3zppNXp1KRQ?agt=20">
                            <span class="topic">#华为高管回应芯片#</span>
                            <div class="subtitle">芯片问题给了企业反思，没有选择就是最好的选择。“限制反而让大家有一个非常好的机会，危、机并存。”</div>
                        </a>
                        <div class="tags">
                            <p><span class="number">8亿</span></span>次阅读，<span class="number">30万</span>次讨论</p>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="https://wx2.sinaimg.cn/large/001WLsZ7ly1gilu1auknrj60dw0dwgmt02.jpg" width="95"
                        height="95" alt="">
                    <div class="txt">
                        <a href="https://3w.huanqiu.com/a/de583b/3zppNXp1KRQ?agt=20">
                            <span class="topic">#华为高管回应芯片#</span>
                            <div class="subtitle">芯片问题给了企业反思，没有选择就是最好的选择。“限制反而让大家有一个非常好的机会，危、机并存。”</div>
                        </a>
                        <div class="tags">
                            <p><span class="number">8亿</span></span>次阅读，<span class="number">30万</span>次讨论</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
HTML5+CSS大作业——仿新浪微博个人主(4页)
11-30 1149
HTML5+CSS大作业——仿新浪微博个人主(4页) 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载! 获取更多源码 PC电脑端关注我们 ????作者主页-更多源码 ????HTM
微博热搜榜html源码,几行代码完成微博热搜榜爬虫
weixin_29696567的博客
06-05 3681
每天微博热搜都在不定时的变，通过抓取热搜数据，可以方便我们知道每天的热搜内容。python的几行代码就能简单爬取到热搜的数据。1.数据抓取首先，我们得知道微博热搜内容的具体链接。如下图所示，通过访问网站链接，可以拿到当天此时的热搜数据。接下来，我们需要通过代码去实现它。image.pngdef get_html_data(self):res = requests.get(self.url, hea...
用HTML+CSS制作微博的静态页面.zip
07-30
微博的静态页面，框架一样。有些内容是重复的，用了乱数假文。花费了一周时间，因为电脑分辨率不同，可能显示效果有些偏差。
微博静态页面
11-09
新浪微博静态页面，运用HTML5+CSS3，简洁直观，代码整齐，易于理解，适合初学者。
html新浪搜索框,JS+CSS实现仿新浪微博搜索框的方法
weixin_36150766的博客
06-04 616
本文实例讲述了JS+CSS实现仿新浪微博搜索框的方法。分享给大家供大家参考。具体实现方法如下：JS+CSS仿类似新浪微博搜索框的效果* { padding:0; margin:0;}body { font-size:14px; }#box { width:600px; margin:40px auto;}#in { width:240px; height:24px; line-height:24p...
基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.zip
12-17
基于html+css+js实现的模仿华为商城静态网页源码+项目说明（附静态网页效果链接）.zip 课程作业 静态网页设计实现 模仿华为商城静态网页源码 附静态网页效果链接 项目说明 html+css+js实现 基于html+css+js实现的...
苹果官网页面仿写（纯html+css)
04-09
仿写苹果官网，纯html+css,零基础学了三天小成果，使用hbuilder软件
小米商城仿写css+html纯静态
08-06
【小米商城仿写css+html纯静态】是一个项目实践，旨在通过模仿小米商城的网页设计，学习和掌握HTML和CSS的基础知识以及实际应用。在这个过程中，你可以了解到如何构建一个静态的网页布局，包括头部、导航栏、商品...
HTML+CSS仿写京东购物车静态页面附代码（web前端期末大作业）
最新发布
07-28
HTML+CSS仿写京东购物车静态页面附代码（web前端期末大作业）
html+css+js防笔趣阁首页
03-23
标题“html+css+js防笔趣阁首页”揭示了这个项目是使用HTML、CSS和JavaScript这三种核心技术来实现一个与“笔趣阁”首页高度相似的页面。这个项目可能是为了学习、练习或者理解如何构建一个类似网站的前端部分。 1....
微博 html静态微博
03-12
html，css，javascript些出来的静态的微博，全面动态模仿了微博系统
新浪微博制作的前端页面HTML与CSS代码
09-09
新浪微博制作前端页面HTML与CSS代码，适用于刚接触前端并有些许了解的小白学习
html+css+js 简易微博系统.zip
04-08
利用html+css+js作为前端语言和php作为后台语言，采用前端与后台分离的设计方式，主要实现新用户注册，用户登录，发微博（包括文字，表情，音乐，视频），评论微博，转发微博，关注用户，私信等功能。 PHP（全称：PHP: Hypertext Preprocessor）是一种广泛应用于Web开发的开源脚本语言，以其易学易用、高效灵活的特性深受广大开发者喜爱。诞生于1995年，由Rasmus Lerdorf创建，PHP最初用于简单的网页动态处理，如今已发展成为一款功能齐全、生态丰富的全栈开发工具，支持从网站前端交互到后端业务逻辑、数据库操作乃至API接口开发的全方位需求。 PHP的一大特点在于其与HTML的深度融合，可以直接嵌入到HTML文档中，通过特殊的起始标签“<?php”和结束标签“?>”界定PHP代码段。这种特性使得开发者能够轻松地在静态网页中插入动态内容，实现数据渲染、条件判断、循环处理等功能，极大地简化了Web开发流程。同时，PHP也支持纯脚本文件编写，适用于构建复杂的后台逻辑。 PHP语法简洁明了，借鉴了C、Perl等语言的特点，易于理解和学习，对于初学者友好。它支持面向过程、面向对象以及函数式编程范式，可根据项目需求和开发者喜好灵活选择。PHP内置丰富的数据类型（如整型、浮点型、字符串、数组、对象等），并提供了大量的预定义函数，涵盖了字符串操作、数学运算、文件系统处理、日期时间处理、数据库连接等常见功能，极大提高了开发效率。 在Web开发中，PHP与MySQL数据库的搭配尤为经典。PHP提供mysqli、PDO等数据库扩展，能够无缝连接MySQL，进行SQL查询、数据插入、更新、删除等操作，实现动态网站的数据持久化。此外，PHP还支持与其他数据库系统的连接，如PostgreSQL、SQLite、Oracle等，具有良好的数据库兼容性。 PHP拥有庞大的开发者社区和丰富的开源项目，如内容管理系统（CMS）WordPress、Drupal、Joomla，框架 Laravel、Symfony、CodeIgniter等，为开发者提供了丰富的代码资源和快速开发的便利。同时，官方维护的PHP文档详尽全面，社区活跃的技术论坛和问答网站为学习和解决问题提供了有力支持。 在性能优化方面，PHP支持 opcode 缓存（如APC、OpCache）以加速脚本执行，可通过配置调整、代码优化、使用缓存技术等手段提升应用性能。近年来，PHP持续进行性能改进与新特性的引入，如PHP 7系列版本在速度上有了显著提升，新增了类型声明、标量类型提示、null合并运算符等语法特性，进一步提升了开发效率和代码质量。 总的来说，PHP作为一种成熟的Web开发语言，凭借其易用性、灵活性、丰富的库与框架支持、强大的社区生态以及持续的性能优化，成为了构建各类动态网站、Web应用及API服务的理想选择。
html+css实现猫眼电影“榜单”静态页面
weixin_45762315的博客
11-17 6148
首页 首页...
html搜狐热搜列表仿写,织梦列表页获取热搜排行榜文章
weixin_34081553的博客
06-20 412
001//列表页获取网友热搜 24小时002function GetHotSearch($tid){003global $dsql;004$time = time() - 86400;005$sql = "select * from dede_archives where typeid = '$tid' and shorttitle <> '' group by shorttitle ...
XMLHttpRequest对象进行post和get请求
xm_w_xm的博客
03-20 2724
XMLHttpRequest 对象用于在后台与服务器交换数据。 在不重新加载页面的情况下更新网页 在页面已加载后从服务器请求数据 在页面已加载后从服务器接收数据 在后台向服务器发送数据 let request =new XMLHttpRequest(); request.open("post","http://admin.fengdumao.cn/api/works/getWor...
六行代码爬取微博热搜榜
BuXianShan的博客
07-27 2789
六行代码爬取微博热搜榜
python +flask 制作一个实时热搜采集接口 加入百度热搜和微博热搜 并实时滚动代码 嵌入到你的帝国CMS或WP博客 或任意框架网站
ZhiMaoYiDeHuaiRen的博客
07-26 1404
示例帝国CMS网站效果： 超级简单的实现,两个步骤搞定： 1.写python采集接口，采集数据。 接口代码：需要安装对应的库。 # coding=utf-8 import re import urllib.parse import random import requests import datetime from flask import Flask from flask import request def getweibo(): url = 'https://s.weibo.com/to
静态京东首页仿写教程：HTML+CSS源码解析
资源摘要信息:"本资源为使用HTML和CSS技术实现的京东首页静态页面源代码，适合用于个人学习和教学场景，比如作为课程学习或期末项目仿写之用。" 知识点详细说明: 1. HTML基础应用： HTML（HyperText Markup ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王菜鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值