琵琶行页面(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>

效果图

点击链接跳转底部

点击链接跳转顶部

CSS的一些基础应用相关推荐

【重识 HTML + CSS】网页基础知识、基本 HTML 标签
重识 HTML + CSS 网页的基础知识网页的显示过程缓存(cache)技术浏览器内核常用 HTML 元素 DOCTYPE 文档说明 html 元素:根元素 lang 属性 head 元素: ...
平台全局 css代码,css全局样式基础代码(示例代码)
简介这篇文章主要介绍了css全局样式基础代码(示例代码)以及相关的经验技巧,文章约900字,浏览量402,点赞数4,值得参考! body{ font-size:12px; font-family:&q ...
css-day01笔记-CSS初识、基础选择器、文字和文本样式
typora-copy-images-to: media 第01阶段.web基础:css-day01笔记-CSS初识.基础选择器.文字和文本样式一.CSS层叠样式表学习目标理解 css的目的作用 ...
CSS的一些基础知识
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
前端「HTML+CSS」零基础入门学习笔记
HTML+CSS入门笔记目录一.HTML 简介 1.HTML是什么? 2.什么是HTML标签? 二.HTML 文档结构 1.HTML基本结构 2.文档类型声明标签 3.lang语言属性 4.字符集与 ...
第四章 JavaWeb CSS入门核心基础基础形式 + 选择器
谢罪:今天起晚了= =! 文章目录什么CSS? css样式规则 CSS核心基础行内式也称为内联样式内嵌式链入式导入式选择器标记选择器类选择器 id选择器通配符选择器什么CSS? C ...
HTML+CSS+JS的基础知识笔记
语义化:通俗来说就是明白每个标签的用途(在什么情况下使用此标签合理) 语义化的好处:1更容易被搜索引擎收录.2. 更容易让屏幕阅读器读出网页内容. html文件基本结构: <html> ...
HTML和CSS的常用基础知识笔记
HTML基础知识标题标签: <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4& ...
HTML CSS笔记(没有基础内容，比如br标签是换行什么的)，CSS2.1，CSS3，响应式布局
每一个知识点都有相应的测试代码,你可以将代码复制到文件中,然后在浏览器中打开测试即可推荐使用谷歌浏览器Chrome,因为都没有做hack浏览器兼容文章目录一.基础(HTML和CSS中较复杂内容) ...

CSS的一些基础应用

琵琶行页面(CSS)

效果图

点击链接跳转底部

点击链接跳转顶部

CSS的一些基础应用相关推荐

最新文章

热门文章