Heim > Artikel > Web-Frontend > Erstellen Sie bearbeitbare Dokumente im Microsoft Word-Stil mit reinem CSS3
Erstellen Sie bearbeitbare Dokumente im Microsoft Word-Stil mit reinem CSS3
- 黄舟Original
- 2017-01-18 13:50:262697Durchsuche
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">
HTML-Struktur
Fügen Sie eine Dokumentklasse zum
-Element hinzu, verwenden Sie dann<body class="document">
<div class="page" contenteditable="true">
...
</div>
</body>Das Folgende ist ein Screenshot der Benutzeroberfläche des Dokumenteffekts im Word-Stil:
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)!