HTML+CSS样式实现天气新闻案例

最新推荐文章于 2024-08-02 20:34:24 发布

zhangsan3333

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量1k

点赞数 1

文章标签： html css 前端

aaa

本文链接：https://blog.csdn.net/djydjy3333/article/details/125821016

版权

在这里插入图片描述

weather.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>近期天气状况</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<h1>6月我国多地降水量突破历史极值 7月华北华南等地降水仍偏多</h1>

<div class="gray">
    2022-07-05 15:32
    来源: <a href="http://www.weather.com.cn/" target="_blank">中国天气网</a>
    <input type="text" value="请输入查询条件..." class="search"/>
    <button class="btn">搜索</button>
</div>
<hr>


<p>中国天气网讯 在今天(7月5日)上午召开的中国气象局7月新闻发布会上, 中国气象局应急减灾与公共服务司副司长王亚伟表示, 今年6月, 我国平均降水量较常年同期偏多9.1%, 多地降水量突破历史极值, 强对流天气频发。预计7月, 华北大部、华南等地降水量仍较常年同期偏多, 另外可能有1至2个热带气旋登陆或影响我国。</p>

<h4>6月广东等地降水量破纪录 河北江苏等地遭遇雷暴大风</h4>

<p class="pic">
    <img src="http://image.nmc.cn/product/2022/07/05/STFC/medium/SEVP_NMC_STFC_SFER_ER24_ACHN_L88_P9_20220705060002400.JPG?v=1656988202173" alt="图片显示错误" width="600"/>
</p>

<p>今年6月, 全国平均降水量112.1毫米, 较常年同期偏多9.1%。暴雨导致多地降水量突破历史极值。其中南方出现4次区域性暴雨过程, 广东英德(292.9毫米)等12个国家气象站日降水量突破历史极值。6月26-30日, 北方出现入汛以来首次大范围降雨过程, 山东、河北、河南有26个国家气象站日降水量突破6月极值。</p>

<p class="pic">
    <img src="https://pic.rmb.bdstatic.com/bjh/news/dbb7c556b2a50a29f346e2448f933277.jpeg" alt="图片显示错误"  width="600"/> <br />
    6月22日, 广东省英德市地标文峰塔孤悬江中, 周围汪洋一片。（邱新生/人民视觉版权图片 来源视觉中国）
</p>



<p>此外6月强对流天气也呈现频发态势。全国共发生8次强对流天气过程。11-14日, 华北、黄淮等地遭遇雷暴大风、冰雹和短时强降水; 22-24日, 河北、江苏等地遭遇雷暴大风、冰雹和短时强降水, 南京江宁最大小时雨量达118.8毫米, 河北保定出现36米/秒的大风。</p>

<h4>7月预计有1至2个热带气旋登陆或影响我国</h4>

<p>预计7月, 东北、内蒙古中部、华北大部、华东北部局部和南部、华中南部、华南、西南地区东南部、西藏西部降水较常年同期偏多。其中黑龙江大部、吉林、辽宁、北京、天津、河北大部、福建南部、广东、广西、海南、云南东南部、西藏西部偏多2~5成。</p>

<p>台风方面, 预计7月,台风数量接近常年到偏少。在西北太平洋和南海海域可能有2~4个热带气旋(中心风力 8级)生成, 接近常年同期(3.8)到偏少; 其中1~2个热带气旋登陆或影响我国, 登陆个数接近常年同期(1.8个)。</p>

<p>专家提醒, 东北、内蒙古中部、华北大部、华东北部局部和南部、华中南部、华南、西南地区东南部、西藏西部等地, 应加强防范强降水等灾害性天气过程对生产生活的影响及可能引发的次生灾害。东南沿海需防御台风可能带来的强降水、大风和风暴潮灾害。</p>

<p class="footer">本文来源 : 中国天气网</p>
</body>
</html>

style.css

/* 改变整个页面行间距、字体 */
body {
    font: 16px/28px 'Microsoft YaHei';
}
/* 让标题居中不加粗 */
h1 {
    text-align: center;
    font-weight: 400;
}
.gray {
    color: #666666;
    font-size: 12px;
    text-align: center;
}
/* 去掉链接默认的下划线 */
a {
    text-decoration: none;
}
/* 改变搜索框字体颜色和宽度 */
.search {
    color: #666;
    width: 170px;
}
/* 让按钮的字体加粗 */
.btn {
    font-weight: 700;
}
/* 所有段落首行缩进2个字的距离 */
p {
    text-indent: 2em;
}
/* 想要让图片居中对齐，则是让它的父亲p标签添加水平居中的代码 */
.pic {
    text-align: center;
}
/* 修改文章最好的小字 */
.footer {
    color: #888;
    font-size: 12px;
}