CSS综合案例
代码示例：新闻页面：
<!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℃
中国天气网讯 今天（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综合案例的更多相关文章
- JavaScript：综合案例-表单验证
综合案例:表单验证 开发要求: 要求定义一个雇员信息的增加页面,例如页面名称为"emp_add.htmnl",而后在此页面中要提供有输入表单,此表单定义要求如下: .雇员编号:必须 ...
- jquery-easyUI第二篇【综合案例】
基于easyUI开发的一个综合案例模版 <%@ page language="java" pageEncoding="UTF-8"%> <!D ...
- CSS3_综合案例
综合案例 设置元素的 width,还可以利用 left 和 right 为了防止图片太小,background-size: 100% 100%; <!DOCTYPE html> <h ...
- Ext.js入门：常用组件与综合案例（七）
一:datefield简单示例 二:timefield简单示例 三:numberfield简单示例 四:FormPanel提交 datefield简单示例: <html xmlns=&quo ...
- canvas学习笔记（下篇） -- canvas入门教程--保存状态/变形/旋转/缩放/矩阵变换/综合案例（星空/时钟/小球）
[下篇] -- 建议学习时间4小时 课程共(上中下)三篇 此笔记是我初次接触canvas的时候的学习笔记,这次特意整理为博客供大家入门学习,几乎涵盖了canvas所有的基础知识,并且有众多练习案例, ...
- Tomcat+Nginx+Memcached综合案例
Tomcat+Nginx+Memcached综合案例 说明 通过Nginx解析静态页面并将动态负载均衡调度给后面的多个Tomcat,Tomcat解析java动态程序. 由于http是无状态的协议,你访 ...
- swiper快速切换插件（两个综合案例源码）
swiper快速切换插件 swiper.js自己去官网下载哈.先来一个tab切换案例: demo.html <!doctype html> <html> <head> ...
- JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例 复选框,综合案例 随机图片
知识点梳理 课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具 插件:PageHelper (j ...
- Vue和Element基础使用,综合案例学生列表实现
知识点梳理 课堂讲义 1.Vue 快速入门 1.1.Vue的介绍 Vue是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合. 通过尽可能简单的A ...
随机推荐
- 数论--HDU 1495 非常可乐
Description 大家一定觉的运动以后喝可乐是一件很惬意的事情,但是seeyou却不这么认为.因为每次当seeyou买了可乐以后,阿牛就要求和seeyou一起分享这一瓶可乐,而且一定要喝的和se ...
- [bzoj2088]P3505 [POI2010]TEL-Teleportation
洛谷 bzoj 用了分层图的思想 题意 给一张图,要求你再尽可能的多连边,使得从1到2至少要经过5条边 没啥复杂的公式,讲解都在注释里 #include<cstdio> #include& ...
- 一个poll的简单例子
该程序使用poll事件机制实现了一个简单的消息回显的功能,其服务器端和客户端的代码如下所示: 服务器端: //start from the very beginning,and to create g ...
- django-haystack全文检索详细教程
前几天要用Django-haystack来实现搜索功能,网上一搜中文资源少之又少,虽说有官方文档,但相信对于我们这些英语差的同学来说要看懂真的是一件难事.特别是关于高级部分,特地找了个英语专业的来翻译 ...
- 【UEFI】---史上最全的X86平台启动流程分析(软硬结合)
最近研究了下X86处理器的启动流程分析,相比于常见的ARM来说,X86平台启动流程真的复杂了很多,本次基于项目实际的两个问题入手,研究了包括以下几个部分的内容: 1. 从硬件角度看启动流程 2. 从软 ...
- 线段树 C - Connected Components? CodeForces - 920E
这个题目居然可以用线段树写,好震惊,如果不是在线段树专题肯定想不到,但是就算在线段树的专题里面,我也不太会怎么写. 这个题目大意是,给你n m n代表n个点,m代表m条边,然后就是m行,每行两个数字, ...
- React Native超简单完整示例－tabs、页面导航、热更新、用户行为分析
初学React Native,如果没有人指引,会发现好多东西无从下手,但当有人指引后,会发现其实很简单.这也是本人写这篇博客的主要原因,希望能帮到初学者. 本文不会介绍如何搭建开发环境,如果你还没有搭 ...
- LeetCode--Jewels and Stones && Range Sum of BST (Easy)
771. Jewels and Stones (Easy)# You're given strings J representing the types of stones that are jewe ...
- matlab读取csv文件并显示
传统的方式可以通过读取文件,然后处理字符串的方式对csv文件进行解析,在matlab中可以通过csvread函数读取csv文件,然后通过plot对数据进行显示,也可以对里面的函数进行分析: csv文件 ...
- [whu1564]后缀数组
http://acm.whu.edu.cn/land/problem/detail?problem_id=1564 思路:先把串复制一遍,在末尾补个标记,后缀数组跑一下,扫一遍就ok了(过滤后缀在后半 ...