亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

設(shè)計適用于打印的CSS樣式

WEB開發(fā)者   發(fā)布時間：2015-07-09 15:44:59   作者：佚名   我要評論
這篇文章主要介紹了設(shè)計適用于打印的CSS樣式,特別適用于生成文件類型的頁面直接打印使用,需要的朋友可以參考下

大多數(shù)Web設(shè)計師對打印控制還不是很熟悉，他們往往更迷戀像素，而不是打印機(jī)。在現(xiàn)實世界中，很多人依賴從網(wǎng)站上打印網(wǎng)頁來參考： 在這個數(shù)字時代, 在一些特殊的場合，很多人手中還會拿著紙張。Web開發(fā)人員可以采取一些措施來彌補(bǔ)打印機(jī)和液晶屏之間的差距。
　　為打印機(jī)而不是屏幕設(shè)計的樣式
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* 樣式將只應(yīng)用于打印 */  
  2. @media print {   
  3.     
  4.     
  5. }  

　　注＊ 也可通單獨(dú)的CSS文件, 設(shè)置link的 media="print" 屬性來指定此樣式專用于打印
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <link type="text/<span style="width: auto; height: auto; float: none;" id="8_nwp"><a style="text-decoration: none;" mpid="8" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=5871c731969a47e&k=css&k0=css&kdi0=0&luki=10&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=7ea46919731c8705&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5933%2Ehtml&urlid=0" id="8_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">css</span></a></span>" rel="<span style="width: auto; height: auto; float: none;" id="9_nwp"><a style="text-decoration: none;" mpid="9" target="_blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app=0&jk=5871c731969a47e&k=style&k0=style&kdi0=0&luki=4&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=7ea46919731c8705&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http%3A%2F%2Fwww%2Eadmin10000%2Ecom%2Fdocument%2F5933%2Ehtml&urlid=0" id="9_nwl"><span style="color:#0000ff;font-size:14px;width:auto;height:auto;float:none;">style</span></a></span>sheet" href="css/print.css" media="print">  

　　為您的網(wǎng)站重塑整個CSS是沒有必要的，整體而言，由打印繼承默認(rèn)樣;僅對不同的需要加以限定。為了節(jié)省打印時的碳粉，大多數(shù)瀏覽器會自動反轉(zhuǎn)顏色。為了達(dá)到最佳效果，應(yīng)使色彩變化明顯：
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /*白紙黑字*/  
  2. @media print {   
  3.    body {   
  4.       color: #000;   
  5.       background: #fff;   
  6.    }   
  7. }  

　　我們不是在創(chuàng)建整個網(wǎng)頁的截圖,只是為了展現(xiàn)一個設(shè)計良好,可讀性強(qiáng)的網(wǎng)站:
 
/*去除背景圖片, 節(jié)約筆黑 */
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. h1 {   
  2.    color: #fff;   
  3.    background: url(banner.jpg);   
  4. }   
  5.     
  6.     
  7. @media print {   
  8.    h1 {   
  9.       color: #000;   
  10.       background: none;   
  11.    }   
  12.     
  13.     
  14.    nav, aside {   
  15.       display: none;   
  16.    }   
  17. }  

　　為了使打印機(jī)更具效率,應(yīng)只顯示主體內(nèi)容,去除頁眉頁腳導(dǎo)航欄 
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media print {   
  2.    h1 {   
  3.       color: #000;   
  4.       background: none;   
  5.    }   
  6.     
  7.     
  8.    nav, aside {   
  9.       display: none;   
  10.    }   
  11.     
  12.     
  13.    body, article {   
  14.       width: 100%;   
  15.       margin: 0;   
  16.       padding: 0;   
  17.    }   
  18.     
  19.     
  20.    @page {   
  21.       margin: 2cm;   
  22.    }   
  23. }   

　　鏈接的處理

　　在打印機(jī)上鏈接是看不到的,應(yīng)對超鏈接進(jìn)行擴(kuò)展
 
/*在超鏈接后面添加帶<http://XXX>的完整地址*/

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @media print {   
  2.    article a {   
  3.       font-weight: bolder;   
  4.       text-decoration: none;   
  5.    }   
  6.     
  7.     
  8.    article a[href^=http]:after {   
  9.       content:" <" attr(href) "> ";   
  10.    }   
  11. }  

　　顯示效果可能是這樣的
201579155328162.png (468×101)

控制打印設(shè)置選項

　　該@page規(guī)則允許您指定頁面的各個方面。例如，你將要指定頁面的尺寸。頁邊 距,頁眉頁腳等都是非常重要的。[很多瀏覽器均己支持]
　　@PAGE規(guī)則紙張大小設(shè)置

　　通過下面這條CSS您可以設(shè)置紙張大小,5.5英寸寬,8.5英寸高.
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @page {   
  2.   size: 5.5in 8.5in;   
  3. }  

　　你還可以通過別名控制紙張大小,如"A4"或“legal.”
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @page {   
  2.   size: A4;   
  3. }  

　　你還可以控制打印方向，　portrait： 縱向打印地,  landscape: 橫向 
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @page {   
  2.   size: A4 landscape;   
  3. }  

　　PAGE模型　The Page Model

