コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > 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)!


関連ラベル：
CSS3，Word
ソース：php.cn
前の記事：純粋な CSS3 ブラインド スタイルの切り替えカルーセル効果 次の記事：7 つの純粋な CSS3 検索ボックス UI デザイン効果
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
テーブルの列をモバイルビューにスタックすることが私の目標です 列が 5 つあり、それをコード化するのが最も簡単な方法なので、テーブルとして作成しています。モバイルビューに重ねて表示したい。どうすればいいでしょうか？私の形式は次のとおりです: ...
から 2024-04-02 20:50:17
0
1
274
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート