滑动竖版古诗样式中国风带标题排版

美化源代码
复制源代码
源代码
<section style=" text-align: center;margin:10px 0px;"><section style="display: flex; justify-content: space-between; align-items:flex-strat;"><section style="color:#9e7339;"><section style="text-align: left;writing-mode: vertical-lr;font-size: 24px;letter-spacing: 1.5px;box-sizing: border-box;"><p>                    《锦瑟》<span style="font-size: 18px;">李商隐</span></p></section></section><section style="width:90%;background-image: url(/public/static/img/dian.png?id=mmbiz_png/Ljib4So7yuWiaYxA2IlCXuRJJN1RPzDL6RpD09w9uq21ArVaSXz5AuN97TDVuMaJYicziaz6rWiab2hQAS7QkKgUoDw/0?wx_fmt=png);padding:15px;"><section style=" white-space: normal; border: 0px none; text-align: center; padding: 0px; overflow: hidden;"><section style="white-space: nowrap; width: 100%; overflow-x: scroll; text-align: left;"><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    锦瑟无端五十弦</p></section></section></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="border-left:solid 1px #e2c6a0;width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    一弦一柱思华年</p></section></section></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="border-left:solid 1px #e2c6a0;width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    庄生晓梦迷蝴蝶</p></section></section></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="border-left:solid 1px #e2c6a0;width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    望帝春心托杜鹃</p></section></section></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="border-left:solid 1px #e2c6a0;width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    沧海月明珠有泪</p></section></section></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="border-left:solid 1px #e2c6a0;width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    蓝田日暖玉生烟</p></section></section></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="border-left:solid 1px #e2c6a0;width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    此情可待成追忆</p></section></section></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="border-left:solid 1px #e2c6a0;width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    只是当时已惘然</p></section></section></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="border-left:solid 1px #e2c6a0;width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    只是当时已惘然</p></section></section></section><section style="display: inline-block;word-wrap: break-word;white-space: normal;vertical-align: top;"><section style="border-left:solid 1px #e2c6a0;width:38px;"><section style="text-align: center;writing-mode: vertical-lr;font-size: 20px;letter-spacing: 1.5px;box-sizing: border-box;color:#8c6530;"><p>                                    只是当时已惘然</p></section></section></section></section></section></section></section></section>
可视化
《锦瑟》李商隐
锦瑟无端五十弦
一弦一柱思华年
庄生晓梦迷蝴蝶
望帝春心托杜鹃
沧海月明珠有泪
蓝田日暖玉生烟
此情可待成追忆
只是当时已惘然
专注移动端开发

快速链接

关于我们

115cms信息内容管理系统
