新闻网页(最初版)
今天我们用之前所学习的知识加上我们新学的css的小部分内容来完成一个简单的新闻页面的制作,其中容易出错的地方有注释进行标注
ps:由于找文字太麻烦喽所以我就直接随便找喽只用看格式就好喽嘿嘿
》》》》》》》
》》》》》》》
》》》》》》》
》》》》》》》
》》》》》》》这是代码html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻页面</title>
<link rel="stylesheet" href="D:\html_save\综合案例\新闻页面.css">
</head>
<body>
<h1>北方高温明日达到鼎盛,京津冀多地地表温度将超过60*C</h1>
<p class="utop">2019-07-03 16:31:47 来源:<a href="http:\www.baidu.com">中国天气网</a>
<tr>
<td><input type="text"value="请输入查询条件"></td>
<td><input type="submit" value="搜索"></td>
</tr>
</p>
<hr><!--这是一条分割线哦-->
<p> 中国天气网讯 今天(2月28日)白天,北京北风劲吹,蓝天重现,阵风可达6至7级,大风蓝色预警信号生效中。与此同时,阳光上线,
气温继续回升,最高气温将升至15℃,最低气温零下1℃,市民早出晚归仍需及时添衣保暖。</p>
<!--这里的问题是我们的图片标签没办法居中不管用啥办法都没有用这里我们采用将图片标签放在div标签中再在div标签中设置属性align=center-->
<div align="center"><img src="D:\html_save\综合案例\images\QQ图片20220927172227.jpg" alt="图片正在加载" width="500" title="这张图是用来充数的哈哈"></div>
<p>今天,北风将吹散雾和霾天气,北京碧空重返,阳光再现,气温也将继续回升。根据北京市气象台今早发布的最新预报
,今天早晨到白天,北京多云转晴,早晨有轻雾,北风1级转3、4级(阵风6、7级),最高气温15℃;夜间晴间多云,北风2级左右,最低气温零下1℃。</p>
<h3>气温升高至41度,北京强势迎七月收个高温日</h3>
<p> 气象部门提醒,目前,北京大风蓝色预警信号生效中,白天北风较大,阵风明显,且天干物燥,
市民需注意防风防火。此外,早晨能见度仍然较低,出行需注意交通安全。
中国天气网讯 今天(2月28日)白天,北京北风劲吹,蓝天重现,阵风可达6至7级,大风蓝色预警信号生效中。与此同时,阳光上线,
气温继续回升,最高气温将升至15℃,最低气温零下1℃,市民早出晚归仍需及时添衣保暖。</p>
<p>今天,北风将吹散雾和霾天气,北京碧空重返,阳光再现,气温也将继续回升。根据北京市气象台今早发布的最新预报
,今天早晨到白天,北京多云转晴,早晨有轻雾,北风1级转3、4级(阵风6、7级),最高气温15℃;夜间晴间多云,北风2级左右,最低气温零下1℃。</p>
<p>气象部门提醒,目前,北京大风蓝色预警信号生效中,白天北风较大,阵风明显,且天干物燥,
市民需注意防风防火。此外,早晨能见度仍然较低,出行需注意交通安全。</p>
<p class="shengming">本文来源:中国天气网 责任编辑:刘兆山_341152668N</p>
</body>
</html>
》》》》》》》
这是css文件
h1{
text-align: center;
}
.utop {
color: darkgrey;
font-family: 'Courier New', Courier, monospace;
text-align: center;
font-size: 10px;
}
p{
text-indent: 2em;
}
.shengming{
color: darkgrey;
font-family: 'Courier New', Courier, monospace;
text-indent: 0;
font-size: 10px;
}
body {
line-height: 30px;
}

大家回去也要勤加练习哦
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律