代码示例：新闻页面：

 <!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>

         body {

             font-size: 16px;

             font-family: '微软雅黑';

             line-height: 28px;

         }

         h1 {

             /* 文字不加粗 */

             font-weight: 400;

             /* 让h1里面的文字水平居中对齐 */

             text-align: center;

         }

         .gray{

             color: #888888;

             font-size: 12px;

             text-align: center;

         }

         a {

             text-decoration: none;

         }

         .search {

             color: #666666;

             /* 简写：#666666 #666

                  #ff00ff   #f0f */

             width: 170px;

         }

         .btn {

             font-weight: 700;

         }

         p {

             /* 首行缩进两个字的距离 */

             text-indent: 2em;

         }

         .pic {

             /* 想要图片居中对齐，则让他的父亲 p标签添加水平居中的代码 */

             text-align: center;

         }

         .footer {

             color: #888888;

         }

     </style>

 </head>

 <body>

 <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1>

 <div class="gray">2019-07-03 16:31 <a href="#">中国天气网</a>

     <input type="text" value="请输入查询条件" class="search"> <button class="btn">搜索</button>

 </div>

 <hr>

 <p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>

 <h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>

 <p class="pic">

     <img src="http://cms-bucket.ws.126.net/2019/07/03/ccda33f9a722448d876d28db562b3d39.jpeg?imageView&thumbnail=750x0&quality=85&type=jpg&interlace=1" >

 </p>

 <p>今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。</p>

 <p>今天，北京地区迎来今年七月份的首个高温日。监测显示，截至今天下午3点，城区气温普遍在36到39℃之间，古观象台、大观园、回龙观等地气温超过40℃，气温最高的站点出现在昌平区流村，达到41.4℃。</p>

 <p>在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p>

 <h4>明日热度再升级！京津冀携手冲击38℃+</h4>

 <p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。</p>

 <p>明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>

 <p>大城市中，明天（4日）石家庄的最高气温会向39℃冲击，北京、天津、济南也将达到38℃，酷热难耐。其中，北京和石家庄的气温都有望刷新今年以来的最高气温纪录。（注：此处北京气温统计地为南郊观象台，其他站点可能会超过这个温度。）</p>

 <p>由于明天京津冀一带的气温还将继续升级，地表温度也将随之走高，预计，京津冀一带部分地区地表温度或将继续超过60℃。</p>

 <p>到了5日，北方35℃以上的高温天气范围将略有缩小，但在河北南部、山东西部、河南北部、山西南部、陕西中南部部分地区、新疆东南部的最高气温依然会达到或超过35℃。</p>

 <p>京津冀周末迎降温 唯有济南热度不减</p>

 <p>中国天气网气象分析师王伟跃介绍，周六（6日）开始，受降水天气影响，华北、黄淮大部的35℃以上高温天气会逐渐缓解，仅在河南、陕西南部、山西南部等地有分散性高温天气出现。7日以后，盘踞在华北、黄淮35℃以上的高温天气将逐渐销声匿迹。</p>

 <p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>

 <p class="footer">(责任编辑：刘京_NO5631)</p>

 </body>

 </html>

实现如下：

Document

北方高温明日达鼎盛 京津冀多地地表温度将超60℃

2019-07-03 16:31 中国天气网 搜索

中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。

气温41.4℃！地温66.5！北京强势迎七月首个高温日

今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。

今天，北京地区迎来今年七月份的首个高温日。监测显示，截至今天下午3点，城区气温普遍在36到39℃之间，古观象台、大观园、回龙观等地气温超过40℃，气温最高的站点出现在昌平区流村，达到41.4℃。

在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。

明日热度再升级！京津冀携手冲击38℃+

中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。

明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。

大城市中，明天（4日）石家庄的最高气温会向39℃冲击，北京、天津、济南也将达到38℃，酷热难耐。其中，北京和石家庄的气温都有望刷新今年以来的最高气温纪录。（注：此处北京气温统计地为南郊观象台，其他站点可能会超过这个温度。）

由于明天京津冀一带的气温还将继续升级，地表温度也将随之走高，预计，京津冀一带部分地区地表温度或将继续超过60℃。

到了5日，北方35℃以上的高温天气范围将略有缩小，但在河北南部、山东西部、河南北部、山西南部、陕西中南部部分地区、新疆东南部的最高气温依然会达到或超过35℃。

