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. Leecode刷题之旅-C语言/python-111二叉树的最小深度

    /* * @lc app=leetcode.cn id=111 lang=c * * [111] 二叉树的最小深度 * * https://leetcode-cn.com/problems/minim ...

  2. GIT LFS 使用笔记

    一.背景 由于git上传文件大小受限,所以我们需要使用GIT LFS对大小超过一定上限的大文件进行处理. 二.安装 linux上安装参见 https://askubuntu.com/questions ...

  3. CS61B sp2018笔记 | Lists

    Lists csdn同作者原创地址 1. IntLists   下面我们来一步一步的实现List类,首先你可以实现一个最简单的版本: public class IntList { public int ...

  4. linux进程 生产者消费者

    #include<stdio.h> #include<unistd.h> #include<stdlib.h> #include<string.h> # ...

  5. java冒泡算法

    public static void maopao() { int temp; int[] values = {2, 34, 0, 245}; for (int i = 0; i < value ...

  6. ASP NET Core ---REST & HTTP GET

    参照 草根专栏- ASP.NET Core + Ng6 实战:https://v.qq.com/x/page/h0764n405ll.html 一.REST (Representational Sta ...

  7. python终极篇 --- django---班级管理系统

    周末没事自己写了个班级管理系统,虽然简单,但也算个前期学习的总结吧 from django.db import models # Create your models here. class Banj ...

  8. 05-Mysql数据库----补充内容

    数据库命名规则: 数据库命名规则: 可以由字母.数字.下划线.@.#.＄ 区分大小写 唯一性 不能使用关键字如 create select 不能单独使用数字 最长128位 # 基本上跟python或者 ...

  9. 命令行编译 WPF

    在开发调试代码 WPF 时,经常需要在修改完成代码后,点击 Rebuild,然后到指定文件夹下点击打开对应的 .exe 验证程序是否正确, 可以通过以下命名实现修改程序后,点击一个 .bat 文件,直 ...

  10. python进阶训练

    1.列表,字典,集合解析 from random import randint #列表解析,选出大于0的元素 data=[randint(-10,10)for i in range(10)] resu ...