0

eコマース商品ページに「このページを印刷」を実装しようとしています。トップナビゲーション、フッター、カートに追加ボタンなどの不要なセクションはありません。target.comのように機能させたい http://www.target.com/Avalon-Vitamin-Moisture-Plus-Lotion/dp/B00120ZAYI / ref = sr_1_13？ie = UTF8＆searchView = grid5＆keywords = vitamins＆fromGsearch = true＆sr = 1-13＆qid = 1305580954＆rh =＆searchRank = target104545＆id = Avalon％20Vitamin％20Moisture％20Plus％20Lotion＆node = 1038576 | 1287991011＆searchSize = ％2Ctarget_com_primary_color-bin％2Ctarget_com_size-bin％2Ctarget_com_brand-bin＆frombrowse = 0

印刷しようとすると、重要なコンテンツだけが印刷されます。実装方法がわかりません。製品ページの修正バージョンを作成し、ユーザーに表示せずに印刷する必要がありますか？お知らせ下さい。

4

1 に答える 1

1

ヘッダー、ナビゲーション、フッターなどを非表示にしたカスタムCSSページを設定できるため、ユーザーが[印刷]をクリックすると、Webブラウザーは印刷CSSを確認し、希望どおりに動作します。

この例は次のとおりです。

HTMLで

<link href="/css/main.css" rel="stylesheet" type="text/css">
<link href="/css/print.css" rel="stylesheet" type="text/css" media="print">

属性「メディア」の下で、印刷はそれを印刷するときにのみ使用されます。

main.cssのCSSでは、次のようになります。

header { font-size: 32px; }
nav { font-size: 14px; }
footer { font-size: 10px; text-align: center; }

print.cssのCSSでは、次のようになります...

header { display: none; }
nav { display: none; }
footer { display: none; }

基本的に、使用しているCSSの複製を作成し、displayを設定するだけです。あなたが印刷したくないものに。

于 2011-05-17T02:05:38.540 に答える