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

目录

百度热榜 

新闻页面 

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 调试工具

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

标签页含义

element 查看标签结构

console 查看控制台

source 查看源码+断点调试

network 查看前后端交互过程

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/678536.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

无人机应用场景和发展趋势,无人机技术的未来发展趋势分析

随着科技的不断发展&#xff0c;无人机技术也逐渐走进了人们的生活和工作中。无人机被广泛应用于很多领域&#xff0c;例如遥感、民用、军事等等。本文将围绕无人机技术的应用场景和发展趋势&#xff0c;从多角度展开分析。 无人机技术的应用场景 无人机在遥感方面的应用&…

Linux(Ubuntu) 环境搭建:Nginx

注&#xff1a;服务器默认以root用户登录 NGINX 官方网站地址&#xff1a;https://nginx.org/en/NGINX 官方安装文档地址&#xff1a;https://nginx.org/en/docs/install.html服务器的终端中输入以下指令&#xff1a; # 安装 Nginx apt-get install nginx # 查看版本信息 ngi…

###C语言程序设计-----C语言学习(11)#数据的存储和基本数据类型

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 一. 数据的存储 1.整型数据的存储 计算机处理的所有信息都以二进制形式表示…

电子电器架构 —— 对车载软件开发新阶段的愿景

电子电器架构 —— 对车载软件开发新阶段的愿景 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎么看自己。江湖一碗茶,喝…

51单片机编程应用(C语言):篮球比赛计分器

设计思路 1.LCD1602显示A 000:B 000 右下角显示24的数字&#xff0c;显示一节时间12&#xff1a;00. 2.规定矩阵键盘每一位表示的含义 s1按下&#xff0c;A队加一分 s2按下&#xff0c;A队加两分 s3按下&#xff0c;A队加三分 s4按下&#xff0c;A队减一分 如…

【EAI 014】Gato: A Generalist Agent

论文标题&#xff1a;A Generalist Agent 论文作者&#xff1a;Scott Reed, Konrad Zolna, Emilio Parisotto, Sergio Gomez Colmenarejo, Alexander Novikov, Gabriel Barth-Maron, Mai Gimenez, Yury Sulsky, Jackie Kay, Jost Tobias Springenberg, Tom Eccles, Jake Bruce,…

【C++】多态语法概念

目录 一、概念及定义二、虚函数重写的特例三、final和override四、抽象类 一、概念及定义 概念&#xff1a;在继承关系下的不同类&#xff0c;调用同一个函数&#xff0c;产生不同的行为&#xff0c;叫作多态。 图示&#xff1a; 定义&#xff1a;必须通过基类的指针或者引…

深度学习的新进展:解析技术演进与应用前景

深度学习的新进展&#xff1a;解析技术演进与应用前景 深度学习&#xff0c;作为人工智能领域的一颗璀璨明珠&#xff0c;一直以来都在不断刷新我们对技术和未来的认知。随着时间的推移&#xff0c;深度学习不断迎来新的进展&#xff0c;这不仅推动了技术的演进&#xff0c;也…

对话模型Demo解读(使用代码解读原理)

文章目录 前言一、数据加工二、模型搭建三、模型训练1、构建模型2、优化器与损失函数定义3、模型训练 四、模型推理五、所有Demo源码 前言 对话模型是一种人工智能技术&#xff0c;旨在使计算机能够像人类一样进行对话和交流。这种模型通常基于深度学习和自然语言处理技术&…

HTTP 超文本传送协议

1 超文本传送协议 HTTP HTTP 是面向事务的 (transaction-oriented) 应用层协议。 使用 TCP 连接进行可靠的传送。 定义了浏览器与万维网服务器通信的格式和规则。 是万维网上能够可靠地交换文件&#xff08;包括文本、声音、图像等各种多媒体文件&#xff09;的重要基础。 H…

HarmonyOS 开发学习笔记

