ホームページ > ウェブフロントエンド > CSSチュートリアル > 純粋な CSS3 を使用して編集可能な Microsoft Word スタイルのドキュメントを作成する

純粋な CSS3 を使用して編集可能な Microsoft Word スタイルのドキュメントを作成する

黄舟
リリース: 2017-01-18 13:50:26
オリジナル
2739 人が閲覧しました

簡単なチュートリアル

これは、HTML と CSS3 を使用して作成された編集可能な Microsoft Word スタイルのドキュメントです。この特殊効果は、Web ページ上でさまざまなサイズの Word スタイルのドキュメント効果を生成するための、事前定義されたスタイルのセットを提供します。提供されるスタイルは次のとおりです:

  • sheets-of-paper-a4.css: A4 用紙 (21cm × 29.7cm)

  • sheets-of-paper-a3.css: A3 用紙 (29.7cm × 42cm)

  • sheets-of-paper-usletter.css:米国レター(21.6cm × 27.9cm)

  • sheets-of-paper-uslegal.css:米国リーガル(21.6cm × 35.6cm)

  • Sheets-of-paper-ustabloid.css: 米国タブロイド紙 (27.9cm × 43.2cm)

使い方

必要なサイズのスタイルファイルをページ内に導入します。A4用紙を使用する場合は、sheets-ofを導入します-紙 -a4.css ファイル。

<link rel="stylesheet" type="text/css" href="css/sheets-of-paper-a4.css">
ログイン後にコピー

HTML 構造

要素にドキュメント クラスを追加し、

をラッピング要素として使用し、その中のコンテンツを編集可能にするために contenteditable="true" 属性を設定します。

<body class="document">
  <div class="page" contenteditable="true">
    ...
  </div>
</body>
ログイン後にコピー

以下は、Word スタイルのドキュメント効果のインターフェイスのスクリーンショットです:

純粋な CSS3 を使用して編集可能な Microsoft Word スタイルのドキュメントを作成する

上記は、編集可能な Microsoft Word スタイルのドキュメントを作成するための純粋な CSS3 のコンテンツです。その他の関連コンテンツについては、次の内容に注意してください。 PHP 中国語 Web サイト (m.sbmmt.com)!


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート