Html 文字排版

文字竖立排版,方法一

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>数据</title>
<link href=‘http://cdn.webfont.youziku.com/webfonts/nomal/16398/46055/58f85e44f629d8113ccf3119.css‘ rel=‘stylesheet‘ type=‘text/css‘ />
    <style>
        div {
            margin: 0 auto;
            width: 30px;
            line-height: 30px;
            height: 490px;
            font-size: 24px;
            float: right;
            margin-right: 10px
        }</style>
</head>
<body class="cssa2f598364400e">
    <div>
            龙马花雪毛,金鞍五陵豪。
            秋霜切玉剑,落日明珠袍。

        </div>
        <div>
            斗鸡事万乘,轩盖一何高。
            弓摧南山虎,手接太行猱。

        </div>
        <div>
            酒后竞风采,三杯弄宝刀。
            杀人如剪草,剧孟同游遨。

        </div>
        <div>
            发愤去函谷,从军向临洮。
            叱咤万战场,匈奴尽奔逃。

        </div>
        <div>
            归来使酒气,未肯拜萧曹。
            羞入原宪室,荒淫隐蓬蒿。
        </div>

</body>
</html>

效果:

方法二:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>数据</title>
   <link href=‘http://cdn.webfont.youziku.com/webfonts/nomal/16398/46055/58f85f0bf629d8113ccf311b.css‘ rel=‘stylesheet‘ type=‘text/css‘ />
    <style>
        div {
            width: 800px;
            height: 800px;
            writing-mode: tb-rl;
            font-size: 24px;
          float: right

        }
    </style>

</head>
<body class="cssa2f5c8c5e400e">

    <div>
        壬戌之秋, 七月既望, 苏子与客泛舟游于赤壁之下。 清风徐来, 水波不兴。 举酒属客, 诵明月之诗, 歌窈窕之章。 少焉, 月出于东山之上, 徘徊于斗牛之间。 白露横江, 水光接天。 纵一苇之所如, 凌万顷之茫然。 浩浩乎如冯虚御风, 而不知其所止; 飘飘乎如遗世独立, 羽化而登仙。
        于是饮酒乐甚, 扣舷而歌之。 歌曰: “桂棹兮兰桨, 击空明兮溯流光。 渺渺兮于怀, 望美人兮天一方。” 客有吹洞萧者, 倚歌而和之, 其声呜呜然: 如怨如慕, 如泣如诉; 余音袅袅, 不绝如缕; 舞幽壑之潜蛟, 泣孤舟之嫠妇。
        苏子愀然, 正襟危坐, 而问客曰: “何为其然也?” 客曰: “月明星稀, 乌鹊南飞, 此非曹孟德之诗乎? 西望夏口, 东望武昌。 山川相缪, 郁乎苍苍; 此非孟德之困于周郎者乎? 方其破荆州, 下江陵, 顺流而东也, 舳舻千里, 旌旗蔽空, 酾酒临江, 横槊赋诗; 固一世之雄也, 而今安在哉? 况吾与子, 渔樵于江渚之上, 侣鱼虾而友糜鹿, 驾一叶之扁舟, 举匏樽以相属; 寄蜉蝣与天地, 渺沧海之一粟。 哀吾生之须臾, 羡长江之无穷; 挟飞仙以遨游, 抱明月而长终; 知不可乎骤得, 托遗响于悲风。”
        苏子曰: “客亦知夫水与月乎? 逝者如斯, 而未尝往也; 盈虚者如彼, 而卒莫消长也。 盖将自其变者而观之, 而天地曾不能一瞬; 自其不变者而观之, 则物于我皆无尽也。 而又何羡乎? 且夫天地之间, 物各有主。 苟非吾之所有, 虽一毫而莫取。 惟江上之清风, 与山间之明月, 耳得之而为声, 目遇之而成色。 取之无禁, 用之不竭。 是造物者之无尽藏也, 而吾与子之所共适。”
        客喜而笑, 洗盏更酌, 肴核既尽, 杯盘狼藉。 相与枕藉乎舟中, 不知东方之既白。
    </div>

</body>
</html>

效果:

时间: 2024-11-10 11:36:32

Html 文字排版的相关文章

文字排版需要遵循的规律

文字排版必须遵循的规律 人类在阅读文字时的基本规则是从上到下,从左到右的.文案的排版应尽量遵从这一个规则,除特殊版式之外,尽可能减少参差不齐或者右对齐排列,大部分情况下,还是使用左对齐或居中对齐最为合适. 在设计中,可能都会遇到使用一些文字的特性,或者带有一点倾斜等,都是遵循左对齐原则. 这样不仅美观而且使阅读不会形成混乱. 当沿着某一版块或素材的左侧排列文字的时候我们使用右对齐会比左对齐和居中对齐要有更好的表达效果. 使用居中对齐让版面整体有自由感. 技巧2:明确 主.副标题与描述 文字的排版

Android - 实现两端对齐的文字排版

要实现Android两端对齐的文字排版效果,我们当然可以继承原有的TextView来实现,但一个更简单的方式就是使用WebView,利用HTML样式来实现. 首先定义一个String常量,我们可以将它视为一个HTML模板: private static final String WEBVIEW_CONTENT = "<html><head></head><body style=\"text-align:justify;margin:0;\&qu

[转] iOS文字排版(CoreText)那些事儿

文章转载自 http://www.cocoachina.com/applenews/devnews/2014/0521/8504.html iOS文字排版(CoreText)那些事儿 转自阿毛的蛋疼地 第一次比较深入接触iOS文字排版相关内容是在12年底,实现某IM项目聊天内容的图文混排,照着nimbus的AttributedLabel和Raywenderlish上的这篇文章<Core Text Tutorial for iOS: Making a Magazine App>改出了一个比较适用

文字排版--字体、字号、颜色、粗体、斜体、下划线、删除线

我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:"宋体";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体.(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体.)现在一般网页喜欢设置"微软雅黑",如下代码: body{font-family:"Micr

iOS文字排版(CoreText)

和我们平时说的字体不同,计算机意义上的字体表示的是同一大小,同一样式(Style)字形的集合.从这个意义上来说,当我们为文字设置粗体,斜体时其实是使用了另外一种字体(下划线不算). iOSCoreText 转自阿毛的蛋疼地 第一次比较深入接触iOS文字排版相关内容是在12年底,实现某IM项目聊天内容的图文混排,照着nimbus的AttributedLabel和Raywenderlish上的这篇文章<Core Text Tutorial for iOS: Making a Magazine App

10-4路径文字排版 这一节完全不明白

http://www.missyuan.com/thread-350833-1-1.html 文字还可以依照路径来排列,在开放路径上可形成类似行式文本的效果,如下左图中呈波浪形排列的3个网址文字 然后选择自定形状工具,注意绘图方式应为第一种(形状图层) 直接选择工具[A/SHIFT_A] 注意移动要按住CTRL键才能进行 而且 蒙版图必须可见 称之为起点光标和终点光标 用A然后拖动 1:进行路径文字排版前,必须要有一条路径(可称为基础路径)处于显示状态.可以通过手动绘制路径,或利用现有图层中的矢

iOS开发 Coretext(文字排版)的基本用法

oreText 框架中最常用的几个类: CTFont CTFontCollection CTFontDescriptor CTFrame CTFramesetter CTGlyphInfo CTLine CTParagraphStyle CTRun CTTextTab CTTypesetter 先来了解一下该框架的整体视窗组合图: CTFrame 作为一个整体的画布(Canvas),其中由行(CTLine)组成,而每行可以分为一个或多个小方块(CTRun). 注意:你不需要自己创建CTRun,C

文字排版效果

text-show:2px 2px 5px gray;   文字阴影显示 letter-spacing:1px;  文字间距1px; padding:10px;    内边距10px; -webkit-columns:atuo 3;     文字分为三排 -webkit-column-gap:30px;   间空隙30px; -webkit-column-rule:1px dashed gray;     排间加虚线 border-radius:10px;   边框添加圆弧为css3新技术 wi

ios文字排版

文字排版的基础概念 字体(Font):和我们平时说的字体不同,计算机意义上的字体表示的是同一大小,同一样式(Style)字形的集合.从这个意义上来说,当我们为文字设置粗体,斜体时其实是使用了另外一种字体(下划线不算).而平时我们所说的字体只是具有相同设计属性的字体集合,即Font Family或typeface. 字符(Character)和字形(Glyphs):排版过程中一个重要的步骤就是从字符到字形的转换,字符表示信息本身,而字形是它的图形表现形式.字符一般就是指某种编码,如Unicode编

网站制作之网页文字排版技巧

一套巧妙的网站布局设计,一些漂亮的颜色搭配,或者一个合适的网页文字排版,都在给每一位浏览网页的人留下一份美好的印象和舒适的感官享受,在商业化气息越来越浓重的今天,提高一个网站的个性及审美体验也不失为一种网站建设及推广的方法. 很多中小企业在网站建设初期,不太注重网站的运营及打理,网站发布的文章或者内容未进行合理的布局及排版,造成文字大小不合适,颜色不搭配,行高过大过小等等直接影响浏览体验的问题,针对这些问题,巩义网站建设公司提出以下一些建议: 一.文字的字体及大小        经常上网的朋友,