div 設定a4大小 設計適用於列印的CSS樣式

2021-10-13 14:10:56 字數 1047 閱讀 7151

大多數web設計師對列印控制還不是很熟悉,他們往往更迷戀畫素,而不是印表機。在現實世界中,很多人依賴從**上列印網頁來參考: 在這個數字時代, 在一些特殊的場合,很多人手中還會拿著紙張。web開發人員可以採取一些措施來彌補印表機和液晶屏之間的差距。

為印表機而不是螢幕設計的樣式

css code複製內容到剪貼簿

/* 樣式將只應用於列印 */

@mediaprint

page邊距模型  page-margin boxes

在進一步討論之前,我們應該了解的頁面的盒子模型,因為它的行為跟如何在螢幕上的工作有些不同。

頁面模型定義了頁面區域,然後劃分了16個周邊緣盒。可以控制頁區域的大小和頁區域的邊緣和頁面本身的端部之間的餘量的尺寸。

左右頁邊距

css code複製內容到剪貼簿

@page:left{

margin-left: 30cm;

@page:rightright{

margin-left: 4cm;

下面的css將在底部左邊顯示標題,在右下角的網頁計數器,並在右上角顯示一章的標題。

css code複製內容到剪貼簿

@page:rightright{

@bottombottom-left{

margin:10pt030pt0;

border-top: .25ptsolid#666;

content:"our cats";

font-size:9pt;

color:#333;

@bottombottom-rightright{

margin:10pt030pt0;

border-top: .25ptsolid#666;

content:counter(page);

font-size:9pt;

@top-rightright{

content:  string(doctitle);

margin:30pt010pt0;

font-size:9pt;

color:#333;

顯示效果如下:

div 設定a4大小 CSS設定A4紙張大小

我需要在網路中模擬a4紙,並允許列印此頁,因為它在瀏覽器 特別是chrome 上顯示。我將元素大小設定為21cm x 29.7cm,但是當我傳送列印 或列印預覽 時,它會裁剪頁面。body margin 0 padding 0 background color fafafa font 12pt ta...

div 設定a4大小 CSS設定A4紙張尺寸

css設定a4紙張尺寸 我需要在網路上模擬a4紙,並允許列印此頁面,因為它在瀏覽器上顯示 特別是chrome 我將元素大小設定為21cm x 29.7cm,但是當我傳送到列印 或列印預覽 時,它會剪下我的頁面。看到這個例項!body page subpage page media print pag...

div 設定a4大小 列印A4網頁大小設定

在公制長度單位與螢幕解析度進行換算時,必須用到乙個dpi dot per inch 指標。經過我仔細的測試,發現了網頁列印中,預設採用的是96dpi,並非傳聞的72dpi 在公制長度單位與螢幕解析度進行換算時,必須用到乙個dpi dot per inch 指標。經過我仔細的測試,發現了網頁列印中,預...