简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > CSS Tutorial > body text

Create editable Microsoft Word style documents using pure CSS3

黄舟
Release： 2017-01-18 13:50:26
Original
2674 people have browsed it

Brief Tutorial

This is an editable Microsoft Word style document made using HTML and CSS3. This special effect provides a set of predefined styles for generating Word-style document effects of various sizes on WEB pages. The styles it provides include:

  • sheets-of-paper-a4.css: A4 paper (21cm × 29.7cm)

  • sheets- of-paper-a3.css：A3 paper(29.7cm × 42cm)

  • ##sheets-of-paper-usletter.css：US letter(21.6cm × 27.9cm)

  • sheets-of-paper-uslegal.css：US legal(21.6cm × 35.6cm)

    • ##sheets-of-paper-ustabloid.css： US tabloid (27.9cm × 43.2cm)

    • Usage method

Introduce the style file of the size you need into the page, if using A4 paper, introduce sheets-of -paper-a4.css file. 

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

HTML structure

Add document class on the element, then use

as the wrapping element, and set the contenteditable="true" attribute for it to make it inside The content can be edited. 

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

The following is a screenshot of the interface of the Word style document effect:

Create editable Microsoft Word style documents using pure CSS3The above is the content of pure CSS3 to create an editable Microsoft Word style document, more For related content, please pay attention to the PHP Chinese website (www.php.cn)!

Related labels：
CSS3，Word
source：php.cn
Previous article：Pure CSS3 blind-style switching carousel effect Next article：7 pure CSS3 search box UI design effects
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Getting table columns to stack on mobile view is my goal I have 5 columns and I'm making them as tables because that's the easiest way for me to co...
From 2024-04-02 20:50:17
0
1
274
Make the page mobile-friendly? I have many web pages and some websites. The thing is, I'm a beginner. I'm using basic htm...
From 2024-04-01 20:42:38
0
1
259
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！