版面示例

本站版式

本站字體、顏色一覽：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

:root{
  --bg: #fffae8;
  --bggray:#eeeeee;
  --shallowgray: #b6b5b5;
  --gray: #787878;
  /* --black: #2b2b2b; */
  --black: black;
  --shallowblack: rgb(37, 37, 37);
  --yellow: #ffda56;
  --bgpink:#feefe6;
  --red: #f27144;
  --darkgreen: #004726;
  --darkblue: #002d81;
  --blue:#2fa0ff;
  --shallowblue:#a6d7ffee;
  --bgblue:#e1f3ff;
  --white: white;
  --serif:"Adobe Garamond Pro",Garamond,"Adobe Caslon Pro",Caslon,"Minion Pro",Minion,"Adobe Gurmukhi","Palatino Linotype","Adobe Garamond Pro",Garamond,"Adobe Caslon Pro",Caslon,"Minion Pro",Minion,"Adobe Gurmukhi","Palatino Linotype","Noto Serif CJK KR","Source Han Serif K","Noto Serif CJK SC","Hiragino Mincho ProN","Hiragino Mincho","Yu Mincho","Hana Mincho","Ms Mincho";
  --codeserif:"Source Code Pro",Menlo, Inconsolata,"Courier New","Anonymous Pro",monospace,"Noto Serif CJK KR","Source Han Serif K","Noto Serif CJK SC","Hiragino Mincho ProN","Hiragino Mincho","Yu Mincho","Hana Mincho","Ms Mincho";
  --sans:Verdana,Trebuchet, muli, avenir, "helvetica neue", helvetica, ubuntu, roboto, noto,arial,"Noto Sans CJK Kr","Noto Sans CJK SC", PingFang,"PingFang SC",Sans-serif;
  --codesans:"Source Code Pro",Menlo, Inconsolata,"Courier New","Anonymous Pro",monospace, "Noto Sans CJK Kr",NotoSansCJKKr,"Noto Sans CJK SC",NotoSansCJKSC, PingFang,PingFangSC,Sans-serif;
  --kai:"Adobe Garamond Pro",Garamond,"Adobe Caslon Pro",Caslon,"Minion Pro",Minion,"Adobe Gurmukhi","Times New Roman","方正新楷体_GB18030",FZNewKai_GB18030-Z03,STKaiti,Kai,"楷体",Kaiti,"Kaiti TC";
}

直排宗旨：在儘量模仿古籍排版的基礎上，結合現代排版技術。

1. 【字體】字體是我㝡重視的。橫排都用黑體。直排正文是朙體，首選韓文字體 Source Han Serif K思源宋體韓文版，其次爲日文字體 Hiragino Mincho ProN，這箇字體是蘋果系統自帶的，其次是 Yu Mincho。不過一般 Windows 電腦只有默認的宋體？所以我只設置了這些，Windows 直接用黑體了
2. 【行距】正文行距以容納一箇字爲準。【段間距】默認爲兩倍行距，這樣一般沒啥問題，但如果有一段只有一行的話，區分不太明顯，因此我加了一些
3. 【縮進】引文縮進 2 箇正文的距離
4. 【引文】爲保證可讀性，採用和正文一樣的字體。字號和行距也沒有縮小。用淡粉色作為提示，這樣放到整體中不會打眼，讀到的時候又能清楚知道這是引文。【強調】紅底白字
5. 【注釋】字號 .8em，前後間距 .25em，灰色。這樣放到正文中，不想讀的話很容易就跳過，想讀的話也很容易讀到
6. 【下畫線】下畫直線將默認的 text-decoration: underline 改成 boder-left: .1em，再調一下 padding-left，這樣就十分清爽了。以前書名號用的波浪線，但為了省點流量，改成虛線。直線是灰色，虛線是棕色，更好區分。下畫線上下各加了 margin: .1em，這樣就能將兩箇相連的下畫線分割開來，單獨用時又能不顯痕跡。
7. 【字距】二級標題增加了字距
8. 【標題】各級標題字號依次爲 h2: 1.8em, h3: 1.5em, h4: 1.2em, h5: 1em, h6: 1em
9. 用直排可以將正文鋪滿整箇屏幕，還有一箇好處是可以將正文板塊變成組合式的，象雜誌一般。

正文正文正文正文正文正文正文正文正文正文正文正文正文正文

二級標題二級標題二級標題二級標題二級標題二級標題

正文正文，正文 123 正文。正文正文、正文 567 正文；強調 文」加點強調正文 Apple 正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文 coding 正文正文正文

正文正文正文中的引文正文中的斜體、正文 567 正文；正文引文正文「正文正文」正文 Apple 正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文 coding 正文正文正文

級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題

正文正文，正文正文。正文 超鏈接 正文；正文正文「正文正文」正文正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文正文正文正文

引文引文，引文引文。引文引文、引文引文；引文引文「引文引文」引文引文『引文引文』引文引文……引文引文——引文引文·引文引文：引文引文引文引文

引文引文，引文引文。引文引文、引文引文；引文直線引文「引文引文」引文引文『引文引文』引文引文……引文引文——引文引文·引文引文：直線引文波浪線引文

級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題

正文正文，正文正文。正文正文、正文正文；正文正文「正文正文」正文正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文正文正文正文

四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題

正文正文，正文正文。正文波浪線波浪線波浪線正文、正文正文；正文正文「正文正文」正文正文直線直線直線『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文正文正文正文

四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題

正文

四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題

正文

五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題

正文正文，正文正文。正文正文、正文正文正文正文正文注釋波浪線注釋直線注釋注釋；正文正文「正文正文」正文正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文注釋 123 注 Apple 釋

五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題

級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題

四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題

五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題

正文正文，正文正文。正文正文、正文正文正文正文正文注釋波浪線注釋直線注釋注釋；正文正文「正文正文」正文正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文注釋 123 注 Apple 釋

五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題五級標題

標題二級標題

正文正文，正文 123 正文。正文正文、正文 567 正文；強調 文」加點強調正文 Apple 正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文 coding 正文正文正文

正文正文正文中的引文正文中的斜體、正文 567 正文；正文引文正文「正文正文」正文 Apple 正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文 coding 正文正文正文

級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題

正文正文，正文正文。正文 超鏈接 正文；正文正文「正文正文」正文正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文正文正文正文

引文引文，引文引文。引文引文、引文引文；引文引文「引文引文」引文引文『引文引文』引文引文……引文引文——引文引文·引文引文：引文引文引文引文

引文引文，引文引文。引文引文、引文引文；引文直線引文「引文引文」引文引文『引文引文』引文引文……引文引文——引文引文·引文引文：直線引文波浪線引文

級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題三級標題

正文正文，正文正文。正文正文、正文正文；正文正文「正文正文」正文正文『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文正文正文正文

四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題

正文正文，正文正文。正文波浪線波浪線波浪線正文、正文正文；正文正文「正文正文」正文正文直線直線直線『正文正文』正文正文……正文正文——正文正文·正文正文：正文正文正文正文正文

四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題四級標題

正

六級標題六級標題六級標題六級標題六級標題六級標題六級標題六級標題六級標題六級標題六級標題六級標題六級標題六級標題

正文正文，正文正文。正文正文、正文正文