当前位置：首页 > news >正文

【JAVA WEB】百度热榜实现新闻页面 Chrome 调试工具

news 2026/5/19 11:33:11

百度热榜

新闻页面

Chrome 调试工具 --查看css属性

打开调试工具的方式

标签页含义

百度热榜

实现效果：

实现代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a{color: blue;text-decoration: none;}a:hover{text-decoration: underline;}table{width:536px;}.title .col-1{font-size: 20px;font-weight: bolder;}.col-1{width: 80%;text-align: left;}.col-2{width: 20%;text-align: right;}.icon{background-image: url(./refersh.png);width: 24px;height: 24px;background-size: 100% 100%;/* 这个元素是行内块级元素 */display: inline-block;vertical-align: bottom;}.content{font-size: 18px;line-height: 40px;}.content .col-1,.content .col-2{border-bottom: 2px solid #f3f3f3;}.num{font-size: 20px;color:#fffff3;}.first{padding-left: 8px;background-color: #f54545;padding-right: 8px;}.second{padding-left: 8px;background-color: #ff8547;padding-right: 8px;}.third{padding-left: 8px;background-color: #ffac38;padding-right: 8px;}.other{padding-left: 8px;background-color: #8eb9f5;padding-right: 8px;}</style>
</head>
<body><table cellspacing="0px"><th class="title col-1">百度热榜</th><th class="title col-2"><a href=""#>换一换<span class="icon"></span></a></th><tr class="content" ><td class="col-1"><span class="num first" >1</span><a href="#">新闻内容</a></td><td class="col-2">474万</td></tr><tr class="content"><td class="col-1"><span class="num second">2</span><a href="#">新闻内容</a></td><td class="col-2">474万</td></tr><tr class="content"><td class="col-1"><span class="num third">3</span><a href="#">新闻内容</a></td><td class="col-2">474万</td></tr><tr class="content"><td class="col-1"><span class="num other">4</span><a href="#">新闻内容</a></td><td class="col-2">474万</td></tr></table>
</body>
</html>

新闻页面

页面内容包含：

标题：居中加粗

发布日期：右对齐

分割线：提示，可以用hr标签

正文/段落：左侧缩进

插图：居中显示

落款：右对齐

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.title {text-align: center;font-weight: bolder;font-family: '微软雅黑';font-size:40px;}.time{text-align: right;color:cadetblue;}p {text-indent: 2em;}.picture{text-align: center;}.final{text-align: right;}</style>
</head>
<body><div><h1 class="title">这是新闻标题</h1><p class="time">2024年2月1日</p><hr></div><div><p>这是我们新闻的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段的第一段</p><p>这是我们新闻的第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段第二段</p><div class="picture"><img src="https://img0.baidu.com/it/u=3475486848,1023491406&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=728" alt="" width="200px" height="300px"></div><p>这是我们新闻的第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段第四段</p><p>这是我们新闻的第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段第五段</p></div><div class="final">这是落款</div>
</body>
</html>

Chrome 调试工具 --查看css属性

打开调试工具的方式

打开浏览器

有两种方式可以打开Chrome 调试工具

直接按F12
鼠标右键页面 => 检查元素

标签页含义

element 查看标签结构

console 查看控制台

source 查看源码+断点调试

network 查看前后端交互过程

application 查看浏览器提供的一些扩展功能

【JAVA WEB】百度热榜实现新闻页面 Chrome 调试工具

目录百度热榜新闻页面 Chrome 调试工具 --查看css属性打开调试工具的方式标签页含义百度热榜实现效果： 实现代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"vi…...

编程日记 2024/2/11 22:04:50

Linux——动静态库

基础知识:动vs静类型动静加载时机运行时编译时可复用性多个文件只需要加载一份库文件每个文件都需要加载一份文件性能链接次数越多越有优势链接次数越少越有优势代码编写静态库生成静态库 libmath.a:add.o sub.oar -rc $ $^%.o:%.cgcc -c $<使用静态库头文件和工…...

编程日记 2024/2/11 22:01:47

Vulnhub靶机：hacksudo-search

一、介绍运行环境：Virtualbox 攻击机：kali（10.0.2.15） 靶机：hacksudo-search（10.0.2.50） 目标：获取靶机root权限和flag 靶机下载地址：https://download.vulnhub.co…...

编程日记 2024/2/11 21:58:43

Leetcode 188 买卖股票的最佳时机 IV

题意理解： 给你一个整数数组 prices 和一个整数 k ，其中 prices[i] 是某支给定的股票在第 i 天的价格。设计一个算法来计算你所能获取的最大利润。你最多可以完成 k 笔交易。也就是说，你最多可以买 k 次，卖 k 次。注意&#xf…...

编程日记 2024/2/11 21:48:34

win32编程系统BUG（Win32 API中的WM_SETTEXT消息）

由于频繁使用Win32 API中的WM_SETTEXT消息，导致内存占用直线上升。暂未找到有效解决方案。...

编程日记 2024/2/11 21:47:33

Linux防火墙开放

记录一次问题写的网络服务无法通信代码没问题，IP绑定、端口绑定没问题，就是无法进行通信，这里要分2步走。服务器控制台开放进入防火墙添加规则，这里以开放udp的8899端口为例这里在服务器后台就已经开放了，但此时…...

编程日记 2024/2/11 21:45:31

概要通过 docker-compose 以 Session Mode 部署 flink 前置依赖 Docker、docker-composeflink 客户端docker-compose.yml version: "2.2" services:jobmanager:image: flink:1.17.2ports:- "8081:8081"command: jobmanagervolumes:- ${PWD}/checkpoin…...

编程日记 2024/2/11 21:41:27

HarmonyOS ArkTS修改App的默认加载的界面（二十）

前言：在Android开发中想要修改默认启动页，只需要在AndroidManifest.xml中设置即可只需要在启动的activity种添加如下属性即可 <intent-filter><action android:name"android.intent.action.MAIN" /><category android:name&qu…...

编程日记 2024/2/11 21:39:25

【前端高频面试题--Vue基础篇】

🚀 作者 ：“码上有前” 🚀 文章简介 ：前端高频面试题 🚀 欢迎小伙伴们点赞👍、收藏⭐、留言💬前端高频面试题--Vue基础篇 Vue基本原理双向绑定与MVVM模型Vue的优点计算属性与监听属性计算属性监…...

编程日记 2024/2/11 21:33:20

Spring Boot 实现热插拔 AOP

现在有这么一个需求：就是我们日志的开与关是交给使用人员来控制的，而不是由我们开发人员固定写死的。大家都知道可以用aop来实现日志管理，但是如何动态的来实现日志管理呢？aop源码中的实现逻辑中有这么一个步骤，就是会依次扫描Advice的实现类，然后执行。我们要做的就是自…...

编程日记 2024/2/11 21:28:16

2月05日，每日信息差

第一、全球首套5G及6G天地一体网络低轨试验卫星发射入轨、。据了解，“中国移动01星”是全球首颗可验证5G天地一体演进技术的试验卫星，它搭载的基站可以利用卫星的广覆盖优势把5G信号传送到地面网络无法覆盖到的地方；另外一颗“‘星核’验证星…...

编程日记 2024/2/11 21:27:15

使用Python进行数据的描述性分析，用少量的描述性指标来概括大量的原始数据

在进行数据分析时，当研究者得到的数据量很小时，可以通过直接观察原始数据来获得所有的信息。但是，当得到的数据量很大时，就必须借助各种描述性指标来完成对数据的描述工作。用少量的描述性指标来概括大量的原始数据，对…...

编程日记 2024/2/11 21:24:11

【JS逆向三】逆向某某网站的sign参数，并模拟生成仅供学习

逆向日期：2024.02.06 使用工具：Node.js 类型：webpack 文章全程已做去敏处理！！！ 【需要做的可联系我】可使用AES进行解密处理（直接解密即可）：AES加解密工具 1、打开某某…...

编程日记 2024/2/11 21:21:08

移动光猫gs3101超级密码及改桥接模式教程

文章目录超级管理员账号改桥接模式路由器连接光猫，PPPOE拨号即可！附录：如果需要改桥接的话不知道拨号密码咋办打开光猫Telnet功能Telnet 登录参考文章移动光猫吉比特GS3101超级账号获取更改桥接移动光猫gs3101超级密码及改桥接模式教程 …...

编程日记 2024/2/11 21:20:06

leetcode 153

153 寻找旋转排序数组中的最小值这道题，如果我们熟悉数组 api，可以直接用 Arrays.sort()秒杀，这个方法使用了双轴快速排序算法。解法1如下： class Solution {public int findMin(int[] nums) {Arrays.sort(nums);return nums…...

编程日记 2024/2/11 21:18:04

【MySQL】数据库的基础——数据库的介绍、MySQL的介绍和架构、SQL分类、MySQL的基本使用、MySQL的存储引擎

文章目录 MySQL1. 数据库的介绍1.2 主流数据库 2. MySQL的介绍2.1 MySQL架构2.2 SQL分类2.3 MySQL的基本使用2.4 MySQL存储引擎 MySQL 1. 数据库的介绍数据库（Database，简称DB）是按照数据结构来组织、存储和管理数据的仓库。它是长期存储在计…...

编程日记 2024/2/11 21:16:02

后端的技术设计文档

一、背景 1.简介 2.业务规划(非必需) 3.工作项拆解拆解成多个工作项，每个工作项，需要多少人力。 4.资源评估(非必需) 有没有新的服务二、架构设计 1.架构图(非必需，新服务比较需要) 2.技术选型 SpringCloud、Redis、Mysql、Myba…...

编程日记 2024/2/11 21:14:00

Windows10安装PCL1.14.0及点云配准

一、下载visual studio2022 下载网址：Visual Studio: 面向软件开发人员和 Teams 的 IDE 和代码编辑器 (microsoft.com) 安装的时候选择"使用C的桌面开发“，同时可以修改文件路径，可以放在D盘。修改文件路径的时候，共享组件、…...

编程日记 2024/2/11 21:11:58

C语言第二十二弹---指针(六)

✨个人主页： 熬夜学编程的小林 💗系列专栏： 【C语言详解】【数据结构详解】指针 1. 回调函数是什么？ 2、qsort使用举例 2.1、使用qsort函数排序整型数据 2.2 使用qsort排序结构体数据 3、qsort函数的模拟实现总结 1. 回…...

编程日记 2024/2/11 21:07:54

Qt Windows和Android使用MuPDF预览PDF文件

文章目录 1. Windows MuPDF编译2. Android MuPDF编译3. 引用 MuPDF 库4. 解析本地PDF文件 1. Windows MuPDF编译使用如下命令将MuPDF的源码克隆到本地 git clone --recursive git://git.ghostscript.com/mupdf.git直接用VS，打开 mupdf/platform/win32/mupdf.sln …...

编程日记 2024/2/11 21:02:47

保姆级教程：在Ubuntu上配置Lotus基准测试环境（含参数下载与自定义GPU支持）

在Ubuntu上配置Lotus基准测试环境的完整指南对于Filecoin生态系统的参与者来说，理解网络性能并优化硬件配置至关重要。本文将带您完成在Ubuntu系统上搭建Lotus基准测试环境的全过程，从基础环境准备到高级GPU自定义支持，为您提供一份详尽的实…...

编程新知 2026/5/19 10:50:50

第2篇_写MQTTBroker第一关不是PUBLISH_而是怎么让多个客户端稳稳连上同一个端口

写 Broker 最容易一上来就盯着 PUBLISH。但实际测试时，第一关通常不是消息转发，而是：两个客户端都连 192.168.20.100:1883，为什么一个都连不上，或者槽位刚置位就释放？先给结论：MQTT Broker 不是…...

编程新知 2026/5/19 9:01:38

企业邮箱迁移技术方案：从旧邮箱平滑迁移至阿里 / 网易 / 谷歌

前言企业发展过程中，更换企业邮箱服务商属于常见运维需求，不少行政与运维人员担心迁移过程出现邮件丢失、通讯录错乱、收发中断等问题。掌握标准化迁移方案，可实现新旧邮箱无缝过渡，不影响日常商务对接与对内办公。本文分享通用迁…...

编程新知 2026/5/19 8:51:12

JetBrains IDE试用期重置工具：开发者的智能许可证管家

JetBrains IDE试用期重置工具：开发者的智能许可证管家【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 当开发工具的试用期倒计时成为你编码时的心理负担，当每次启动IDE都要面对那个令人焦虑…...

编程新知 2026/5/19 7:59:29