用HTML5实现十里桃花歌词的打印(一)

简介: 用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>


背景图:


20200312092446651.png


效果:


20200312092331494.png

相关文章
|
2月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
126 6
|
5月前
|
JavaScript 前端开发
使用js,html,css实现歌词滚动的效果
使用js,html,css实现歌词滚动的效果
79 0
|
移动开发 前端开发 HTML5
论HTML5 Audio 标签歌词同步的实现
HTML5草案里面其实有原生的字幕标签( Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc)。 用法如下(代码来自W3School):  但遗憾的是,使用起来还有不便之处。
1771 0
|
5天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
78 24
|
2月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
67 7
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
40 6
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧,包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录,便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码,帮助读者更好地理解和应用这些知识点。
49 1
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
47 5
|
2月前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
37 1
[HTML、CSS]知识点