Web基础(从零开始)——HTML+CSS实现今日新闻

最新推荐文章于 2023-11-24 11:34:09 发布

小白花lll

最新推荐文章于 2023-11-24 11:34:09 发布

阅读量378

点赞数

分类专栏：零基础学Web 文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_57633498/article/details/121276564

版权

零基础学Web 专栏收录该内容

33 篇文章 6 订阅

订阅专栏

<!-- html代码部分 -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <h2>今年的华西秋雨有多反常,华西秋雨异常偏多与拉尼娜有关</h2>
    <div class="gray">
        2021-11-11 19:00 来源：<a href="#">中国气象局</a><input type="text" value="请输入查询条件" class="search"><button class="btn">搜索</button>
    </div>
    <hr/>
    <p>今年，华西秋雨北区降雨异常偏多，是今年发生较罕见秋汛的一大原因。降雨偏多，主要是受副热带高压外围水汽和北方活跃冷空气的共同影响。国家气候中心正高级工程师郑志海表示，有利于华西秋雨的大气环流特征与赤道中东太平洋的冷海温密切相关——也就是我们熟知的“拉尼娜”！</p>
    <p>自7月开始，赤道中东太平洋冷海温开始发展加强，预示着冬季将形成一次拉尼娜事件。据历史记录，拉尼娜事件易导致欧亚中高纬环流呈经向型特征，冷空气比较活跃，同时西太平洋副热带高压也容易较常年同期偏北。</p>
    <p class="pic">
        <img src="images/qixiang.jpg" alt="">
    </p>
    <p>今年9月以来，欧亚中高纬总体呈“两脊一槽”型，巴尔喀什湖的低压槽持续偏强，导致西北路径的冷空气活跃。同时，西太平洋副热带高压较常年同期明显偏强、偏西，脊线位置持续偏北，来自西北太平洋和印度洋的水汽输送均明显偏强，且能输送到我国北方地区。强盛且持续的南方暖湿气流与北方活跃的冷空气频繁在我国西南地区东部和北部交汇，导致长江上游、黄河流域降水明显偏多，扩大了今年华西秋雨的影响范围。</p>
    <p class="foot">cr.中国气象局微博</p>
</body>

</html>

/* CSS代码部分 */

body {
    /* 16px的大小，20px的行高，字体为微软雅黑 */
    font: 16px/28px 'Microsoft YaHei';
}


/* font-weight  400不加粗   700加粗*/

h2 {
    /* 文字不加粗 */
    font-weight: 400;
    /* 文字水平居中 */
    text-align: center;
}

.gray {
    color: #888;
    font-size: 12px;
    text-align: center;
}

a {
    text-decoration: none;
}

.search {
    color: #666;
    width: 170px;
}

.btn {
    font-weight: 700;
}

p {
    text-indent: 2em;
}


/* 想让图片居中对齐只在图片上加属性是没用的，要在它的父亲上加，也就是p标签 */

.pic {
    text-align: center;
}

.foot {
    color: #888;
    font-size: 12px;
}

小白花lll

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web基础(从零开始)——HTML+CSS实现今日新闻

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-...
复制链接

扫一扫