用html编写的简易新闻页面

本是古典何须时尚 2024-05-06 21:24 56阅读 0赞

## 用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][]

[image-20240226210656239]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c1f886734b864dbbaf6b3fc1dcae90fa.png
[image-20240226211015275]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/efaa8714857246728e0fc78f085268a9.png