HarmonyOS 开发学习笔记 一、开发准备1.1、了解ArkTs语言1.2、TypeScript语法1.2.1、变量声明1.2.2、条件控制1.2.3、函数1.2.4、类和接口1.2.5、模块开发 1.3、快速入门 二、ArkUI组件2.1、Image组件2.2、Text文本显示组件2.3、TextInput文本输入框组件2.4、Button按钮组件2.5…

开源个人订阅跟踪器Wallos

本文软件由网友 P家单推人 推荐&#xff1b; 什么 Wallos &#xff1f; Wallos 是一款功能强大、开源且可自我托管的网络应用程序&#xff0c;旨在让您轻松管理财务。告别复杂的电子表格和昂贵的财务软件–Wallos简化了跟踪费用的过程&#xff0c;帮助您更好地控制财务生活。 软…

LeetCode---383周赛

题目列表 3028. 边界上的蚂蚁 3029. 将单词恢复初始状态所需的最短时间 I 3030. 找出网格的区域平均强度 3031. 将单词恢复初始状态所需的最短时间 II 一、边界上的蚂蚁 这题没什么好说的&#xff0c;模拟就行&#xff0c;本质就是看前缀和有几个为0。 代码如下 class S…

Spring Cloud Hystrix 参数配置、简单使用、DashBoard

Spring Cloud Hystrix 文章目录 Spring Cloud Hystrix一、Hystrix 服务降级二、Hystrix使用示例三、OpenFeign Hystrix四、Hystrix参数HystrixCommand.Setter核心参数Command PropertiesFallback降级配置Circuit Breaker 熔断器配置Metrix 健康统计配置Request Context 相关参数…

【java】12:封装

面向对象编程三大特征 1.基本介绍 面向对象编程有三大特征&#xff1a;封装、继承和多态。 2.封装介绍 封装(encapsulation)就是把抽象出的数据[属性]和对数据的操作[方法]封装在一起&#xff0c;数据被保护在内部&#xff0c;程序的其它部分只有通过被授权的操作[方法]&am…

开局一个破碗的故事例子

在一个寒冷的冬日&#xff0c;一个瘦弱的小姑娘拿着一个破碗&#xff0c;孤独地走在被白雪覆盖的街道上。她的名字叫小梅&#xff0c;她的父母早逝&#xff0c;留下她一个人在这个世界上艰难地生活。 小梅的破碗里只有几个铜板&#xff0c;那是她前一天沿街乞讨所得&#xff0c…

林浩然与杨凌云的Java世界奇遇记:垃圾回收大冒险

林浩然与杨凌云的Java世界奇遇记&#xff1a;垃圾回收大冒险 The Java Adventure Chronicles of Lin Haoran and Yang Lingyun: Garbage Collection Odyssey 在一个充满0和1代码森林的世界里&#xff0c;住着两位勇敢的程序员侠侣——林浩然和杨凌云。林浩然是个身怀Java绝技的…

sheng的学习笔记-docker部署数据库oracle,mysql

部署目录&#xff1a;sheng的学习笔记-部署-目录-CSDN博客 docker基础知识可参考 sheng的学习笔记-docker部署&#xff0c;原理图&#xff0c;命令&#xff0c;用idea设置docker docker安装数据库 mac版本 安装oracle 下载oracle镜像 打开终端&#xff0c;输入 docker s…

Python网络通信

目录 基本的网络知识 TCP/IP IP地址 端口 HTTP/HTTPS HTTP HTTPS 搭建自己的Web服务器 urllib.request模块 发送GET请求 发送POST请求 JSON数据 JSON文档的结构 JSON数据的解码 下载图片示例 返回所有备忘录信息 此文章讲解如何通过Python访问互联网上的资源&a…

《CSS 简易速速上手小册》第7章:CSS 预处理器与框架(2024 最新版)

文章目录 7.1 Sass&#xff1a;更高效的 CSS 编写7.1.1 基础知识7.1.2 重点案例&#xff1a;主题颜色和字体管理7.1.3 拓展案例 1&#xff1a;响应式辅助类7.1.4 拓展案例 2&#xff1a;深色模式支持 7.2 Bootstrap&#xff1a;快速原型设计和开发7.2.1 基础知识7.2.2 重点案例…