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:262610Durchsuche

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

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>

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)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Reiner CSS3-Schaltkarusselleffekt im Blind-StilNächster Artikel：Reiner CSS3-Schaltkarusselleffekt im Blind-Stil

In Verbindung stehende Artikel

Mehr sehen