2017-4-3 09:05| 作者: antzone
關(guān)于css控制打印更多內(nèi)容可以參閱css控制打印內(nèi)容的樣式一章節(jié)。
使用@page規(guī)則可以對(duì)打印進(jìn)行更多的設(shè)置同木，比如指定頁(yè)面的尺寸。頁(yè)邊 距,頁(yè)眉頁(yè)腳等汞舱，以求達(dá)到更好的效果唐瀑。
下面做一下簡(jiǎn)單介紹。
一.紙張大小設(shè)置:
@page {
size: 5.5in 8.5in;
}
設(shè)置紙張大小,5.5英寸寬,8.5英寸高噪沙。
<pre style="overflow-wrap: break-word; margin: 0px; padding: 0px;">
@page {
size: A4;
}
通過(guò)別名控制紙張大小,如"A4"或“l(fā)egal.”
@page {
size: A4 landscape;
}
可以控制打印方向堕担，portrait： 縱向打印地, landscape: 橫向。
二.page模型:
在分頁(yè)媒體格式模型中曲聂，文檔被轉(zhuǎn)移到一個(gè)或多個(gè)頁(yè)面框霹购。
該頁(yè)框是映射到一個(gè)矩形平面。
這大致類似于css盒子模型:
特別說(shuō)明:當(dāng)前瀏覽器支持度還不夠朋腋。
@page { width: 50em; }
三.page邊距模型:
在進(jìn)一步討論之前齐疙，我們應(yīng)該了解的頁(yè)面的盒子模型，因?yàn)樗男袨楦绾卧谄聊簧系墓ぷ饔行┎煌裱省ｍ?yè)面模型定義了頁(yè)面區(qū)域贞奋，然后劃分了16個(gè)周邊緣盒∏蠲啵可以控制頁(yè)區(qū)域的大小和頁(yè)區(qū)域的邊緣和頁(yè)面本身的端部之間的余量的尺寸轿塔。
左右頁(yè)邊距：
@page :left {
margin-left: 30cm;
}
@page :right {
margin-left: 4cm;
}
下面的css將在底部左邊顯示標(biāo)題，在右下角的網(wǎng)頁(yè)計(jì)數(shù)器仲墨，并在右上角顯示一章的標(biāo)題勾缭。
@page:right{
@bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "Our Cats";
font-size: 9pt;
color: #333;
}
@bottom-right {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: counter(page);
font-size: 9pt;
}
@top-right {
content: string(doctitle);
margin: 30pt 0 10pt 0;
font-size: 9pt;
color: #333;
}
}
顯示效果如下:
