您的位置：首页 > Web前端 > CSS

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

2012-02-06 00:00 1951 查看
style 也是标签（在非ie内核的浏览器中支持），我们将style设置成 contenteditable的时候，那么那的内容就可以编辑了。仔细的体验下，如果我们将背景修改成红色的。那么只要书写完，立马呈现。哇靠，这很方便我们以后写那种动态的编辑器效果呢，等有时间的话，我再试试。

效果演示

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

.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;
}

.test_div {background: green;}
附上我研究的代码：

<!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，欢迎访问原出处。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航