style 也是標簽(在非ie內核的瀏覽器中支持)，我們將style設置成 contenteditable的時候，那么那的內容就可以編輯了。仔細的體驗下，如果我們將背景修改成紅色的。那么只要書寫完，立馬呈現。哇靠，這很方便我們以后寫那種動態的編輯器效果呢，等有時間的話，我再試試。

效果演示

提示：你可以隨意改變.test_div里的CSS代碼，比如把green改成blue，#666什么的。

附上我研究的代碼：

body style {

display: block;

background: #333;

color: white;

font: 13px/1.8 Monaco, Mono-Space;

padding: 20px;

white-space: pre;

margin:0 auto;

width:500px;

height:100px;

}

想了解更多，可以去這里看看。

本文使用的并非body，而是div，相關代碼如下：

.test_div style {

display: block;

background: #333;

color: white;

font: 14px/1.8 Courier New;

padding: 20px;

white-space: pre;

margin:0 auto;

width:250px;

height:100px;

}

Have fun.

總結

以上是生活随笔為你收集整理的所见即所得的html制作,做一个所见即所得的CSS效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。