2018年1月9日 星期二

(CSS)諸葛亮出師表


CSS語法回顧
  • 直書:writing-mode: vertical-rl;
  • 分散對齊:text-align: justify;
  • 依字元對齊:margin-top:2em;
  • 抬頭空格:text-indent : 2em;
  • Google的楷體:font-family: 'cwTeXKai', serif;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@import url(//fonts.googleapis.com/earlyaccess/cwtexkai.css);
#chinesetxt { 
writing-mode: vertical-rl; 
font-size: 36px;
font-family: 'cwTeXKai', serif;
text-align: justify;
height:330px;
line-height:40px;
margin-top:1.8em;
margin-left:-0.2em
}
.paragraph{
  text-indent : 1em;
}
body{
background-image: url("https://i.imgur.com/U4WVYju.jpg");
background-repeat: repeat-x;
}
JS利用
  • 捲軸移動至標題:document.documentElement.scrollLeft = document.body.scrollLeft  = document.getElementById("chinesetxt").offsetWidth;

1
2
document.documentElement.scrollLeft=document.body.scrollLeft =
document.getElementById("chinesetxt").offsetWidth;
HTML

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<div id="chinesetxt" lang="zh-Hant">
<div ><b>出師表</b></div>
<div>
臣亮言:
</div>
<div>先帝創業未半,而中道崩殂。今天下三分,益州疲弊,此誠危急存亡之秋也。然侍衛之臣,不懈於內;忠志之士,忘身於外者,蓋追先帝之殊遇,欲報之於陛下也。誠宜開張聖聽,以光先帝遺德,恢弘志士之氣;不宜妄自菲薄,引喻失義,以塞忠諫之路也。宮中府中,俱為一體,陟罰臧否,不宜異同。若有作姦犯科,及為忠善者,宜付有司,論其刑賞,以昭陛下平明之治,不宜篇私,使內外異法也。</div>
<div class="paragraph">
侍中、侍郎郭攸之、費褘、董允等,此皆良實,志慮忠純,是以先帝簡拔以遺陛下。愚以為宮中之事,事無大小,悉以咨之,然後施行,必能裨補闕漏,有所廣益。將軍向寵,性行淑均,曉暢軍事,試用於昔日,先帝稱之曰「能」,是以眾議舉寵為督。愚以為營中之事,悉以咨之,必能使行陣和睦,優劣得所。親賢臣,遠小人,此先漢所以興隆也;親小人,遠賢臣,此後漢所以傾頹也。先帝在時,每與臣論此事,未嘗不歎息痛恨於桓、靈也。侍中、尚書、長史;參軍,此悉貞良死節之臣也,願陛下親之信之,則漢室之隆,可計日而待也。
</div>
<div class="paragraph">
臣本布衣,躬耕於南陽,苟全性命於亂世,不求聞達於諸侯。先帝不以臣卑鄙,猥自枉屈,三顧臣於草廬之中,諮臣以當世之事,由是感激,遂許先帝以驅馳。後值傾覆,受任於敗軍之際,奉命於危難之間,爾來二十有一年矣!先帝知臣謹慎,故臨崩寄臣以大事也。受命以來,夙夜憂勤,恐託付不效,以傷先帝之明。故五月渡瀘,深入不毛。今南方已定,兵甲已足,當獎率三軍,北定中原,庶竭駑鈍,攘除奸凶,興復漢室,還於舊都;此臣所以報先帝而忠陛下之職分也。至於斟酌損益,進盡忠言,則攸之、褘、允之任也。
</div>
<div class="paragraph" >
願陛下託臣以討賊興復之效;不效,則治臣之罪,以告先帝之靈。若無興德之言,則戮允等,以彰其慢。陛下亦宜自課,以諮諏善道,察納雅言,深追先帝遺詔,臣不勝受恩感激。
</div>
<div class="paragraph">
今當遠離,臨表涕泣,不知所云。
</div>
</div>

0 意見: