lovecoding
/
W250511


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
							<!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>
        /* 部分属性具有继承性 */
        .music-title{
            color:blue;
            text-align: center;
        }
        .music-author{
            text-align: center;
        }

        .music-pic{
            width: 400px;
            border:3px solid blue;
            margin:auto;
        }
        
        img{
            width: 400px;
        }
        .music-info{
            text-align: center;
        }
        .music-text{
            text-align: center;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <!-- 页面最外部容器 -->
    <div class="container">
        <!-- 歌曲标题 -->
        <div class="music-title">
            <h1>《枫》</h1>
            <hr>
        </div>
        <!-- 作者 -->
        <div class="music-author">
            <h2>歌手：周杰伦</h2>
            <h3>作词人：弹头（宋健彰）</h3>
            <h3>作曲人：周杰伦</h3>
        </div>
        <!-- 歌曲图片 -->
        <div class="music-pic">
            <img src="./image/img1.jpg" alt="图片">
        </div>
        <!-- 歌曲信息 -->
        <div class="music-info">
            <p>
                <b>歌词：</b>
            </p>
        </div>
        <!-- 歌词 -->
        <div class="music-text">
            乌云在我们心里搁下一块阴影<br>
            我聆听沉寂已久的心情<br>
            清晰透明 就像美丽的风景<br>
            总在回忆里才看得清<br>
            被伤透的心能不能够继续爱我<br>
            我用力牵起没温度的双手<br>
        </div>
    </div>
</body>

</html>