zoukankan      html  css  js  c++  java
  • 做一个所见即所得的CSS效果

    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;
    	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;
    	250px;
    	height:100px;
    }
    </style>
    <div class="test_div"><style contenteditable>.test_div {background: green;}</style></div>
    

    Have fun.

  • 相关阅读:
    软件设计图工具
    属性读取
    socket ReceiveAsync
    Type.GetType()跨程序集反射
    实例化类的时候代码运行顺序
    C# 互斥对象--Mutex---线程同步
    【vim】vim配置教程+源码
    【框架】SPI四种模式+通用设备驱动实现
    【网络】NFS网络文件系统
    【C语言】函数不定长参数
  • 原文地址:https://www.cnblogs.com/xiaoyang002/p/4042192.html
Copyright © 2011-2022 走看看