使用 HTML 和 CSS 设计致敬页面

17 Mar 2025 | 4 分钟阅读

什么是致敬页面？

致敬页面是一个网页，我们在其中提及我们最喜欢的人并写下他们的成就。例如，在这里，我们将为板球运动员 Virat Kohli 创建一个致敬页面。

示例

<!DOCTYPE html>
<html lang="en">
<head>
	<style>		
		body {
			background-color: #f0f5f3;
			margin: 20%;
		}
		#title {
			text-align: center;
			text-shadow: 5px 5px 10px white;
			font-size: 8vh;
		}
		img {
			display: inline-block;
			width: 100%;
		}	
		#caption {
			font-size: 19px;
			font-family:sans-serif;
			color: black;
		}
		div#tribute-data {
			background-color: rgb(46, 139, 87, 0.25);
			box-shadow: 20px 20px 20px #96c996;
			font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
			padding: 25px 25px;
			margin: 11px;
			margin-top: 50px;
		}
		h1.title-vk {
			font-size: 35px;
			color: white;
			text-align: center;
			text-shadow: 5px 6px 10px black;
		}	
	</style>
</head>
<body>
	<main id="main">
		<!-- Title of the web page tributing virat kohli -->
		<h1 id="title">
			Virat Kohli - The Run Machine
		</h1>
		<div id="img">
			<!--Image of the Virat kohli-->
			<img src="vk.jpg" id="image"
				alt="Error in the image">
			<small id="caption">
				Currently, Virat Kohli is the best batter in the world.
			</small>
		</div>
		<div id="tribute-data">
			<h1 class="title-vk">
				About the Run Machine/King Kohli
			</h1>
<p>
				☛ Virat, a 13-year-old, is selected for the Delhi Under-15 team for the Polly Umrigar Trophy in October. He ends the campaign as Delhi's leading scorer.<br><br>
				☛ Virat is chosen for the India Under-19 team for the first time after making an impression at the youth level for Delhi. He then had a fantastic tour of England, averaging over 100 in the one-day series.<br><br>
				☛ In Malaysia's Under-19 World Cup, Virat led India to win and finished the competition as one of the top three run scorers. His innate leadership abilities attracted the proper kind of attention.<br><br>
				☛ Royal Challengers Bangalore, an IPL team, signs Virat on a youngster contract for just Rs 12.5 lakhs when he is still a minor.
				<br><br> ☛ Virat received his maiden call-up to the Indian ODI team and participated in the entire five-match series against Sri Lanka on the road. In the fourth game of the series, he hit his first 50, a 54-run inning. 
				<br><br> ☛ When Virat got his first ODI century against Sri Lanka, 107 off 111, it was worth the wait for him to return to the national squad.
				<br><br> ☛ Virat participated in every game of India's victorious World Cup campaign in 2011, scoring his only century against Bangladesh in the opening match. Despite the fact that he didn't exactly light up the tournament with his bat, his final-round remark to Sachin has since become legendary in cricket: "Sachin Tendulkar has carried the weight of the nation for 21 years." Time for us to carry him on our shoulders
				<br><br> ☛ Every cricketer will answer "play Test cricket" when asked what their dream is. In 2011, Virat finally had the opportunity to play in his first Test match against the West Indies. Unfortunately for the charming lad, it was a forgettable experience as he scored just 19 runs in the two innings he played.
				<br><br> ☛ In the fourth and final test against Australia in Adelaide, Kohli achieved his first test hundred under somewhat dramatic circumstances. He just avoided being run out when batting with Ishant Sharma and nearly ran out of partners. However, he was unable to save India. 4-0 was our series loss.
				<br><br> ☛ Virat led India to the CB Series final in Australia with what is undoubtedly one of the best ODI efforts by an Indian batsman, hitting 133 not out against Sri Lanka off just 86 balls. Hobart witnessed one of the greatest batting performances in history as India, who was chasing 321, reached the score in 37 overs.
				<br><br> ☛ In place of an injured MS Dhoni, Virat was selected the stand-in ODI captain when India visited the West Indies. Earlier that year, he had also been named captain of his IPL team, the Royal Challengers Bangalore.
				<br><br> ☛ When summoned to replace an ailing MS in Australia once more, Kohli experienced his first taste of Test captaincy. In Adelaide, he celebrated by scoring centuries in both innings. In what was an exceptional
				<br><br> ☛ In addition to purchasing a share in the IPTL team UAE Royals, Kohli expanded his interest in tennis after becoming a co-owner of ISL football club FC Goa the year before.
				<br><br> ☛ He produced arguably his finest innings of his young career as India defeated Australia in Mohali to go to the ICC World T20 semifinals. As opposed to the lappa kind of cricket that is typically associated with 20 over cricket, his 82 off 51 balls was a magnificent effort, carved with timing and technique.
				<br><br> 
			</p>
		</div>
		<br>
	</main>
</body>
</html>

输出

Design a Tribute Page using HTML and CSS

说明

在这里，您可以看到我们借助适当的标签和样式为 Virat Kohli 创建了致敬页面。

下一主题如何使用 CSS 创建平滑的弹跳动画

使用 HTML 和 CSS 设计致敬页面

什么是致敬页面？

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

使用 HTML 和 CSS 设计致敬页面

什么是致敬页面？

示例

相关帖子

如何在 HTML 中创建下拉列表

如何将图片作为链接在 HTML 中

如何制作 HTML 表格边框

如何使用 HTML 和 CSS 将登录表单添加到图片

HTML 表格标题背景颜色

HTML 嵌套表格

HTML 站点地图

网页设计与平面设计的区别

HTML 弹出窗口

HTML 居中对齐

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器