做一個所見即所得的CSS效果

將style設置成contenteditable會有好事情出現
服務器君一共花費了65.118 ms進行了4次數據庫查詢,努力地為您提供了這個頁面。
試試閱讀模式?希望聽取您的建議

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

效果演示

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

附上我研究的代碼:

<!DOCTYPE HTML>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title></title>
<style type="text/css">
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;
}
</style>
</head>
<body>
	<style contenteditable>body {background: green;}</style>
</body>
</html> 

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

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

<style type="text/css">
.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;
}
</style>
<div class="test_div"><style contenteditable>.test_div {background: green;}</style></div>

Have fun.

本文地址:http://www.snpmgr.live/librarys/veda/detail/1308,歡迎訪問原出處。

不打個分嗎?

轉載隨意,但請帶上本文地址:

http://www.snpmgr.live/librarys/veda/detail/1308

如果你認為這篇文章值得更多人閱讀,歡迎使用下面的分享功能。
小提示:您可以按快捷鍵 Ctrl + D,或點此 加入收藏

大家都在看

閱讀一百本計算機著作吧,少年

很多人覺得自己技術進步很慢,學習效率低,我覺得一個重要原因是看的書少了。多少是多呢?起碼得看3、4、5、6米吧。給個具體的數量,那就100本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

奉勸自學者:構建特定領域的知識結構體系的路徑中再也沒有比學習該專業的專業課程更好的了。如果我的知識結構體系足以囊括面試官的大部分甚至吞并他的知識結構體系的話,讀到他言語中的一個詞我們就已經知道他要表達什么,我們可以讓他坐“上位”畢竟他是面試官,但是在知識結構體系以及心理上我們就居高臨下。

所以,閱讀一百本計算機著作吧,少年!

《大話數據結構》 程杰 (作者)

《大話數據結構》主要內容包含:數據結構介紹、算法推導大O階的方法;順序結構與鏈式結構差異、棧與隊列的應用;串的樸素模式匹配、KMP模式匹配算法;二叉樹前中后序遍歷、赫夫曼樹及應用;圖的深度、廣度遍歷;最小生成樹兩種算法、最短路徑兩種算法;拓撲排序與關鍵路徑算法;折半查找、插值查找、斐波那契查找等靜態查找;稠密索引、分塊索引、倒排索引等索引技術;二叉排序樹、平衡二叉樹等動態查找;B樹、B+樹技術,散列表技術;冒泡、選擇、插入等簡單排序;希爾、堆、歸并、快速等改進排序。

更多計算機寶庫...

燃烧吧足球登陆