css文章竖排效果代码实例
分类:实例代码
在有些时候,我们可能希望文章的排列格式类似于古文,那就是竖排。
下面就通过代码实例介绍一下如何实现此功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style> body,html{ background-color:#fff; } div{ writing-mode: vertical-rl; width:100px; height:150px; } </style> </head> <body> <div> 前端教程网欢迎您,只有努力奋斗才会有美好的未来,本站url地址是pipipi.net </div> </body> </html>
上面的代码实现了竖排效果,更多内容可以参阅writing-mode属性一章节。