Maison > interface Web > tutoriel HTML > css实现文字竖排效果_html/css_WEB-ITnose

css实现文字竖排效果_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:37:06
original
1944 Les gens l'ont consulté

css实现文字竖排效果:
在当前大家都习惯于横向排列的文本,但是绝大多数朋友也是知道的,在古代中国的文本是竖向排列的,本章节通过代码实例介绍一下如何实现文本的竖向排列效果,这样的需求在实际应用中也是有的。
代码如下:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">#webfx{  position:absolute;  background:red;  top:50px;  right:100px;  width:100px;  writing-mode:tb-rl;    -webkit-writing-mode:vertical-rl;}</style></head><body><div id=webfx>蚂蚁部落欢迎您</div></body>  </html>
Copier après la connexion

上面的代码实现了文本竖排效果,不过存在着较大的兼容性问题。
兼容所有浏览器的竖排效果可以参阅CSS如何实现文字竖排效果一章节。

原文地址是:css实现文字竖排效果一章节。

所属网站是:div css教程。

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal