做一个所见即所得的CSS效果

将style设置成contenteditable会有好事情出现
服务器君一共花费了169.111 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

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.nowamagic.net/librarys/veda/detail/1308,欢迎访问原出处。

不打个分吗?

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/1308

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《设计模式:可复用面向对象软件的基础》 Erich Gamma (作者), Richard Helm (作者), Ralph Johnson (作者), John Vlissides (作者), 李英军 (译者), 等 (译者)

《设计模式:可复用面向对象软件的基础》是引导读者走出软件设计迷宫的指路明灯,凝聚了软件开发界几十年设计经验的结晶。四位顶尖的面向对象领域专家精心选取了最具价值的设计实践,加以分类整理和命名,并用简洁而易于重用的形式表达出来。本书已经成为面向对象技术人员的圣经和词典,书中定义的23个模式逐渐成为开发界技术交流所必备的基础知识和语汇。

更多计算机宝库...