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.

做一个所见即所得的CSS效果的更多相关文章

  1. NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器

    经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布.应广大群友的要求,现已将NanUI的全部代码开源. GitHub: https://github.com/ ...

  2. 利用jquery+iframe做一个ajax上传效果

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  3. 简单说 用CSS做一个魔方旋转的效果

    说明 魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释 我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...

  4. 用HTML5的Audio标签做一个歌词同步的效果

    HTML5出来这么久了,但是关于它里面的audio标签也就用过那么一次,当然还仅仅只是把这个标签插入到了页面中.这次呢就刚好趁着帮朋友做几个页面,拿这个audio标签来练练手. 首先你需要向页面中插入 ...

  5. SceneKit做一个旋转的地球效果

    SceneKit可以用寥寥几行帮你完成很多OpenGL复杂的3D设置代码,下面本猫就带大家完成一个旋转的3D地球的场景. 首先需要地球表面图片,将其导入到Xcode中: 我们用SceneKit内置的几 ...

  6. anime.js 实战：实现一个带有描边动画效果的复选框

    在网页或者是APP的开发中,动画运用得当可以起到锦上添花的作用.正确使用动画,不但可以有助于用户理解交互的作用,还可以大大提高网页应用的魅力和使用体验.并且在现在的网页开发中,动画已经成为了一个设计的 ...

  7. Android UI组件----用相对布局RelativeLayout做一个登陆界面

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  8. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  9. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

随机推荐

  1. Hadoop(13)-MapReduce框架原理--Job提交源码和切片源码解析

    1.MapReduce的数据流 1) Input -> Mapper阶段 这一阶段的主要分工就是将文件切片和把文件转成K,V对 输入源是一个文件,经过InputFormat之后,到了Mapper ...

  2. 「LibreOJ#516」DP 一般看规律

    首先对于序列上一点,它对答案的贡献只有与它的前驱和后驱(前提颜色相同)构成的点对, 于是想到用set维护每个颜色,修改操作就是将2个set暴力合并(小的向大的合并),每次插入时更新答案即可 颜色数要离 ...

  3. MySQL共享表空间扩容

    一.什么是共享表空间和独占表空间 共享表空间以及独占表空间都是针对数据的存储方式而言的. 共享表空间: 某一个数据库的所有的表数据,索引文件全部放在一个文件中,默认这个共享表空间的文件路径在data目 ...

  4. Hibernate-ORM:06.Hibernate中三种状态

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客主要叙述Hibernate中的三种状态:临时状态(瞬时状态),持久状态,游离状态 commit和flu ...

  5. Android Google Maps 开始

    由于工作需要,最近对Android的各大地图进行了试用. 其中有Google地图,百度地图,高德地图,还有开源的OSM. 在使用Google地图的时候,官网流程写的非常清楚,但是其中也遇到一些问题.这 ...

  6. [USACO19JAN]Cow Poetry

    题面 Solution: 这是一道很好的dp题. 一开始看不懂题面没有一点思路,看了好久题解才看懂题目... \(y[i]\) 为第 \(i\) 个词结尾,\(l[i]\) 为第 \(i\) 个词长度 ...

  7. Python 3 学习笔记之——数据类型

    1. 数字 类型 int, float, bool, complex type() 查看变量类型 isinstance(a, int) 查看变量类型 运算符 % 取余 // 返回商的整数部分 ** 幂 ...

  8. windows下连接hadoop运行eclipse报错Permission denied:

    这是权限问题,试了一下同时也不能在hdfs创建文件夹. 解决: 修改如下hadoop的配置文件:etc/hadoop/hdfs-site.xml,如没有的话可以添加上. <property> ...

  9. Android—实现科大讯飞语音合成

    背景(可以不看) 实验室项目开发的APP需要有语音提示功能,之前的做法是人工录音,剪辑片段,调用Android的多媒体,播放,呵呵呵,,,这是21世纪!这样肯定显得有点low啊,且不说档次,应用场景也 ...

  10. [Elasticsearch] 多字段搜索 (二) - 最佳字段查询及其调优

    最佳字段(Best Fields) 假设我们有一个让用户搜索博客文章的网站,就像这两份文档一样: PUT /my_index/my_type/1 { "title": " ...