4

仮説として、HTML と CSS のみを使用して本を書きたいとしましょう。ページのヘッダーとフッターを定義するにはどうすればよいですか (フッターにページ番号を含めます)。また、改ページと余白がブラウザーに表示されるようにするにはどうすればよいでしょうか (プレビュー モードのように)。

誰かにコードを書いてもらうように頼んでいるように聞こえるかもしれませんが、実際には、このようなことを行うためのリソースへの指示が必要なだけです。私は、このようなことをどのように開始するかについて、完全に立ち往生しています。

ブラウザに表示したいものを説明する。PDFビューアのように各ページの小さなバージョンを表示できるようにしたいのですが、基本的にテキストオーバーフローにより改ページが作成されます。

サムネイル

@media print を調べましたが、ヘッダーとフッターを作成するためのフックがありません。

そして、これを機能させることができません（w3.orgから）：

title { position: running(header) }
@page { @top-center {
  content: element(header) }
}

Boom!のコードを見てきました。、印刷には適していますが、ブラウザには同じように表示されません。

それで...これの良い出発点を探すことができる/すべき人はいますか？

4

3 に答える 3

3

これが私の解決策でした：

<div id='document'>
    <div class='page'>
        <div class='header'></div>
        <div class='footer'></div>
        <div class='content'></div>
    </div>
</div>

すべてが入りました<div id='document'>。.page、 、および の.headerそれぞれ.footerについて、.contentページに適した高さと幅がありました。

あとはJavaScriptを使って、外側にはみ出した部分を全て切り出しましたdiv.content。次に、クローンdiv.pageを作成し、新しいページのヘッダー内のページ番号を更新し<div>、新しいページのコンテンツを埋めました<div>。

これを 100 ページほどになるまで繰り返し、最後のページのコンテンツから何もはみ出さないようにしました<div>。

于 2012-07-04T13:47:32.127 に答える
1

純粋な HTML を使用していて、コード ビハインドがないことを前提としています。

コードの背後にある場合は、別の話だからです。

を持つメイン div を定義しclass="page"ます。その中で、ヘッダー、コンテンツ、フッターの 3 つの div を定義します。

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Give margin as per your requirement.*/
}

.header {
   display: block;
   height: 50px;
}


.content {
   display: block:
   height: 700px;
}

.footer {
   display: block;
   height: 50px;
}

要件に応じてスタイルを追加します。

media type ="print" で別のスタイル シートを作成する

ページに次のスタイルを追加します。

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Give margin as per your requirement.*/
    /* this will print the page in new paper*/
   page-break-after: always;
}

1ページのHTMLは次のようになります

<div class="page">
  <div class="header">HEADER CONTENT</div>
  <div class="content"> MAIN PAGE'S CONTENT</div>
  <div class="footer"></div>
</div>

必要なページ数ごとに上記のコードを繰り返します。

この目的でテーブル レイアウトを使用することもできます。

コード ビハインドを使用すると、コンテンツを動的に生成できます。

お役に立てれば。

于 2012-07-04T13:48:43.290 に答える
0

純粋な HTML と CSS で行うこともできますが、新しいページを開始するたびに、ほとんど同じようにコード ブロックを繰り返すのは非常にイライラするため、絶対にお勧めできません。左パネルのような PDF の場合は、iframe を使用できます。詳細はこちら

基本的に、本のすべてのページに .htm ページを作成し、リンクで厳密にリンクします。終了したら、作成したすべてのページのスクリーンショットを撮り、サムネイルを保存し、別の html ページを作成します。最終的には（私のリンクのチュートリアルが示すように）本の他のすべてのページに含まれるパネルになります。

アップデート

改ページに関しては、ここに示すように、同じクラスでページとしてスタイル設定された div-s を作成できます。

于 2012-07-04T13:38:11.710 に答える