用html编写的简易新闻页面

news2024/10/2 10:29:40

用html编写的简易新闻页面

相关代码

<!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;
        }
        p {
            text-indent: 2em;
        }
        .picture {
            text-align: center;
        }
        img {
            width: 400px;
        }
        .finally {
           text-align: right; 
        }
    </style>
</head>
<body>
    <div>
        <div class="title">这是新闻标题</div>
        <p class="time">2024年2月23日</p>
        <hr>
    </div>
    <div>
        <p>这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段</p>
        <p>这是新闻的第二段这是新闻的第二段这是新闻的第二段这是新闻的第二段这是新闻的第二段这是新闻的第二段这是新闻的第二段这是新闻的第二段这是新闻的第二段这是新闻的第二段这是新闻的第二段这是新闻的第二段  </p>
        <div class="picture">
            <img src="./fly_2.23.jpg" alt="图片没有成功加载出来">
        </div>
        <p>这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段这是新闻的第三段</p>
        <p>这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段</p>
    </div>
    <div class="finally">这是落款</div>
</body>
</html>

代码截图

image-20240226210656239

运行效果

image-20240226211015275

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

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

相关文章

信号完整性分析基本概念

“设计师可以分成两类&#xff0c;一类已经遇到了信号完整性问题&#xff0c;另一类即将遇到信号完不整性问题” 随着时钟频率的提高&#xff0c;发现并解决信号完整性问题成为产品开发的关键。因此需要精通信号完整性分析技术&#xff0c;并能采取高效设计过程以消除这些问题…

内网穿透的应用-如何在群晖配置WebDAV实现云同步Zotero科研文献与笔记【内网穿透】

文章目录 前言1. Docker 部署 Trfɪk2. 本地访问traefik测试3. Linux 安装cpolar4. 配置Traefik公网访问地址5. 公网远程访问Traefik6. 固定Traefik公网地址 前言 Trfɪk 是一个云原生的新型的 HTTP 反向代理、负载均衡软件&#xff0c;能轻易的部署微服务。它支持多种后端 (D…

Sentinel 动态规则扩展

一、规则 Sentinel 的理念是开发者只需要关注资源的定义&#xff0c;当资源定义成功后可以动态增加各种流控降级规则。Sentinel 提供两种方式修改规则&#xff1a; 通过 API 直接修改 (loadRules)通过 DataSource 适配不同数据源修改 手动通过 API 修改比较直观&#xff0c;…

linux下执行文件包含^M,将window文件格式内容转为linux格式

查看文件内容 cat -v jvm_options 报错信息 ./bin/install-plugin.sh: /bigdata/opt/s/seatunnelsgg/apache-seatunnel-2.3.4/mvnw: /bin/sh^M: bad interpreter: No such file or directory install connector : connector-selectdb-cloud安装工具 yum install -y dos2uni…

Linux——静态库

Linux——静态库 静态库分析一下 ar指令生成静态库静态库的使用第三方库优化一下 gcc -I(大写的i) -L -l(小写的l)&#xff0c;头文件搜索路径&#xff0c;库文件搜索路径&#xff0c;连接库 今天我们来学习静态库的基本知识。 静态库 在了解静态库之前&#xff0c;我们首先来…

YOLOv9中的RepNCSPELAN4结构!

RepNCSPELAN4结构出炉啦&#xff0c;收藏起来写论文用&#xff01; 1.代码&#xff1a; 代码路径&#xff1a;yolov9-main->models->common.py&#xff0c;代码如下&#xff1a; class RepNCSPELAN4(nn.Module):# csp-elandef __init__(self, c1, c2, c3, c4, c51): # …

哪些行业适合做小程序?零售电商、餐饮娱乐、旅游酒店、教育生活、医疗保健、金融社交、体育健身、房产汽车、企管等,你的行业在其中么?

引言 在当今数字化时代&#xff0c;小程序成为了各行各业快速发展的数字工具之一。它的轻便、灵活的特性使得小程序在多个行业中找到了广泛的应用。本文将探讨哪些行业适合开发小程序&#xff0c;并介绍各行业中小程序的具体应用。 一、零售和电商 在当今数字化的商业环境中&…

聊聊 Go 边界检查消除

前言 在这篇文章中碰巧看到了Go边界检查消除相关的讨论. 我也借此简单聊聊. 有这样一段代码, 非常简单, 就是一段求向量点积的程序: func sum(a, b []int) int {if len(a) ! len(b) {panic("must be same len")}ret : 0for i : 0; i < len(a); i {ret a[i] * …

tab 切换页面

<template><divclass"syncData"v-loading"fullscreenLoading"element-loading-spinner"el-icon-loading"element-loading-background"rgba(0, 0, 0, 0.8)"element-loading-text"拼命加载中"><el-tabsv-model…

【c语言】字符函数和字符串函数(下)

前言 书接上回 【c语言】字符函数和字符串函数(上) 上一篇讲解的strcpy、strcat、strcmp函数的字符串长度是不受限制的 而本篇strncpy、strncat、strcnmp函数的字符串长度是受限制的 欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;…

C/C++有序数组中插入元素

一、不利用指针 代码&#xff1a; int i; void insert(int ,int , int ); int main() {int a[100];int n, m;cout<<"输入数组元素个数\n";cin >> n;cout << "输入数组元素\n";for (i 0; i < n; i) {cin >> a[i];}cout <&…

C语言里面的内存函数

1.memcpy函数 &#xff08;1&#xff09;函数的模拟实现&#xff0c;这个函数的作用就是把arr1拷贝到arr2里面&#xff0c;单位是字节&#xff0c;20字节就是5整 数&#xff0c;所以输出的就是1234500000&#xff1b; &#xff08;2&#xff09;之所以强制类型转换成为char*是…

高德地图与相机

高德地图与相机 1. 演示效果 2. 实现代码 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>高…

Coursera吴恩达机器学习专项课程02:Advanced Learning Algorithms 笔记 Week04 (完结)

Week 04 of Advanced Learning Algorithms 笔者在2022年7月份取得这门课的证书&#xff0c;现在&#xff08;2024年2月25日&#xff09;才想起来将笔记发布到博客上。 Website: https://www.coursera.org/learn/advanced-learning-algorithms?specializationmachine-learning…

学习vue3 第一节

1、介绍vue以及vue3 Vue (发音为 /vjuː/&#xff0c;类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建&#xff0c;并提供了一套声明式的、组件化的编程模型&#xff0c;帮助你高效地开发用户界面。无论是简单还是复杂的界面&…

c++面试一

1.#include使用 在C/C中&#xff0c;#include 预处理指令用于包含头文件&#xff0c;这些头文件通常包含了函数声明、宏定义以及其他的声明和定义。#include 指令后面跟着的文件名可以使用双引号 "" 或尖括号 <> 来指定&#xff0c;它们之间有一些区别。 双引…

Kubernetes Prometheus 系列|Prometheus介绍和使用|Prometheus+Grafana集成

目录 第1章Prometheus 入门1.1 Prometheus 的特点1.1.1 易于管理1.1.2 监控服务的内部运行状态1.1.3 强大的数据模型1.1.4 强大的查询语言 PromQL1.1.5 高效1.1.6 可扩展1.1.7 易于集成1.1.8 可视化1.1.9 开放性 1.2 Prometheus 的架构1.2.1 Prometheus 生态圈组件1.2.2 架构理…

深度学习目标检测】二十、基于深度学习的雾天行人车辆检测系统-含数据集、GUI和源码(python,yolov8)

雾天车辆行人检测在多种场景中扮演着至关重要的角色。以下是其作用的几个主要方面&#xff1a; 安全性提升&#xff1a;雾天能见度低&#xff0c;视线受阻&#xff0c;这使得驾驶者和行人在道路上的感知能力大大降低。通过车辆行人检测技术&#xff0c;可以在雾天条件下及时发现…

c++ Qt 网络连接

1、基础概念 1.1 TCP/UDP TCP 是一种面向连接的传输层协议&#xff0c;它能提供高可靠性通信(即数据无误、数据无丢失、 数据无失序、数据无重复到达的通信) 适用情况&#xff1a; 1.SN/QQ等即时通讯软件的用户登录账户管理相关的功能通常采用TCP协议 2、适合于对传输质量要求较…

[C++]使用C++部署yolov9的tensorrt模型进行目标检测

部署YOLOv9的TensorRT模型进行目标检测是一个涉及多个步骤的过程&#xff0c;主要包括准备环境、模型转换、编写代码和模型推理。 首先&#xff0c;确保你的开发环境已安装了NVIDIA的TensorRT。TensorRT是一个用于高效推理的SDK&#xff0c;它能对TensorFlow、PyTorch等框架训…