这个样式什么意思:style="writing-mode:tb-rl"

作者&投稿:徭虽 (若有异议请与网页底部的电邮联系)
请问样式中哪个是writing-mode:tb-rl也就是垂直排列字!哪个按钮?Dw8中~

aaaaa就可以实现垂直排列了,至于哪个按钮,我没有用按钮的习惯所以回答不了您。

让文字竖排有以下三种方法:
一,原始使用writing-mode属性-不推荐。
1,语法:writing-mode:lr-tb或writing-mode:tb-rl;
2,参数:
1、lr-tb:从左向右,从上往下
2、tb-rl:从上往下,从右向左
运行代码发现,IE显示正常,火狐、谷歌浏览器却不支持,所以不建议使用writing-mode属性。

二、使用CSS模拟文字竖排。
对文字对象宽度设置只能排下一个文字的宽度距离,让文字一行排不下两个文字使其文字自动换行,就形成了竖立排版需求。示例代码如下:




竖列排版实例

body{text-align:center}
.shuli{ margin:0 auto;width:20px;line-height:24px;border:1px solid #333}



我是竖列排版


说明:对文字DIV设置较小的宽度,以达到一排只能排下一个文字,这样文字就自动换行,实现垂直竖列排版。

三、使用br换行让其文字垂直竖排显示 。
利用html br换行标签实现文字换行,对每个文字后加上换行br标签让其竖列排版。示例代码如下:




竖列排版实例

body{text-align:center; line-height:22px}
/* CSS注释说明:设置css文字居中,css行高为22px间隔 */



我是竖列排版

语法:writing-mode : lr-tb、tb-rl
  参数:lr-tb:从左向右,从上往下  tb-rl:从上往下,从右向左
  示例:div { writing-mode: tb-rl; }

<div style="width:500px; color:#FF0000;text-decoration:underline;text-transform:capitalize; text-shadow:#000000 10px 10px 50px; line-height:19px; writing-mode:tb-rl;">

writing-mode:tb-rl,table标签不具有此属性,

</div>
效果如下:

请您用下面的按钮选择这段文字的layout-flow属性的值。看一看会发生什么,然后您就会明白这个属性的意义。希望您喜欢这本电子书。谢谢。

最后一点要说明的是“writing-mode”目前只有IE浏览器支持,Nestscape、ff浏览器不支持!
垂直布局是 Microsoft Internet Explorer 5.5 的一种主要的新功能。本文对垂直布局的基本概念进行了探讨,帮助您避免某些常见的错误。
注意: 本文中的示例需要 Internet Explorer 5.5 或更高的版本.
什么是垂直布局?
当您浏览几乎所有的 Web 页时(如本页),段落中的文字走向都是从左向右的。文本自动换行时,新的一行位于前一行下方,从页面的左侧开始。这是非常自然的,你甚至不会注意到它。
但是对于世界上的很多地方,这却不是天经地义的。如果你曾经看到过日文或中文的书籍或杂志,那么你就知道其印刷的文字通常采取垂直布局。文字起始于每页的右上角,其走向是向下的,换行时,下一行回到页面顶部并位于前一行的左侧。例如报纸的大字标题就在每页右侧自上而下地安排;路牌、情书、以及大多数其它形式的书写文字也是按照这种方法安排的。Web 页是个例外,HTML 无法处理这种布局。但是,这并没有阻止 Web 作者进行从位图到非常窄的表单元格的各种尝试。然而到目前为止,仍然没有找到能够实现垂直布局的令人满意的方法。
支持MSN空间联盟-我是技术总监^_^
Writing-mode 的属性
在 Microsoft® Internet Explorer 5.5 中,通过名为 writing-mode(英文)的 CSS(英文)属性(是当前为 CSS 3(英文)推荐的)启用对垂直布局的支持。下面的示例对于英文和日文内容进行了水平布局和垂直布局的比较。请浏览示例,然后我们将对细节进行深入探讨。
writing-mode 属性有两个要探讨的值:
tb-rl
lr-tb
Tb-rl 表示自上而下、从右向左,说明了应用这种样式的元素的内容走向。Lr-tb 表示从左向右、自上而下,它是所有文字的默认走向,也是英文读者所熟悉的典型的水平走向。与其它任何 CSS 属性一样,可通过外部 CSS 文件,或通过对象模型(style.writingMode(英文)),在一列上指定这些值。
请注意,虽然是东亚语言引发了对垂直布局的支持这一思路,但是任何语言文字都可以采用垂直文字走向。在这种走向中,单独字符的方向取决于它们所属的语言或文稿。为了保持垂直排版的传统,东亚文字的字符均采取竖直方向显示,而其它所有字符,包括拉丁文字符,在采用垂直布局时则顺时针旋转 90° 显示。
可用的元素
在 MSDN 联机 Web 工作室文档(英文)中可找到 writing-mode 所应用的元素的列表,但却无法在列表中找到 BODY 元素(英文)。这说明 BODY 元素总采取水平布局,但它所包含的元素却可以采用垂直布局。有时很难预料这种布局规则的组合结果是什么样的,这在下面的示例中会加以说明。
<HTML>
<BODY>
<DIV style="writing-mode:tb-rl; width:50cm">
This is a sentence in a DIV element with vertical layout.
</DIV>
</BODY>
<HTML>

当您在 Internet Explorer 5.5 中查看此标记时,一开始看不到文字,但却会看到水平滚动条。如果您将该页一直滚动到右端,则可以看到文字。为什么会这样呢?
BODY 元素总采用水平布局,而浏览器总是将可视区定位于起始于标记中最顶端元素的原点。在前面的示例中,原点位于页面的左上角,若要显示加载了文字的页面,必须使主体滚动到右端。其实现方法为:在全局 DIV 元素(英文)中,将主体上的方向属性设置为 RTL(从右向左),然后再将方向属性设置回 LTR(从左向右)。这样,就将原点放置在右上角了。
<HTML>
<BODY style="direction:rtl">
<DIV style="direction:ltr; writing-mode:tb-rl; width:50cm">
This is a vertical sentence.
</DIV>
</BODY>
</HTML>

与其它 CSS 属性 交互
很多 CSS 属性可能拥有与方向或位置相关的值,如顶部、底部、左边和右边等。在垂直布局的环境中应如何转换这些值呢?通常,影响方向或位置的 CSS 属性是被绝对转换的。这是从实际而言的,表明这种样式的隐含的或明确的方向性并不随垂直布局而改变。例如,请考虑 border-left 属性(英文)。举例而言,在垂直布局中,border-left 表示在元素的左边界上绘制一个边框。因为这种放置是绝对的,所以在垂直布局中,border-left 并不会变为 border-top(英文)。
但是,有些 CSS 属性的转换是相对的。这是从逻辑角度而言的,表明若按照上面那样对它们进行绝对转换是没有意义的。line-height 属性(英文)就是一个示例。如果行是水平布局的,则该属性控制行的高度;如果行是垂直布局的,则该属性控制行的宽度。换句话讲,line-height 属性在与基线垂直的维度上控制行的大小。因此,对属性进行绝对转换是没有意义的。World Wide Web Consortium (W3C) 提供了按照逻辑转换的 CSS 属性列表(英文)。
容器关系和继承
writing-mode 属性决定了元素内容的布局方式,而不是元素自身的位置,记住这一点十分重要。当元素 writing-mode 的值为 tb-rl 时,整个元素的内容采用垂直布局(此时,忽略对继承的限制或设置水平布局的子元素的情况)。这说明文字和子元素的走向为自上而下、从右向左。

对 writing-mode 属性的继承并不是统一的。某些元素根本不继承它。其它元素将 writing-mode 属性传递给它们的子元素,但自己却不采用这些属性。这将在 writing-mode 参考页(英文)中加以介绍。将鼠标指针移到“Applies To”列表中的任何元素上,可以查看该元素上是否应用了继承限制。关于有限制的继承的示例,请参见对 BUTTON 元素(英文)的 Web Workshop 参考。
元素高度
在水平布局中,如果没有指定特殊的尺寸调整,则块元素通常与其父元素、负页边距、边框和边距有相同的宽度。元素的高度将根据其内容多少进行调整(文字换行次数越多,则元素高度越高)。对于其父元素拥有垂直布局的垂直元素而言,其工作方式是类似的。块元素与其父元素、负页边距、边框和边距有相同的高度。
将垂直元素与水平父元素的行为一同考虑时,元素高度将变得错综复杂(请记住,因为 BODY 元素总是水平的,所以这种情况是常见的)。水平父元素的高度是可变的,— 根据父元素的内容,这个高度有时很小,有时很大。根据父元素的高度来决定子元素的高度并不是一个好的解决方案,应当通过计算来决定最合适的高度。这种计算建立在变量数目的基础之上,包括字符大小(以第一个为基准)和文章中最长的单词。通常,垂直子元素的最小高度是 10 个字符高度。

当然,通过在标记中指定高度、宽度和位置,你可以降低绝大部分的复杂程度,并更好地控制布局。
平台限制
操作系统的限制导致在某些配置中不能正确地按竖直方向显示东亚字符。Microsoft Windows® 2000 中消除了这一限制,但对于 Microsoft Windows NT® 4.0 和 Windows 9x 系统,对东亚语言仍需要已经本地化的操作系统版本,以确保可以正确显示这些字符。

下面是一些关于垂直布局的js特效:
1.
<style type="text/css">
div{
font-weight: bold;
font-family: "华文新魏";
color: #6666CC;
font-size: 18px;
writing-mode:tb-rl;
}
</style>
<script language="javascript">
var nbottom=0,speed=2,i=1;
function displayMenu()
{
if(nbottom==100){i=2;
nbottom=0}
eval_r("div"+i).style.display='';
eval_r("div"+i).style.clip="rect(0 100% "+nbottom+"% 0)";
nbottom+=speed;
if(i==1||(i==2&&nbottom<100))
{
setTimeout("displayMenu()",70);
}
}
</script>
<body onLoad="displayMenu()">
<div style=" position:relative ">
<div nowrap style="display: none;position:absolute; left:50px;" id="div1">
剑光只一刹,惊雷响千秋,</div>
<div nowrap style=" display:none;position:absolute; left:100px" id="div2">
铁肩担正义,妙手著文章。</div>
</div>
</body>

2.
<MARQUEE scrollAmount=2 direction=right>
<DIV style="WRITING-MODE: tb-rl">
<FONT style="FONT-SIZE: 20pt;FILTER: shadow(color=black);COLOR: #000000;FONT-FAMILY:华文彩云" WIDTH:100%; LINE-HEIGHT:80%>
这里加入文字内容 -如: 《诗经》 · 鹤鸣 皋
</FONT></DIV></MARQUEE>
源文来自网拓传媒:http://www.wtcm360.com


...是一个钻石外形里面有一个s字母,s字母是什么意思?
那是超人Superman的意思

css 里面的s标签是什么意思
<s> 标签是 <strike> 标签的缩写版本,Netscape 和 Internet Explorer 都支持它。但在 HTML 4 和 XHTML 中已经不再赞成使用它了

WINCC格式样式S9.9是什么
S代表带符号,也就是说当数值小于0的时候会出现负数符号。9.9代表,显示格式为整数位1位,小数为1位。

消防产品S标的意思是什么?
二、验证体标志样式 标志样式为黄色,中间 S 标志为浅蓝色。 采用黄色激光打印不干胶纸经打印后,标志样式为黄色(其上有 隐形编码)并带 S 图案,S 图案不会造成隐形编码失效;

桌面EXCEL的表格图标只显示一个S样式缩略图
以WPS 2019版本为例:如更新后,桌面图标都变成下图样式,可进入WPS,点击软件左上角「WPS\/首页(蓝色图标)-设置-皮肤和外观设置-格式图标」中更换即可。

css里面的s标签是什么意思
s标签指:标签可定义加删除线文本定义,s标签是strike标签的缩写版本。层叠样式表,英文全称:Cascading Style Sheets,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,...

excel中,符号栏(T)是做什么用的?它和另外两个选项符号(S)和特殊符号...
- **T**: 通常可能代表“Text”,即文本类型的数据,用于指定一个条件应用于文本值。- **S**: 这个符号可能代表“Style”或“String”,在不同的上下文可能有不同的含义。如果它是“Style”,它可能与单元格的格式有关;如果是“String”,它可能代表对字符串类型的数据施加条件。- **P**: ...

style是什么意思?
1、n.方式;作风;样式;款式;(指服装)时新,时髦,流行式样 2、v.把…设计(或缝制、做)成某种式样;称呼;命名;称 style 读法 英 [staɪl] 美 [staɪl]短语 1、learning style 学习方式,学习类型;学习风格 2、hair style n. 发型 示例:Mr Blair was not off guard. That ...

's和s'有什么区别
这些是女孩样式的外套。2、s'与's所表示含义不同,s'表示“……们的”,而's通常表示“……的”。s'是复数名词的所有格,所以其意思通常为“……们的”,而's通常是单数名词的所有格,所以其意思是“……的”。3、s'与's用法不同,不规则的复数名词,其所有格通常用's,而不是用s'。对于...

background-repeat:no-repeat" css样式是什么意思
前边说的好给力,你这个css的意思简单来说就1句话,设置背景图片的重复样式为不重复,也就是说背景图片不平铺,只显示一张

五河县18536388105: CSS样式是什么?对表格中某空格加链接可否实现? -
熊宝聚乙: CSS是Cascading style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一 点,没别的意思.实际上它是一组样式.你可能对CSS这个名词比较陌生,实际上无论你用Internet Explorer还是 Netscape ...

五河县18536388105: <style type="text/css">中的type=&quo -
熊宝聚乙: type="text/css"是指定MIME类型,其中: text是指对象为网页中的文本 css或是javascript是指当前指定的文本类型... 如果要在HTML文件中应用CSS样式,最常用的有三种方法: 1.内部引用 所谓内部引用就是运用style标签引用在同HTML页内<...

五河县18536388105: 请问html标签class属性的style=那个是什么意思,本人刚学,请耐心解答 -
熊宝聚乙: style和class都是定义标签样式的,但是style的优先级高于class,你问中的style19之类的是class样式的名字

五河县18536388105: class="qmbox" style="width:100%;" 这句html代码什么意思? -
熊宝聚乙: class="qmbox" 类名叫qmbox class 属性规定元素的类名(classname).class 属性大多数时候用于指向样式表中的类(class).不过,也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素.style="width:100%;" 宽度为他父类对象的宽度

五河县18536388105: style什么意思 -
熊宝聚乙: 加在标签中的style,是指内嵌CSS样式.

五河县18536388105: 数据库中<span style= 是什么意思 -
熊宝聚乙: 这个应该是存储的用于页面展示用的html片段

五河县18536388105: 样式什么意思 -
熊宝聚乙: 样式 [ yàng shì ] 式样;形式,款式 如:这件衬衫的样式真好

五河县18536388105: html中style="windows:1"什么意思 -
熊宝聚乙: 你好,html中style是css层叠样式表.style=""里面写的是css代码.你的windows:1没有什么意义,一般没有这种写法.

五河县18536388105: 名词解释“CSS样式” -
熊宝聚乙: 简称为"Cascading Style Sheets" (层叠样式表).

五河县18536388105: 网页中的style怎么看,styles是不是就是css文件,灰色字体表示什么意思,我想把这个样式直接拷走能用么 -
熊宝聚乙: 这位网友你好,styles指的就是css文件,灰色字体表示跟黑色字体拥有相同的样式,如果你把这个样式直接拷走可以用,但前提是你的网站上也得用相同的class名,甚至有些html结构也需要跟这个网站一样.所以说css文件一般都是每个网站都各不相同,你可以参考它的样式自己写,如果拷别人的用是相当难修改的,所以建议还是自己写.

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网