css实现文字竖排效果

简介:

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

代码如下:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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 >



原文发布时间为:2017-3-11

本文作者:admin

本文来自云栖社区合作伙伴“蚂蚁部落”,了解相关信息可以关注蚂蚁部落

原文链接:css实现文字竖排效果




相关文章
|
21天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
17 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
46 1
简单几行代码CSS实现网页自动打文字效果
|
9天前
|
Web App开发 前端开发 iOS开发
|
2月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
58 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
2月前
|
前端开发
CSS流光文字效果:打造网页上的霓虹灯效果!
CSS流光文字效果:打造网页上的霓虹灯效果!
|
前端开发 定位技术 索引
【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
|
前端开发
css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)
原文:css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…) 记录几种常见的文字效果 示例查看:http://pangyongsheng.github.io/cssFont/ 一、文字剪贴蒙版 在PS中,对文字图层栅格化,然后可将其他图层创建为文字的剪贴蒙版,而在c...
1267 0
|
前端开发
CSS文字排版
一、font-size   我来试一试:为第一段中的“胆小如鼠”设置字号为:20px,字体颜色为:red。 DOCTYPE HTML> 字号、颜色 body{font-family:Microsoft Yahei;font-size:12px;color:#666;} .stress{font-size:20px;color:red;} 勇气 三年级时,我还是一个胆小如鼠的小女孩,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。
1201 0
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果