|
|
@@ -0,0 +1,65 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* h1{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ h2{
|
|
|
+ text-align: center;
|
|
|
+ } */
|
|
|
+ .center-text {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content{
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+ <!-- class属性名 命名规范 -->
|
|
|
+ <!-- 见名知意 通过名字就能知道大概要作什么用 -->
|
|
|
+ <!-- 当类名中出现多个单词的时候用“-”进行链接 -->
|
|
|
+ <!-- <h1 class="center-text">《枫》</h1>
|
|
|
+ <hr>
|
|
|
+ <h2 class="center-text">歌手：周杰伦</h2>
|
|
|
+ <h3 class="center-text">作词人：弹头（宋健彰）</h3>
|
|
|
+ <h3 class="center-text">作曲人：周杰伦</h3>
|
|
|
+ <div class="center-text">
|
|
|
+ <img src="./img/img1.jpg" width="300" alt="歌曲封面" />
|
|
|
+ </div>
|
|
|
+ <p class="center-text"> <b>歌词：</b></p>
|
|
|
+ <p class="center-text">乌云在我们心里搁下一块阴影</p>
|
|
|
+ <p class="center-text">我聆听沉寂已久的心情</p>
|
|
|
+ <p class="center-text">清晰透明 就像美丽的风景</p>
|
|
|
+ <p class="center-text">总在回忆里才看得清</p>
|
|
|
+ <p class="center-text">被伤透的心能不能够继续爱我</p>
|
|
|
+ <p class="center-text">我用力牵起没温度的双手</p> -->
|
|
|
+
|
|
|
+
|
|
|
+ <div class="center-content">
|
|
|
+ <h1>《枫》</h1>
|
|
|
+ <hr>
|
|
|
+ <h2>歌手：周杰伦</h2>
|
|
|
+ <h3>作词人：弹头（宋健彰）</h3>
|
|
|
+ <h3>作曲人：周杰伦</h3>
|
|
|
+ <div>
|
|
|
+ <img src="./img/img1.jpg" width="300" alt="歌曲封面" />
|
|
|
+ </div>
|
|
|
+ <p> <b>歌词：</b></p>
|
|
|
+ <p>乌云在我们心里搁下一块阴影</p>
|
|
|
+ <p>我聆听沉寂已久的心情</p>
|
|
|
+ <p>清晰透明 就像美丽的风景</p>
|
|
|
+ <p>总在回忆里才看得清</p>
|
|
|
+ <p>被伤透的心能不能够继续爱我</p>
|
|
|
+ <p>我用力牵起没温度的双手</p>
|
|
|
+ </div>
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
