CSS综合案例
代码示例:新闻页面:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 body { 9 font-size: 16px; 10 font-family: '微软雅黑'; 11 line-height: 28px; 12 } 13 h1 { 14 /* 文字不加粗 */ 15 font-weight: 400; 16 /* 让h1里面的文字水平居中对齐 */ 17 text-align: center; 18 } 19 .gray{ 20 color: #888888; 21 font-size: 12px; 22 text-align: center; 23 } 24 a { 25 text-decoration: none; 26 } 27 .search { 28 color: #666666; 29 /* 简写:#666666 #666 30 #ff00ff #f0f */ 31 width: 170px; 32 } 33 .btn { 34 font-weight: 700; 35 } 36 p { 37 /* 首行缩进两个字的距离 */ 38 text-indent: 2em; 39 } 40 .pic { 41 /* 想要图片居中对齐,则让他的父亲 p标签添加水平居中的代码 */ 42 text-align: center; 43 } 44 .footer { 45 color: #888888; 46 } 47 </style> 48 </head> 49 <body> 50 <h1>北方高温明日达鼎盛 京津冀多地地表温度将超60℃</h1> 51 <div class="gray">2019-07-03 16:31 <a href="#">中国天气网</a> 52 <input type="text" value="请输入查询条件" class="search"> <button class="btn">搜索</button> 53 </div> 54 <hr> 55 <p>中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。</p> 56 57 <h4>气温41.4℃!地温66.5!北京强势迎七月首个高温日</h4> 58 <p class="pic"> 59 <img src="http://cms-bucket.ws.126.net/2019/07/03/ccda33f9a722448d876d28db562b3d39.jpeg?imageView&thumbnail=750x0&quality=85&type=jpg&interlace=1" > 60 </p> 61 62 <p>今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。</p> 63 64 65 <p>今天,北京地区迎来今年七月份的首个高温日。监测显示,截至今天下午3点,城区气温普遍在36到39℃之间,古观象台、大观园、回龙观等地气温超过40℃,气温最高的站点出现在昌平区流村,达到41.4℃。</p> 66 67 68 <p>在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。</p> 69 70 <h4>明日热度再升级!京津冀携手冲击38℃+</h4> 71 72 <p>中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。</p> 73 74 <p>明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p> 75 76 <p>大城市中,明天(4日)石家庄的最高气温会向39℃冲击,北京、天津、济南也将达到38℃,酷热难耐。其中,北京和石家庄的气温都有望刷新今年以来的最高气温纪录。(注:此处北京气温统计地为南郊观象台,其他站点可能会超过这个温度。)</p> 77 78 <p>由于明天京津冀一带的气温还将继续升级,地表温度也将随之走高,预计,京津冀一带部分地区地表温度或将继续超过60℃。</p> 79 80 <p>到了5日,北方35℃以上的高温天气范围将略有缩小,但在河北南部、山东西部、河南北部、山西南部、陕西中南部部分地区、新疆东南部的最高气温依然会达到或超过35℃。</p> 81 82 <p>京津冀周末迎降温 唯有济南热度不减</p> 83 84 <p>中国天气网气象分析师王伟跃介绍,周六(6日)开始,受降水天气影响,华北、黄淮大部的35℃以上高温天气会逐渐缓解,仅在河南、陕西南部、山西南部等地有分散性高温天气出现。7日以后,盘踞在华北、黄淮35℃以上的高温天气将逐渐销声匿迹。</p> 85 86 <p>不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)</p> 87 88 <p class="footer">(责任编辑:刘京_NO5631)</p> 89 </body> 90 </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℃以上的高温天气将逐渐销声匿迹。
不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)