近期，新冠病毒肆虐全球。為了提醒人們防范疫情，很多程序員制作了關(guān)于疫情的網(wǎng)頁(yè)設(shè)計(jì)作品，其中不乏優(yōu)秀的HTML代碼。今天，我們來(lái)介紹一份精美的疫情網(wǎng)頁(yè)設(shè)計(jì)作品的HTML代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>新冠病毒疫情實(shí)時(shí)播報(bào)</title>
<style>
/* 樣式表 */
body {
background-color: #fff;
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 80px;
background-color: #f5f5f5;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
}
h1 {
margin: 0;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.cases {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.case {
width: 200px;
height: 150px;
background-color: #f5f5f5;
margin: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.case p {
font-size: 18px;
font-weight: bold;
margin-top: 10px;
}
</style>
</head>
<body>
<header>
<h1>新冠病毒疫情實(shí)時(shí)播報(bào)</h1>
</header>
<div class="container">
<div class="cases">
<div class="case">
<p>確診人數(shù)</p>
<p>100,000</p>
</div>
<div class="case">
<p>治愈人數(shù)</p>
<p>50,000</p>
</div>
<div class="case">
<p>死亡人數(shù)</p>
<p>10,000</p>
</div>
</div>
</div>
</body>
</html>以上是一份簡(jiǎn)潔而美觀的疫情網(wǎng)頁(yè)設(shè)計(jì)作品HTML代碼。在此代碼中，我們使用了HTML5的文檔類(lèi)型聲明，并設(shè)置了網(wǎng)頁(yè)的字符編碼和標(biāo)題。同時(shí)，我們通過(guò)CSS設(shè)置了網(wǎng)頁(yè)的樣式表，包括背景顏色、字體、大小、顏色等。網(wǎng)頁(yè)的主體部分包含了一個(gè)標(biāo)題和三個(gè)統(tǒng)計(jì)數(shù)據(jù)，這些數(shù)據(jù)采用了灰色的背景顏色和白色的文字顏色，并設(shè)置了一定的陰影效果。最后，我們將所有元素包括在一個(gè)容器中，并實(shí)現(xiàn)了響應(yīng)式布局，使得網(wǎng)頁(yè)能夠適應(yīng)不同的屏幕尺寸和設(shè)備。
總體來(lái)說(shuō)，這份疫情網(wǎng)頁(yè)設(shè)計(jì)作品HTML代碼簡(jiǎn)單易懂，注重細(xì)節(jié)和美觀度。如果你也想制作一份自己的疫情網(wǎng)頁(yè)設(shè)計(jì)作品，可以參考以上代碼，并根據(jù)需要進(jìn)行修改和優(yōu)化。