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

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

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本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

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

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

《UNIX編程藝術》 姜宏 (作者)

《UNIX編程藝術》主要介紹了Unix系統領域中的設計和開發哲學、思想文化體系、原則與經驗,由公認的Unix編程大師、開源運動領袖人物之一Eric S. Raymond傾力多年寫作而成。包括Unix設計者在內的多位領域專家也為本書貢獻了寶貴的內容?!禪NIX編程藝術》內容涉及社群文化、軟件開發設計與實現,覆蓋面廣、內容深邃,完全展現了作者極其深厚的經驗積累和領域智慧。

更多計算機寶庫...

燃烧吧足球登陆 3d过滤缩水软件 股票如何开户 打好北京麻将技巧 安徽快3开奖结果前天 3d独胆毒胆预测 山西十一选五 河北20选5走势图2结果元网 意甲历年冠军及积分榜 上海申城棋牌? 欢乐真人麻将旧版 股票指数怎么买 南昌沐足会所经理招聘信息 黑龙江36选7开奖规则 竞彩足彩比分直播 北京多乐彩合法吗 街机千炮捕鱼3.0版本