首頁 > web前端 > css教學 > 純CSS3製作可編輯的微軟Word樣式文檔

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

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

簡要教學

這是一款使用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中文網(m.sbmmt.com) !

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板