用html编写的简易新闻页面

用html编写的简易新闻页面

相关代码

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>

代码截图

运行效果

相关推荐
涔溪10 分钟前
如何解决微前端架构中主应用和微应用的通信问题?
前端·架构
大白的编程日记.11 分钟前
【计算网络学习笔记】MySql的多版本控制MVCC和Read View
网络·笔记·学习·mysql
重铸码农荣光32 分钟前
深入理解 JavaScript 原型链:从 Promise.all 到动态原型的实战探索
前端·javascript·promise
我叫黑大帅39 分钟前
什么叫可迭代对象?为什么要用它?
前端·后端·python
颜渊呐39 分钟前
Vue3 + Less 实现动态圆角 TabBar:从代码到优化实践
前端·css
PineappleCoder42 分钟前
pnpm 凭啥吊打 npm/Yarn?前端包管理的 “硬链接魔法”,破解三大痛点
前端·javascript·前端工程化
fruge1 小时前
前端文档自动化:用 VitePress 搭建团队技术文档(含自动部署)
运维·前端·自动化
yby15411 小时前
【人类写的】anki卡片制作入门
css
CoolerWu2 小时前
TRAE SOLO实战成功展示&总结:一个所见即所得的笔记软体
前端·javascript
Cassie燁2 小时前
el-button源码解读1——为什么组件最外层套的是Vue内置组件Component
前端·vue.js