CSS實現不同的列印和螢幕顯示結果

通常的web頁面中，我們要求列印結果和顯示結果一樣，但在一些報表或業務系統中，我們可能只需要列印頁面中的一部分內容，例如我只要列印資料，但按鈕和背景不需要列印，這是由業務需求決定的，我們可以想象一下，如果一張列印出來的發票**現乙個按鈕，你會怎麼想，估計要昏過去的，呵呵~~

好了，說完需求，我來說說如何實現，一種方法是為螢幕顯示和列印分別準備乙個css檔案，如下所示：

用於螢幕顯示的css：

用於列印的css：

注意，這兩個css是放在乙個web頁面裡面的。

還有一種是import方式：

最後一種寫法是可以直接把螢幕顯示樣式和列印樣式寫在乙個css檔案中：

} @media print裡面的內容只對列印出來的內容有效，之外的內容就是螢幕顯示的樣式。

CSS實現不同的列印和螢幕顯示結果

通常的web頁面中，我們要求列印結果和顯示結果一樣，但在一些報表或業務系統中，我們可能只需要列印頁面中的一部分內容，例如我只要列印資料，但按鈕和背景不需要列印，這是由業務需求決定的，我們可以想象一下，如果一張列印出來的發票中出現乙個按鈕，你會怎麼想，估計要昏過去的，呵呵 好了，說完需求，我來說說如何...

CSS實現不同的列印和螢幕顯示結果

來自 通常的web頁面中，我們要求列印結果和顯示結果一樣，但在一些報表或業務系統中，我們可能只需要列印頁面中的一部分內容，例如我只要列印資料，但按鈕和背景不需要列印，這是由業務需求決定的，我們可以想象一下，如果一張列印出來的發票中出現乙個按鈕，你會怎麼想，估計要昏過去的，呵呵 好了，說完需求，我來說...

用 CSS 實現列印顯示底色

1.把背景顏色寫成行內樣式，如下圖所示 但是發現這樣子寫了，並不行。可能還需要設定其他的，如果有知道的親，望不吝賜教 2.在列印的時候使用者自己設定，如下圖 該方法雖然奏效，但是出於使用者體驗的角度考慮，不太現實。3.直接用css 控制，此法有效，簡單 直接上 media print media p...