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. ZooKeeper(2)-安装和配置

    一.下载 https://zookeeper.apache.org/ 二.本地模式安装 1.安装前准备 (1)安装Jdk (2)拷贝Zookeeper安装包到Linux系统下 (3)解压到指定目录 . ...

  2. Jupyter Notebook里面使用Matplotlib画图 图表中文乱码问题

    可查看以下链接: https://blog.csdn.net/ccblogger/article/details/79613335

  3. centos 7 关闭IPtables

    systemctl status iptables.service systemctl stopiptables.service

  4. ABAP CDS ON HANA-(5)テーブル結合ビュー

    JOINs in CDS View In ABAP CDS, Join between two data sources is allowed. Allowed joins are:- Inner J ...

  5. FTP 主动模式与被动模式

    项目中涉及到媒资传输的地方,均有ftp应用,而关于媒资传输故障的排查中,FTP主被动模式问题占了较高比例,但又容易被忽略, 特此收集相关资料介绍,同时整理了如何通wget.tcpdum分辨FTP的主被 ...

  6. echarts的pie图中，各区块颜色的调整

    今天在学习使用echarts生成各种图表. 然后在使用pie图时出现我无论怎么更改代码中的颜色,pie图中各块的颜色都十分相近,几乎没法区别块与块之间的区别,如下图: 在下图中,除了其中一块的是红色的 ...

  7. pprof 查看goroutine

    package main import ( "net/http" "runtime/pprof" ) var quit chan struct{} = make ...

  8. Apache 服务器性能评估

    1 查看当前并发连接数 netstat -an | grep ESTABLISHED | wc -l 2 查看当前进程数 ps aux|grep httpd|wc -l

  9. 做模态弹框的时候，防止背景滚动方法 移动端 html5

    $(window.document).bind("touchmove", function() { return false; });

  10. 免费天气预报API接口

    一.中国气象局(http://www.weather.com.cn) 1.实时接口 http://mobile.weather.com.cn/data/sk/101010100.html http:/ ...