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. ruby Time类与Date类

    Time类用于表示时间.时间除了表示年月日时分秒的信息外,还包含了表示地域时差的时区(time zone)信息.例如我们可以计算中国当前时间是国际协调时间的几点 Date类只用于表示年月日.因此,相对 ...

  2. （数据科学学习手札23）决策树分类原理详解&Python与R实现

    作为机器学习中可解释性非常好的一种算法,决策树(Decision Tree)是在已知各种情况发生概率的基础上,通过构成决策树来求取净现值的期望值大于等于零的概率,评价项目风险,判断其可行性的决策分析方 ...

  3. P2153 [SDOI2009]晨跑（最小费用最大流）

    题目描述 Elaxia最近迷恋上了空手道,他为自己设定了一套健身计划,比如俯卧撑.仰卧起坐等 等,不过到目前为止,他坚持下来的只有晨跑. 现在给出一张学校附近的地图,这张地图中包含N个十字路口和M条街 ...

  4. 如何在Moodle中显示PPT课件

    Moodle中目前是不直接支持PPT的,所以需要曲线救国: 1.安装 iSpring Free 8版本,免费版,其实是一个PPT的插件,在PPT的工具栏中有显示. 2.打开PPT后,直接在该工具中进行 ...

  5. 【Keras案例学习】 多层感知机做手写字符分类（mnist_mlp ）

    from __future__ import print_function # 导入numpy库, numpy是一个常用的科学计算库,优化矩阵的运算 import numpy as np np.ran ...

  6. 2、Java并发编程：如何创建线程

    Java并发编程:如何创建线程? 在前面一篇文章中已经讲述了在进程和线程的由来,今天就来讲一下在Java中如何创建线程,让线程去执行一个子任务.下面先讲述一下Java中的应用程序和进程相关的概念知识, ...

  7. shell -- shift用法

    shift是Unix中非常有用的命令.可以使命令参数左移,从而使脚本程序中命令参数位置不变的情况下依次遍历所有参数.如shift 3表示原来的$4现在变成$1,原来的$5现在变成$2等等,原来的$1. ...

  8. qt 编译unresolved external symbol的错误解决

    题外问题:.rc文件报错,里面引用的.h文件打不开. 方法:rc文件移除,然后重新添加就可以: unresolved external symbol的原因: 1.没有添加编译生成的moc文件,添加对应 ...

  9. jenkins使用Role Strategy管理用户权限

    下载插件地址:https://wiki.jenkins.io/display/JENKINS/Role+Strategy+Plugin 1. 安装好插件后,进入jenkins系统管理的Configur ...

  10. 「日常训练」 Soldier and Traveling (CFR304D2E)

    题意 (CodeForces 546E) 对一个无向图,给出图的情况与各个节点的人数/目标人数.每个节点的人只可以待在自己的城市或走到与他相邻的节点. 问最后是否有解,输出一可行解(我以为是必须和答案 ...