本文主要介绍了在家如何通过自学来创建网页，涵盖了前端基础知识如HTML和JavaScript，以及如何利用这些技术构建网页的步骤。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>国内疫情数据</title>
<style>
body{
background-color:#10AEB5;
margin:0;
}
</style>
<script src="../echarts.js">
</script>
</head>
<!--银白色区域 -->
<body>
<div style="height:50px;background-color:#F8F8F9;">
<img src="银色区域的百度.PNG" style="height:50px; position:absolute; left:3%;">
<a href="https://www.baidu.com"><p align="right" style=" position:absolute; right:4%; font-size:24px; font-family:'黑体'; top:-10px;">百度首页</p></a>
</div>
<!--页眉 -->
<div>
<header style="position:absolute; left:28%; ">
<div style="float: left; position:relative;">
<img src="百度.PNG" style=" width:100px; height:50px"><!--添加百度图片 -->
<!--添加页眉文字 -->
<h3 style="font-size:1rem;color:#D0E9EC;margin:0; ">新型冠状病毒肺炎</h3>
<h1 style="font-size:2rem;;color:#D0E9EC; margin:0; position:relative; top:5px; "><span>疫情实时大数据报告</span></h1>
<div style="background-color:rgba(9,148,167,.5);color:#D0E9EC; width:230px; border-radius:2rem; font-size:.9rem;"><p align="center">数据来源于国家和省市卫健委</p></div>
</div>
<!--添加新冠肺炎图片 -->
<div style="float: left; position:relative;">
<img src="新冠肺炎.PNG" style="height:150px; width:350px; position:relative; left:10%;">
</div>
</div>
</header>
</div>
<!--添加切换地区 -->
<span style="position:relative; left:67%;"><p align="center" style="background-color:#B2EBEE; color:#196063 ;border-radius:51px; width:80px;">切换地区</p></span>
<!--正文 -->
<!--表头 -->
<section>
<div style="position:relative; float:left; width:750px; background-color:#fff; top:160px; left:26%; border-radius: 100px / 50px;">
<ul>
<p style="position:relative; float:left; left:8%; top:-14px;">国内疫情</p>
<p style="position:relative; float:left; left:35%; top:-14px;">国外疫情</p>
<p style="position:relative; float:left; left:60%; top:-14px;">实时播报</p>
</ul>
<!--下划线 -->
<hr color="#F5F6F7" style="height:1px; position:relative; top:-20px; right:0px; width:730px;">
<!--国内疫情 -->
<div>
<h3 style="position:relative; top:-25px; left:35px;">国内疫情</h3>
</div>
<!--第一部分 -->
<!--第一行 -->
<ul>
<p style="position: relative; float:left; left:50px; top:-50px;">新增确诊</p>
<img src="li图像.PNG" style="position: relative; float:left; top:-32px; left:50px;">
<p style="position: relative; float:left; left:130px; top:-50px;">新增本土</p>
<img src="li图像.PNG" style="position: relative; float:left; top:-32px; left:130px;">
<p style="position: relative; float:left; left:225px; top:-50px;">新增境外</p>
<p style="position: relative; float:left; left:320px; top:-50px;">新增无症状</p>
<img src="li图像.PNG" style="position: relative; float:left; top:-32px; left:320px;">
<!--第二行 -->
<p style="position: relative; float:left; left:-280px; top:-25px; color:#FF6A57; font-family:'黑体'; font-size:18px;"><strong>28,375</strong></p>
<p style="position: relative; float:left; left:-150px; top:-25px; color:#FF6A57; font-family:'黑体'; font-size:18px;"><strong>64</strong></p>
<p style="position: relative; float:left; left:5px; top:-25px; color:#476DA0; font-family:'黑体'; font-size:18px;"><strong>49</strong></p>
<p style="position: relative; float:left; left:160px; top:-25px; color:#FF6A57; font-family:'黑体'; font-size:18px;"><strong>49</strong></p>
<!--第三行 -->
<p style="position:relative; left:-390px; top:5px; float:left;">现有确诊</p>
<img src="li图像.PNG" style="position:relative; left:-390px; top:22px; float:left;">
<p style="position:relative; left:-310px; top:5px; float:left;">现有本土</p>
<p style="position:relative; left:-195px; top:5px; float:left;">现有境外</p>
<p style="position:relative; float:left; top:-47px; left:113px;">现有无症状</p>
<!--第四行 -->
<p style="position: relative; float:left; left:-470px; top:-25px; color:#FF6A57; font-family:'黑体'; font-size:18px;"><strong>4,439,249</strong></p>
<p style="position: relative; float:left; left:-370px; top:-25px; color:#FF6A57; font-family:'黑体'; font-size:18px;"><strong>690</strong></p>
<p style="position: relative; float:left; left:-220px; top:-25px; color:#476DA0; font-family:'黑体'; font-size:18px;"><strong>449</strong></p>
<p style="position: relative; float:left; left:-85px; top:-25px; color:#FF6A57; font-family:'黑体'; font-size:18px;"><strong>3,336</strong></p>
<!--第五行 -->
<hr color="#F5F6F7" style="height:1px; position:relative; top:-30px; right:30px; width:730px;">
<!--第六行 -->
<p style="position:relative; left:50px; top:-40px; float:left;">累计确诊</p>
<p style="position:relative; left:150px; top:-40px; float:left;">累计境外</p>
<p style="position:relative; left:265px; top:-40px; float:left;">累计治愈</p>
<p style="position:relative; left:365px; top:-40px; float:left;">累计死亡</p>
<!--第七行 -->
<p style="position: relative; float:left; left:-210px; top:-15px; color:#FF6A57; font-family:'黑体'; font-size:18px;"><strong>4,761,856</strong></p>
<p style="position: relative; float:left; left:-120px; top:-15px; color:#476DA0; font-family:'黑体'; font-size:18px;"><strong>19,929</strong></p>
<p style="position: relative; float:left; left:2px; top:-15px; color:#10AEB5; font-family:'黑体'; font-size:18px;"><strong>300,032</strong></p>
<p style="position: relative; float:left; left:108px; top:-15px; color:#4D5054; font-family:'黑体'; font-size:18px;"><strong>22,575</strong></p>
<!--第八行 -->
<p style="position:relative; left:-464px; float:left; font-size:12px; top:12px; color:#9999B3">较昨日<span style="color:#FF6A57;">+28,375</span></p>
<p style="position:relative; left:-375px; float:left; font-size:12px; top:12px; color:#9999B3">较昨日+49</p>
<p style="position:relative; left:-116px; float:left; font-size:12px; top:-27px; color:#9999B3">较昨日<span style="color:#A2C9CA;">+220</span></p>
<p style="position:relative; left:-15px; float:left; font-size:12px; top:-27px; color:#9999B3">较昨日+94</p>
<!--第二部分 -->
</ul>
</div>
</section>
</body>
</html>
原图
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