京津冀周末迎降温 唯有济南热度不减

中国天气网气象分析师王伟跃介绍，周六（6日）开始，受降水天气影响，华北、黄淮大部的35℃以上高温天气会逐渐缓解，仅在河南、陕西南部、山西南部等地有分散性高温天气出现。7日以后，盘踞在华北、黄淮35℃以上的高温天气将逐渐销声匿迹。

不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）

(责任编辑：刘京_NO5631)

CSS综合案例的更多相关文章

  1. JavaScript：综合案例-表单验证

    综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...

  2. jquery-easyUI第二篇【综合案例】

    基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...

  3. CSS3_综合案例

    综合案例 设置元素的 width,还可以利用 left 和 right 为了防止图片太小,background-size: 100% 100%; <!DOCTYPE html> <h ...

  4. Ext.js入门：常用组件与综合案例（七）

    一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交   datefield简单示例: <html xmlns=&quo ...

  5. canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）

    [下篇] -- 建议学习时间4小时  课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...

  6. Tomcat+Nginx+Memcached综合案例

    Tomcat+Nginx+Memcached综合案例 说明 通过Nginx解析静态页面并将动态负载均衡调度给后面的多个Tomcat,Tomcat解析java动态程序. 由于http是无状态的协议,你访 ...

  7. swiper快速切换插件（两个综合案例源码）

    swiper快速切换插件 swiper.js自己去官网下载哈.先来一个tab切换案例: demo.html <!doctype html> <html> <head> ...

  8. JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片

    知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...

  9. Vue和Element基础使用,综合案例学生列表实现

    知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...

随机推荐

  1. 首次使用AWS服务器EC2

    AWS有一年的免费套餐,这个便宜我得占. 申请的时候需要填写银行卡,AWS暂不支持储蓄卡,只好绑信用卡了. 创建EC2实例之后,下一个要解决的问题就是远程root访问. 1. 修改安全组设置 2. s ...

  2. 抓住CoAP协议的“心”

    摘要 The Constrained Application Protocol(CoAP)是一种专用的Web传输协议,用于受约束的节点和受约束的(例如,低功率,有损)网络. 节点通常具有带少量ROM和 ...

  3. MOD3干扰

    1.MOD3干扰的定义 MOD3干扰也称模3干扰,是LTE网络内干扰的一种形式,要了解这种干扰的产生原理,就要从小区PCI入手. PCI全称PhysicalCellIdentifier,即物理小区标识 ...

  4. 中文分词工具简介与安装教程（jieba、nlpir、hanlp、pkuseg、foolnltk、snownlp、thulac）

    2.1 jieba 2.1.1 jieba简介 Jieba中文含义结巴,jieba库是目前做的最好的python分词组件.首先它的安装十分便捷,只需要使用pip安装:其次,它不需要另外下载其它的数据包 ...

  5. 实现简单网页rtmp直播：nginx+ckplayer+linux

    一.安装nginx 安装带有rtmp模块的nginx服务器(其它支持rtmp协议的流媒体服务器像easydarwin.srs等+Apache等web服务器也可以),此处使用nginx服务器,简单方便. ...

  6. Vulnhb 靶场系列：Jarbas1.0

    靶场镜像 官网 信息收集 攻击机kali IP地址 通过nmap 进行主机发现,发现目标机IP地址 nmap -sP 192.168.227.1/24 参数说明: -sP (Ping扫描) 该选项告诉 ...

  7. MySQL安装（linux）

    Centos 安装mysql 安装mariadb yum install mariadb mariadb-server mariadb-devel 安装mysql rpm -qa | grep MyS ...

  8. JS理论：编码习惯

    1.声明变量,你只会var吗?那你真的是JS小鲜肉 如果要声明3个变量,你要var 三下吗? 不用: let [a,b,c] = ['name',18,'ddd'] console.log(a,b,c ...

  9. mybatis collection的使用

    Mybatis collection的使用 今天学习了mybatis中的collection使用,作为记录以后使用.首先看一下javabean的结构! public class Article {   ...

  10. linux下安装gmp遇到 configure:error:no usable m4 in$path or /user/5bin解决方案

    安装过程中遇到如下报错: 上面的报错是因为你没有安装m4,安装m4就可以了:以下两种命令人选其一: #yum install m4 或 #apt-get install m4 ps:如果遇到权限问题就 ...