Erstellen Sie bearbeitbare Dokumente im Microsoft Word-Stil mit reinem CSS3-CSS-Tutorial-php.cn

Erstellen Sie bearbeitbare Dokumente im Microsoft Word-Stil mit reinem CSS3

黄舟

Freigeben： 2017-01-18 13:50:26

Original

2731 Leute haben es durchsucht

Kurzes Tutorial

Dies ist ein bearbeitbares Dokument im Microsoft Word-Stil, das mit HTML und CSS3 erstellt wurde. Dieser Spezialeffekt bietet eine Reihe vordefinierter Stile zum Generieren von Dokumenteffekten im Word-Stil unterschiedlicher Größe auf WEB-Seiten. Zu den bereitgestellten Stilen gehören:

sheets-of-paper-a4.css: A4-Papier (21 cm × 29,7 cm)
sheets- of-paper-a3.css：A3-Papier (29,7 cm × 42 cm)
sheets-of-paper-usletter.css：US-Letter (21,6 cm × 27,9 cm)
sheets-of-paper-uslegal.css：US legal (21,6 cm × 35,6 cm)
sheets-of-paper-ustabloid.css： US-Tabloid (27,9 cm × 43,2 cm)

Verwendung

Fügen Sie die Stildatei in der von Ihnen benötigten Größe in die Seite ein. Wenn Sie A4-Papier verwenden, fügen Sie Blätter ein -paper-a4.css-Datei.

<link rel="stylesheet" type="text/css" href="css/sheets-of-paper-a4.css">

Nach dem Login kopieren

HTML-Struktur

Fügen Sie eine Dokumentklasse zum -Element hinzu, verwenden Sie dann

als Wrapping-Element und legen Sie das contenteditable="true"-Attribut dafür fest , sodass der darin enthaltene Inhalt bearbeitet werden kann.

<body class="document">
  <div class="page" contenteditable="true">
    ...
  </div>
</body>

Nach dem Login kopieren

Das Folgende ist ein Screenshot der Benutzeroberfläche des Dokumenteffekts im Word-Stil:

Erstellen Sie bearbeitbare Dokumente im Microsoft Word-Stil mit reinem CSS3

Das Obige ist der Inhalt der Erstellung eines bearbeitbaren Microsoft Word Stildokument mit reinem CSS3. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!