html入门之简单页静态面练习-东风破

本文链接：https://blog.youkuaiyun.com/chamion7/article/details/52831396

这篇博客介绍了如何使用HTML和CSS创建一个简单的静态页面，展示《东风破》歌词。通过将内容置于<div>元素内并应用text-align:center的CSS样式，实现了文字和图片的居中对齐，替代了传统HTML中<center>标签的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

练习一个简单静态页面，在页面中展示《东风破》歌词。让歌词文字和图片居中，教程中是用的html中<center>标签，我在这里用了css样式来解决的。把想要居中的内容放在一个<div>块元素中，使用选择器选中该块元素，用text-align样式，值为center。

<span style="font-size:18px;"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="keywords" content="周杰伦，东风破，七里香"/>
		<meta name="description" content="这是一个周杰伦的流行歌曲东风破的网页"/>
		<title>东风破</title>
		<style type="text/css">
			p{
				color:#239342;
				
			}
			div{
				text-align: center;
			}
			a.tom:hover{
				background-color: #00ffff;
				
			}
			a.yy:hover{
				background-color: #ffff00;
				
			}
		</style>
	</head>
	<body>
			<div>
			<a class="tom" href="#ha" target="_self">去底部</a>  <a class="yy" href="#he" target="_self">去图片</a><br/>
			<h1>这是我的一个练习<h1/><hr/>
			<h2>东风破</h2><br/>
			<a href="#" target="_blank">周杰伦</a><br/>
			
				<div>
				<p>
				一盏离愁 孤单伫立在窗口<br/>
我在门后 假装你人还没走<br/>
我在门后 假装你人还没走<br/>
旧地如重游 月圆更寂寞<br/>
夜半清醒的烛火 不忍苛责我<br/>
一壶漂泊 浪迹天涯难入喉<br/>
你走之后 酒暖回忆思念瘦<br/>
水向东流 时间怎么偷<br/>
花开就一次成熟 我却错过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
岁月在墙上剥落 看见小时候<br/>
犹记得那年我们都还很年幼<br/>
而如今琴声幽幽 我的等候你没听过<br/>
<img id="he" src="exer/1.jpg" alt="周杰伦" width="300px"><br/>
谁在用琵琶弹奏 一曲东风破<br/>
枫叶将故事染色 结局我看透<br/>
篱笆外的古道我牵着你走过<br/>
荒烟漫草的年头 就连分手都很沉默<br/>
一壶漂泊 浪迹天涯难入喉<br/>
你走之后 酒暖回忆思念瘦<br/>
水向东流 时间怎么偷<br/>
花开就一次成熟 我却错过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
岁月在墙上剥落 看见小时候<br/>
犹记得那年我们都还很年幼<br/>
而如今琴声幽幽 我的等候你没听过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
枫叶将故事染色 结局我看透<br/>
篱笆外的古道我牵着你走过<br/>
荒烟漫草的年头 就连分手都很沉默<br/>
<img src="exer/2.jpg" alt="周杰伦" width="300px"><br/>
谁在用琵琶弹奏 一曲东风破<br/>
岁月在墙上剥落 看见小时候<br/>
犹记得那年我们都还很年幼<br/>
而如今琴声幽幽 我的等候你没听过<br/>
谁在用琵琶弹奏 一曲东风破<br/>
枫叶将故事染色 结局我看透<br/>
篱笆外的古道我牵着你走过<br/>
荒烟漫草的年头 就连分手都很沉默<br/>
<hr/>

			</p>
		</div>
			<a class="tom" id="ha" href="#">回到顶部</a>  |  <a class="yy" href="mailto:110@111.com" >联系我们</a>
		
	</body>
</html>
</span>