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. 软件的按契约设计(DbC---Design by Contract)

    一.DbC基本概念 DbC的思想源于商业活动中商家和用户的行为(义务和利益关系),双方都要遵守一个契约(合同),交易才能完成. 商家与用户的契约关系如下: 1. 商家必须提供某种产品(义务),并有权获 ...

  2. Typora -- 书写即美学

    #Typora -- 书写即美学 ##基本快捷键--需要在所见即所想界面进行输入 加粗 Ctrl + B 加粗 斜体 Ctrl + I 斜体 下划线 Ctrl + U 下划线 删除线 Ctrl + S ...

  3. 对C语言连等式的学习

    例子如下 [pgsql@localhost soft]$ cat test1.c #include <stdlib.h> #include <stdio.h> int main ...

  4. 1 http协议

    1.四层模型 + 2.socket 3.http协议 4. HTTP请求 跟踪了新浪的首页,我们来总结一下HTTP请求的流程: 3.1.1 步骤1:浏览器首先向服务器发送HTTP请求,请求包括: 方法 ...

  5. LeetCode：16. 3Sum Closest（Medium）

    1. 原题链接 https://leetcode.com/problems/3sum-closest/description/ 2. 题目要求 数组S = nums[n]包含n个整数,找出S中三个整数 ...

  6. Putty的设置保存

    用了好几年都不知道这功能, 以前每次在连接时只能手工更改字符为utf-8,当时在想怎么这么弱呢 后来才知道... 1 字符 Translation下  字体Appearance下 颜色Colours下 ...

  7. 【jQuery】 js 对象

    [jQuery] js 对象 一.  创建对象的三种方式 <script> var v1 = new Object(); v1.name = "name1"; v1.a ...

  8. MediaTypeListWidget->insertItem 添加的label没有填充单元格

    label没有填充满当前的item,但是主界面拉伸或者大小变化之后会填充当前的item 类似相关的问题我猜测都是因为子控件或者需要参考的控件的参考对象的大小在初始化的时候还没有完成最终的初始化,导致大 ...

  9. CSS里一个奇怪的属性

    事情是这样的,在一个手机界面的制作中,我发现按钮点击后总会出现一个边框,于是开始搜索解决方案.搜到的解决方案是这样的. a:focus,input:focus{ -webkit-tap-highlig ...

  10. 西门子S7-200 SMART在win10环境下，使用虚拟机进行网络通信问题一二

    原来的笔记本光荣退休,新买了小米笔记本17150.有个项目需要使用西门子S7-200 SMART,结果碰到了很多悲催的事情,新系统下的各种问题. 先贴下计算机配置,如下: 阶段一:安装问题 (1)在w ...