Rumah > hujung hadapan web > html tutorial > css实现文字竖排效果_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:37:06
asal
1958 orang telah melayarinya

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>
Salin selepas log masuk

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

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

所属网站是:div css教程。

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan