琵琶行页面(CSS)
包含页面内跳转到指定元素位置、字体样式、字体颜色等CSS的基础应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>诗词页面</title>
<style>
body {
background-image: url('../img/3.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 1920px 1080px;
}
#d {
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: rgba(128, 128, 128, 0.5);
width: 600px;
height: auto;
}
a {
float: right;
margin-right: 100px;
font-family: "宋体";
font-size: 30px;
}
a:link {
color: aqua;
}
a:visited {
color: aqua;
}
a:hover {
color: red;
}
a:active {
color: greenyellow;
}
p {
text-align: center;
font-family: "隶书";
color: lightgreen;
font-size: 30px;
}
#title {
font-size: 50px;
}
#author {
font-size: 1em;
text-decoration: underline;
font-style: italic;
font-weight: bolder;
}
</style>
</head>
<body>
<a id="top" href="#bottom">跳转到底部</a><br />
<div id="d">
<p id="title">琵琶行</p>
<p id="author">[唐] 白居易</p>
<p>浔阳江头夜送客,枫叶荻花秋瑟瑟。</p>
<p>主人下马客在船,举酒欲饮无管弦。</p>
<p>醉不成欢惨将别,别时茫茫江浸月。</p>
<p>忽闻水上琵琶声,主人忘归客不发。</p>
<p>寻声暗问弹者谁,琵琶声停欲语迟。</p>
<p>移船相近邀相见,添酒回灯重开宴。</p>
<p>千呼万唤始出来,犹抱琵琶半遮面。</p>
<br />
<p>转轴拨弦三两声,未成曲调先有情。</p>
<p>弦弦掩抑声声思,似诉平生不得志。</p>
<p>低眉信手续续弹,说尽心中无限事。</p>
<p>轻拢慢捻抹复挑,初为霓裳后六幺。</p>
<p>大弦嘈嘈如急雨,小弦切切如私语。</p>
<p>嘈嘈切切错杂弹,大珠小珠落玉盘。</p>
<p>间关莺语花底滑,幽咽泉流冰下难。</p>
<p>冰泉冷涩弦凝绝,凝绝不通声暂歇。</p>
<p>别有幽愁暗恨生,此时无声胜有声。</p>
<p>银瓶乍破水浆迸,铁骑突出刀枪鸣。</p>
<p>曲终收拨当心画,四弦一声如裂帛。</p>
<p>东船西舫悄无言,唯见江心秋月白。</p>
<br />
<p>沉吟放拨插弦中,整顿衣裳起敛容。</p>
<p>自言本是京城女,家在虾蟆陵下住。</p>
<p>十三学得琵琶成,名属教坊第一部。</p>
<p>曲罢曾教善才服,妆成每被秋娘妒。</p>
<p>五陵年少争缠头,一曲红绡不知数。</p>
<p>钿头银篦击节碎,血色罗裙翻酒污。</p>
<p>今年欢笑复明年,秋月春风等闲度。</p>
<p>弟走从军阿姨死,暮去朝来颜色故。</p>
<p>门前冷落鞍马稀,老大嫁作商人妇。</p>
<p>商人重利轻别离,前月浮梁买茶去。</p>
<p>去来江口守空船,绕船月明江水寒。</p>
<p>夜深忽梦少年事,梦啼妆泪红阑干。</p>
<br />
<p>我闻琵琶已叹息,又闻此语重唧唧。</p>
<p>同是天涯沦落人,相逢何必曾相识!</p>
<p>我从去年辞帝京,谪居卧病浔阳城。</p>
<p>浔阳地僻无音乐,终岁不闻丝竹声。</p>
<p>住近湓江地低湿,黄芦苦竹绕宅生。</p>
<p>其间旦暮闻何物?杜鹃啼血猿哀鸣。</p>
<p>春江花朝秋月夜,往往取酒还独倾。</p>
<p>岂无山歌与村笛,呕哑嘲哳难为听。</p>
<p>今夜闻君琵琶语,如听仙乐耳暂明。</p>
<p>莫辞更坐弹一曲,为君翻作琵琶行。</p>
<br />
<p>感我此言良久立,却坐促弦弦转急。</p>
<p>凄凄不似向前声,满座重闻皆掩泣。</p>
<p>座中泣下谁最多?江州司马青衫湿。</p>
</div>
<a id="bottom" href="#top">跳转到顶部</a>
</body>
</html>