用HTML5實現十里桃花歌詞的打印(一)

共自己之後複習

說明

<!--
    white-space:pre-wrap; 按照粘來的的格式顯示
    width:600px;
    margin: auto;外邊距自動(中間)
    height:799px 高度
    background:url("pg.png");背景圖
    padding-top: 100px;內上邊距
    padding-left: 80px;內左邊距
    box-sizing: border-box;
    line-height: 1.5em;行間距
    color:mediumvioletred; 顏色
    
      -->

代碼實現

<!DOCTYPE html>
<html lang="en">
<head> <!--這個標籤裏的內容是不顯示的-->
    <meta charset="UTF-8">
    <title>十里桃花</title>
     div{
    white-space:pre-wrap;
    width:600px;
    margin: auto;
      height:799px;
    background:url("bg.png");
    padding-top: 100px;
    padding-left: 80px;
    box-sizing: border-box;
    line-height: 1.5em;
    color:mediumvioletred;
    }
  </style>
</head>
<body>
<div>
  花開三世 酒釀成了微甜
  人在夢外之夢 血化成了青藤
  夜燈扶搖升上空 離人還在等
  不捨得不再遇見
  有情的人原來不敢相逢
  桃花朵朵 只恨瞬間花落
  八荒相隔 四海再無歌
  看死生契闊 有傳說
  詞句寫在你眼底 你只有我
  時間苦多 只待一語道破
  若情可得 窮盡了三生三世尋相似輪廓
  分分合合 不錯過
  忘情三生 遺憾也算有幸
  崑崙雪化成風 淚變千年玄冰
  氤氳泉此刻無聲 故人還在等
  不捨得不再相欠
  有情的人原來不敢相逢
  桃花朵朵 只恨瞬間花落
  八荒相隔 四海再無歌
  看死生契闊 有傳說
  詞句寫在你眼底 你只有我
  時間苦多 只待一語道破
  此情可得
  窮盡了三生三世尋相似輪廓
  生生世世 不錯過

  時間苦多 只待一語道破
  此情可得
  窮盡了三生三世尋相似輪廓
  生生世世 緣無因愛有果

</div>
</body>
</html>

背景圖:
在這裏插入圖片描述
效果:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章