發表者討論內容

冷日
(冷日) 發表時間：2008/3/10 14:31

Webmaster

註冊日: 2008/2/19
來自:
發表數: 15773

[佈景主題|CSS] 自訂獨特的列印專用樣式

很多時候，
讀者們經常會把一些網路上看到的好文章，
或是具有參考價值的內容給列印下來，
這時候我們可以自訂一個專門給列印用的佈景主題，
除了讓列印的人驚喜外，還更加深對您網誌的印象呢!!
而且，還能加上只有在列印才會出現的文字喔!! 甚至將 sidemenu,comments 等都隱藏不被列印出來....
快快自訂一個列印專用的獨特佈景主題吧!
　
首先，
在您的佈景主題樣式庫中，新增一個自訂的樣式表，
在這個樣式表中在加入列印專門的樣式，
可以參照先前的文章：新增一個常用的樣式給你的網誌...!!
　
以這裡為例，新增的樣式語法為:

/* -----------------------------------
For Print Style
-----------------------------------*/
p.forPrinted {display:none}
@media print {
p.forPrinted {
	display:block;
	font:9pt/140% verdana;
	letter-spacing:2px;
	border:1px solid #999999;
	padding:9pt;
	margin:9pt 4px;
	width:100%;
}
#siderMenu, #comments,#commentEditor,
#toolsbar,#copyright,#navlinktop,#navlinkbottom {display:none}
}

　
接下來我們在文章編輯的下方接著，寫下只有列印時才要出現的文字訊息:

如果你對本文有興趣，請連上網站：nicetypo© Professional Official website

網址：http://www.nicetypo.com
　
接下來說明一下: 新增的列印樣式中，第一行

p.forPrinted{display:none}

指的是讓 p.forPrinted 標籤內的文字 display:none ，也就是不顯示於網頁上!!
接著 @media print 內的 p.forPrinted 則是唯有被列印時要顯示的樣式..
另外~##siderMenu, #comments 等ID...也可以看到是 display:none，也是說...列印時，將這些 ID 下的內容統統隱藏不顯示..
　
p.forPrinted 是可自訂的，但 @media print 是不可以自訂的!!

原出處 : http://rss.nicetypo.com/nt/nicetypo.nsf/ContentBypermaLink/EE0B49CE4B464ED048256E450018BE5F

回覆

平面展開

前一個主題 | 下一個主題 | |

| |

討論串

» [佈景主題|CSS] 自訂獨特的列印專用樣式 (冷日
(冷日), 2008/3/10 14:31)

發表新主題

網頁設計 : [佈景主題|CSS] 自訂獨特的列印專用樣式

討論串