Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

黄舟
Freigeben: 2017-01-18 13:50:26
Original
2691 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 (m.sbmmt.com)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage