简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

純CSS3製作可編輯的微軟Word樣式文檔

黄舟
發布： 2017-01-18 13:50:26
原創
2675 人瀏覽過

簡要教學

這是一款使用HTML和CSS3製作的可編輯的微軟Word樣式文件。此特效提供一組預先定義的樣式，用於在WEB頁面中產生各種尺寸的Word樣式的文件效果。它提供的樣式包括：

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

  • sheets-of-paper-a3.css：A3 × 紙(29.7cm 24cm)

  • sheets-of-paper-usletter.css：US letter(21.6cm × 27.9cm)

  • sheets-of-paper-uslegal.css：US lele

    • sheets-of-paper-uslegal.css：US lele ×(25.6cmlesheets) sheets-of-paper-ustabloid.css：US tabloid(27.9cm × 43.2cm)

    • 使用方法

在頁面中引入你需要的尺寸的樣式文件，如使用A4紙則引入sheets-of-paperets-of-paperets -a4.css文件。 

<link rel="stylesheet" type="text/css" href="css/sheets-of-paper-a4.css">
登入後複製

HTML結構

在元素上加入document class，然後使用

作為包裹元素，並為它設定contenteditable="true"屬性，使它裡面的內容可以進行編輯。 

<body class="document">
  <div class="page" contenteditable="true">
    ...
  </div>
</body>
登入後複製

下面是該Word樣式文件效果的介面截圖：

純CSS3製作可編輯的微軟Word樣式文檔以上就是純CSS3製作可編輯的微軟Word樣式文件的內容，更多相關內容請關注PHP中文網（www.php.cn） ！

相關標籤：
CSS3，Word
來源：php.cn
上一篇：純CSS3百葉窗式切換輪播圖特效 下一篇：7種純CSS3搜尋框UI設計效果
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
讓表格列在移動視圖上堆疊是我的目標 我有5列，我將它們作為表格，因為這是我編碼的最簡單方法。我想讓它們堆疊在移動視圖上。我該如何去做呢？我的格式是：#container{display:table;width:100...
來自於 2024-04-02 20:50:17
0
1
274
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！