案例：
先规划了一下思路
框架：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>20231013每天一个前端案例——新闻案例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="top">
<h1 class="top_title">
北方高温明日达鼎盛 京津冀多地地表温度将超60℃
<!-- 之后要取消加粗 -->
</h1>
<span class="top_time">2019-07-03 来源: </span>
<!-- 要改变颜色 -->
<a href="http://www.weather.com.cn/" class="top_link">中国天气网</a>
<!-- 要取消下划线 -->
<input type="text" class="top_search" value="请输入查询条件...">
<!-- 要改变里面文字颜色和搜索框的宽度 -->
<input type="button" class="top_btn" value="搜索">
<!-- 要让搜索加粗 -->
</div>
<div class="text">
<p>中国天气网讯 今天（3日），华北、黄淮多地出现高温天气，截至下午2点，北京、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日），这一带的高温天气将继续发酵，高温范围以及强度将在4日达到鼎盛，预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>
<h4>气温41.4℃！地温66.5！北京强势迎七月首个高温日</h4>
<div class="image">
<img src="pic.jpeg" alt="">
<!-- 要让图片居中对齐，所以选择让其父亲居中对齐 -->
</div>
<p>
今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、郑州均迎来高温日。
</p>
<p>
在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。
</p>
<h4>明日热度再升级！京津冀携手冲击38℃+</h4>
<p>中国天气网气象分析师王伟跃介绍，明天（4日），华北、黄淮地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。 明天，北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<p>不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽）</p>
</div>
<!-- 要给每一段缩进 -->
<div class="bottom">
<p>本文来源：中国天气网 责任编辑：刘京_NO5631</p>
</div>
<!-- 变成灰色 -->
</body>
</html>样式：
body {
font: 16px/28px 'Microsoft YaHei';
}
.top {
text-align: center;
}
.top_title {
font-weight: 400px;
}
.top_time {
color: #888888;
}
.top_link {
text-decoration: none;
}
.top_search {
color: #888888;
width: 280px;
}
.top_btn {
font-weight: 700;
}
.image {
text-align: center;
}
p {
text-indent: 2em;
}
.bottom {
color: #888888;
}不熟悉的知识点：
①表单：input 属性：type→类型 value/placeholder感觉差不多自定义内容
②链接a中属性alt的含义是点击图片提示的文字内容
③图片没有居中选项，但是可以给它加个盒子使之居中
④字体属性和文本属性
字体属性：font
font-style（是不是斜体）：normal/italic
font-weight（加粗和不加粗）：400/700；
font-size/line-height：字体大小
font-famil：字体'Microsoft yahei '
(必需要有后两个）
文本属性：text
color：颜色
text-allign：文本对齐
text-indent：文本缩进
text-decoration：文本修饰（有没有下划线）
line-height：行高
碎碎念:
第一遍自己写的时候很多细节都没有想到，很多知识点都遗忘了，而且没有做好规划导致之后写样式的时候用了很多类选择器，又看了一遍pink老师的视频优化了一下代码。很多知识都遗忘了，希望自己可以坚持每天写一个小案例把知识都补回来，以后可以写出漂亮的网页，加油。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
