用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>

背景图:
在这里插入图片描述
效果:
在这里插入图片描述

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