　　在分頁媒體格式模型中，文檔被轉(zhuǎn)移到一個或多個頁面框。該頁框是映射到一個矩形平面。這大致類似于css盒子模型。

　　注*　支持瀏覽器較少
201579155351141.png (267×266) 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @page { width: 50em; }   
  2. 　　PAGE邊距模型　 Page-Margin Boxes  

　　在進(jìn)一步討論之前，我們應(yīng)該了解的頁面的盒子模型，因為它的行為跟如何在屏幕上的工作有些不同。

　　頁面模型定義了頁面區(qū)域，然后劃分了16個周邊緣盒?？梢钥刂祈搮^(qū)域的大小和頁區(qū)域的邊緣和頁面本身的端部之間的余量的尺寸。
201579155410022.jpg (1200×893)

左右頁邊距 
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @page :left {   
  2.   margin-left: 30cm;   
  3. }   
  4.     
  5.     
  6. @page :rightright {   
  7.   margin-left: 4cm;   
  8. }  

　　下面的css將在底部左邊顯示標(biāo)題，在右下角的網(wǎng)頁計數(shù)器，并在右上角顯示一章的標(biāo)題。 
 

CSS Code復(fù)制內(nèi)容到剪貼板
  1. @page:rightright{    
  2.   @bottombottom-left {   
  3.     margin: 10pt 0 30pt 0;   
  4.     border-top: .25pt solid #666;   
  5.     content: "Our Cats";   
  6.     font-size: 9pt;   
  7.     color: #333;   
  8.   }   
  9.     
  10.     
  11.   @bottombottom-rightright {    
  12.     margin: 10pt 0 30pt 0;   
  13.     border-top: .25pt solid #666;   
  14.     content: counter(page);   
  15.     font-size: 9pt;   
  16.   }   
  17.     
  18.     
  19.   @top-rightright {   
  20.     content:  string(doctitle);   
  21.     margin: 30pt 0 10pt 0;   
  22.     font-size: 9pt;   
  23.     color: #333;   
  24.   }   
  25. }  

　　顯示效果如下：
201579155443002.jpg (500×773)

相關(guān)文章

  • CSS控制漂亮的網(wǎng)頁打印效果示例代碼

    網(wǎng)頁打印效果的實現(xiàn)并不難，下面為大家介紹下如何通過css控制漂亮的網(wǎng)頁打印效果，感興趣的朋友不要錯過
    2013-10-12

  • 將XHTML CSS頁面轉(zhuǎn)換為打印機(jī)頁面

    在以前，為Web頁面創(chuàng)建一個打印機(jī)友好的版本意味著要設(shè)計一個布局和格式都經(jīng)過修改的單獨(dú)頁面，這樣才能夠在打印的時候獲得令人滿意的效果?，F(xiàn)在，通過使用結(jié)構(gòu)化的XHTML和
    2009-04-02

  • CSS實現(xiàn)強(qiáng)制瀏覽器分頁

    網(wǎng)頁制作Webjx文章簡介：CSS相對比較弱，例如： 自動分頁， 就基本沒啥實際用途。我們通常需要自己在需要的時候，強(qiáng)制瀏覽器分頁. 　雖然webjx.com向大家
    2009-04-02

  • 將XHTML CSS頁面轉(zhuǎn)換為打印機(jī)頁面

    　　在以前，為Web頁面創(chuàng)建一個打印機(jī)友好的版本意味著要設(shè)計一個布局和格式都經(jīng)過修改的單獨(dú)頁面，這樣才能夠在打印的時候獲得令人滿意的效果?，F(xiàn)在，通過使用結(jié)構(gòu)化的XHT
    2008-10-17

  • 詳解CSS3中@media的實際使用

    這篇文章主要介紹了詳解CSS3中@media的實際使用,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-08-04

  • CSS3的media query學(xué)習(xí)攻略

    這篇文章主要介紹了CSS3的media query學(xué)習(xí)攻略,media query的媒體查詢經(jīng)常被用于設(shè)計響應(yīng)式網(wǎng)頁,需要的朋友可以參考下
    2015-07-21

  • 詳解CSS3中Media Queries的相關(guān)使用

    這篇文章主要介紹了詳解CSS3中Media Queries的相關(guān)使用,是CSS3入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-07-17

  • CSS media queries

    最近在做一些頁面打印時的特殊處理接觸到了media queries，想系統(tǒng)學(xué)習(xí)一下，在MOZILLA DEVELOPER NETWORK看到一篇文章講的很不錯，結(jié)合自己的使用總結(jié)一下
    2013-08-29

  • CSS3 Media Queries(響應(yīng)式布局可以讓你定制不同的分辨率和設(shè)備)

    Media Queries這功能是非常強(qiáng)大的，他可以讓你定制不同的分辨率和設(shè)備，并在不改變內(nèi)容的情況下，讓你制作的web頁面在不同的分辨率和設(shè)備下都能顯示正常，并且不會因此而丟
    2013-06-06

  • 徹底弄明白CSS3的Media Queries(跨平臺設(shè)計)

    CSS3的Media Queries 完美解決網(wǎng)站與手機(jī)跨平臺設(shè)計.
    2010-07-27

最新評論