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

2021-10-03 19:12:15 字數 1356 閱讀 5361

共自己之後複習

說明

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>

"en"

>

<

!--這個標籤裡的內容是不顯示的--

>

"utf-8"

>

十里桃花<

/title>

div<

/style>

<

/head>

花開三世 酒釀成了微甜

人在夢外之夢 血化成了青藤

夜燈扶搖公升上空 離人還在等

不捨得不再遇見

有情的人原來不敢相逢

桃花朵朵 只恨瞬間花落

八荒相隔 四海再無歌

看死生契闊 有傳說

詞句寫在你眼底 你只有我

時間苦多 只待一語道破

若情可得 窮盡了三生三世尋相似輪廓

分分合合 不錯過

忘情三生 遺憾也算有幸

崑崙雪化成風 淚變千年玄冰

氤氳泉此刻無聲 故人還在等

不捨得不再相欠

有情的人原來不敢相逢

桃花朵朵 只恨瞬間花落

八荒相隔 四海再無歌

看死生契闊 有傳說

詞句寫在你眼底 你只有我

時間苦多 只待一語道破

此情可得

窮盡了三生三世尋相似輪廓

生生世世 不錯過

時間苦多 只待一語道破

此情可得

窮盡了三生三世尋相似輪廓

生生世世 緣無因愛有果

<

/div>

<

/body>

<

/html>

背景圖:

效果:

HTML5 拖拽複製功能的實現

拖拽是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖拽是標準的一部分,任何元素都能夠拖拽。html5拖拽非常常見的乙個功能,但是大部分拖拽的案例都是乙個剪下的過程,專案中需要實現html5拖拽複製的功能,html5拖拽複製很簡單,只需要在普通html5拖拽的過程中做一點小小的改...

用HTML5 實現橡皮擦的塗抹效果的教程

最近專案剛好用到這種效果,也就是有點像刮刮卡一樣,在移動裝置上,把某張刮掉顯示出另一張。效果圖如下 demo請戳右 demo 這種在網上還是挺常見的,本來就想直接網上找個demo套用下他的方法就行了,套用了才發現,在android上卡出翔了,因為客戶要求,在android不要求特別流暢,至少要能玩,...

用html5製作自己的課程表

用html5製作自己的課程表 2 width 80 align center bgcolor fff0ff cellpadding 7 cellspacing 7 font size 30px 課程表 font size 16px 星期 2 style font size 20px 星期天 2 st...