css，div在线编辑器（换成html就OK了）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV+CSS编辑器</title>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<meta content="all" name="robots" />
<meta name="author" content="Sunny V" />
<meta name="Contact" content="tool.la@gmail.com" />
<meta name="Copyright" content="www.Tool.La" />
<meta name="description" content="DIV+CSS编辑器是一个在线编辑DIV+CSS的在线编辑工具" />
<meta content="DIV+CSS编辑器,在线编辑，DIV+CSS，DIV+CSS工具，TOOL,TOOL.LA,工具,在线工具" name="keywords" />
<link rel="icon" href="http://www.vistaqq.com/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.vistaqq.com/favicon.ico" type="image/x-icon" />
<style type="text/css" media="screen">
<!--
html,body{height:100%;}*{font-size:12px;}.vcsseffect{background-color:#fff;background-image:url(grid.gif);}.hiddenObj{display:none;}.normal_input{border:1px solid #84a1bd;background-color:#fff;height:18px;}.hover_input {border:1px solid #9ecc00;background-color:#fff;height:18px;}.vcssDetail{padding: 15px;padding-top:0px;}.MainDialogCSS{
width:550px;
margin-right: auto;
margin-left: auto;
}.DetailCSSboxModel{
height:100%;
margin-right: auto;
margin-left: auto;
}.MainBody{
height:400px;
width: 760px;
margin-left: auto;
margin-right: auto;
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function hoverInput(obj,n)
{
if(n==1){if(obj.tagName=="INPUT" && obj.type=="text"){obj.className='hover_input';}}
else{
if(obj.tagName=="INPUT" && obj.type=="text")
{
obj.className='normal_input';
if(obj.value!='' && !isNaN(obj.value.substring(obj.value.length-1)))obj.value+='px';
}
}
setSelectionWithCss(2);
}
var allCSSsetterCode = "";
function setSelectionWithCss(funnum)
{
isSetting(vcssWidth,"width");
isSetting(vcssHeight,"height");
isSetting(vcssBackgroundColor,"background-color");
isSetting(vcssColor,"color");
isSetting(vcssBorderWidth,"border-width");
isSetting(vcssBorderColor,"border-color");
isSetting(vcssBorderdStyle,"border-style");
isSetting(vcssMargin,"margin");
isSetting(vcssPadding,"padding");
isSetting(vcssFloatResult,"float");
isSetting(vcssDisplay,"display");
isSetting(vcssVisibilityResult,"visibility");
isSetting(vcssTextAlign,"text-align");
isSetting(vcssLineHeight,"line-height");
isSetting(vcssTextIndent,"text-indent");
isSetting(vcssFontSize,"font-Size");
isSetting(vcssFontFamily,"font-family");
isSetting(vcssFontWeight,"font-weight");
isSetting(vcssDecorationResult,"text-decoration");
isSetting(vcssPosition,"position");
isSetting(vcssZIndex,"z-index");
isSetting(vcssLeft,"left");
isSetting(vcssRight,"right");
isSetting(vcssTop,"top");
isSetting(vcssBottom,"bottom");
isSetting(vcssPositionResult,"list-style-position");
isSetting(vcssCursor,"cursor");
isSetting(vcssBackgroundRepeat,"background-repeat");
isSetting(vcssBackgroundAttachment,"background-attachment");
isSetting(vcssListStyleType,"list-style-type");
isSetting(vcssOverflow,"overflow");
isSetting(vcssClear,"clear");
isSetting(vcssVerticalAlign,"vertical-align");
if(vcssBackgroundImage.value!="")allCSSsetterCode+="background-image:url("+vcssBackgroundImage.value+");";
if(vcssBackgroundPositionX.value!="" && vcssBackgroundPositionY.value!="")allCSSsetterCode+="background-position:"+vcssBackgroundPositionX.value+" "+vcssBackgroundPositionY.value+";";
if(vcssListStyleImage.value!="")allCSSsetterCode+="list-style-image:url("+vcssListStyleImage.value+");";
if(funnum==1)
{
alert(allCSSsetterCode);
}
else
{
var everyRule = allCSSsetterCode.split(';');
var resultCSSTEXT=vcssIdentName.value+"/r/n{/t";
for(var v=0;v<everyRule.length-1;v++)
{
resultCSSTEXT+=everyRule[v]+";/r/n/t";
}
resultCSSTEXT+="/r/n}";
document.all.cssTextValue.value=String(resultCSSTEXT);
document.all.cssTextValueCompare.value=String(allCSSsetterCode);
vcsseffect_div.style.cssText=String(allCSSsetterCode);
}
allCSSsetterCode="";
}
var isFisrtGetCss = true;
function getSelectionWithCss(funnum)
{
isGetting("vcssWidth","width");
isGetting("vcssHeight","height");
isGetting("vcssBackgroundColor","backgroundColor");
isGetting("vcssColor","color");
isGetting("vcssBorderWidth","borderWidth");
isGetting("vcssBorderColor","borderColor");
isGetting("vcssBorderdStyle","borderStyle");
isGetting("vcssMargin","margin");
isGetting("vcssPadding","padding");
isGetting("vcssFloat","float");
isGetting("vcssDisplay","display");
isGetting("vcssVisibilityResult","visibility");
isGetting("vcssTextAlign","textAlign");
isGetting("vcssLineHeight","lineHeight");
isGetting("vcssTextIndent","textIndent");
isGetting("vcssFontSize","fontSize");
isGetting("vcssFontFamily","fontFamily");
isGetting("vcssFontWeight","fontWeight");
isGetting("vcssDecorationResult","textDecoration");
isGetting("vcssBackgroundImage","backgroundImage");
isGetting("vcssBackgroundRepeat","backgroundRepeat");
isGetting("vcssBackgroundAttachment","backgroundAttachment");
isGetting("vcssListStyleType","listStyleType");
isGetting("vcssListStyleImage","ListStyleImage");
isGetting("vcssPositionResult","listStylePosition");
isGetting("vcssCursor","cursor");
}
function isSetting(cssobj,cssStartParam)
{
if(cssobj.value!="")allCSSsetterCode+=cssStartParam+":"+cssobj.value+";";
}
function isGetting(cssobj,cssStartParam)
{ if(isFisrtGetCss)
{
ele = document.getElementById("vv");
if(eval("ele.style."+cssStartParam)!="")
{
document.all[cssobj].value=eval("ele.style."+cssStartParam);
}
}
}
//-->
</script>
<script>
var sInitColor = null;
function callColorDlg(obj){
if (sInitColor == null)
var sColor = dlgHelper.ChooseColorDlg();
else
var sColor = dlgHelper.ChooseColorDlg(sInitColor);
sColor = sColor.toString(16);
if (sColor.length < 6) {
var sTempString = "000000".substring(0,6-sColor.length);
sColor = sTempString.concat(sColor);
}
if(sColor!="000000"){
sColor = "#" + sColor;
obj.value=sColor;
obj.style.backgroundColor=sColor;
}}
</script></head><OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT>
<body>
<p align="center"><strong>
<font style="color:#FF0000; font-size:26px">
DIV+CSS编辑器</font></strong></p>
<div class="MainBody" id="MainBody">
<div onMouseOver="hoverInput(event.srcElement,1);" onMouseOut="hoverInput(event.srcElement,2);" onKeyUp="setSelectionWithCss(2);" class="MainDialogCSS">
<div id="vcssDetail_div" class="vcssDetail" style="display:block;"><p>
类/标签/ID：<input name="vcssIdentName" id="vcssIdentName" value=".style1" class="normal_input" οnmοuseοver="select();" onMouseOut="event.cancelBubble=true;this.className='normal_input';" />
所有数值都不用输入单位;<br />
宽：<input name="vcssWidth" type="text" class="normal_input" id="vcssWidth" value="" size="8" />
高：<input name="vcssHeight" type="text" class="normal_input" id="vcssHeight" value="" size="8" />
背景色：<input name="vcssBackgroundColor" type="text" class="normal_input" id="vcssBackgroundColor" onMouseOut="event.cancelBubble=true;this.className='normal_input';" value="" size="8" onClick="callColorDlg(this)" />
前景色：<input name="vcssColor" type="text" class="normal_input" id="vcssColor" value="" size="8" onMouseOut="event.cancelBubble=true;this.className='normal_input';" onClick="callColorDlg(this)" /><br>
边框：<input name="vcssBorderWidth" οnclick="value=1;vcssBorderdStyle.value='solid';" type="text" class="normal_input" id="vcssBorderWidth" value="" size="8" />
颜色：<input name="vcssBorderColor" type="text" class="normal_input" id="vcssBorderColor" value="" size="8" onClick="callColorDlg(this)" onMouseOut="event.cancelBubble=true;this.className='normal_input';" />
<select name="vcssBorderdStyle" id="vcssBorderdStyle" οnclick="if(value=='')value='solid';">
<option selected>选择<option value="solid">solid<option value="dotted">dotted<option value="none">none<option value="hidden">hidden<option value="dashed">dashed<option value="double">double<option value="groove">groove<option value="ridge">ridge<option value="inset">inset<option value="outset">outset</select><br>
外间距 Margin ：<input name="vcssMargin" type="text" onKeyDown="if(event.keyCode==32)this.value+='px';" class="normal_input" id="vcssMargin" value="" size="20" />
如:10px 2px <br>
内间距 Padding：<input name="vcssPadding" type="text" onKeyDown="if(event.keyCode==32)this.value+='px';" onBlur="if(this.value!='' && !isNaN(this.value.substring(this.value.length-1)))this.value+='px';" class="normal_input" id="vcssPadding" value="" size="20" />
如:10px 2px<br>
浮动： 左<input type="radio" name="vcssFloat" onClick="if(this.checked)vcssFloatResult.value=this.value" value="left">
右<input name="vcssFloat" type="radio" onClick="if(this.checked)vcssFloatResult.value=this.value" value="right"><input name="vcssFloat" type="radio" class="hiddenObj" id="unsetFloat" onClick="if(this.checked)vcssFloatResult.value='';" />
<a onClick="unsetFloat.click();" style="cursor:pointer;" title="取消浮动属性">×</a>
<input name="vcssFloatResult" type="hidden" />
显示：<select name="vcssDisplay" id="vcssDisplay">
<option selected>选择
<option value="block">block
<option value="inline">inline
<option value="none">none
</select>
可见：<input type="radio" name="vcssVisibility" value="visible" onClick="if(this.checked)vcssVisibilityResult.value=this.value">可见
<input type="radio" name="vcssVisibility" value="hidden" onClick="if(this.checked)vcssVisibilityResult.value=this.value">隐藏
<input type="radio" name="vcssVisibility" class="hiddenObj" id="unsetVisibility" onClick="if(this.checked)vcssVisibilityResult.value='';" /><a onClick="unsetVisibility.click();" style="cursor:pointer;" title="取消可见属性">×</a>
<input name="vcssVisibilityResult" type="hidden" />
<br>
文本对齐：<select name="vcssTextAlign" id="vcssTextAlign" οnclick="if(value=='')value='center';">
<option selected>选择</option>
<option value="left">left</option>
<option value="center">center</option>
<option value="right">right</option>
</select>
行高：<input name="vcssLineHeight" type="text" class="normal_input" id="vcssLineHeight" onMouseOut="event.cancelBubble=true;this.className='normal_input';" value="" size="8" />
<select name="vcssLineUnit" id="select5">
<option value="%">%</option>
<option selected>无</option>
<option value="px">px</option>
</select>
文字缩进：<input name="vcssTextIndent" type="text" class="normal_input" id="vcssLineHeight4" value="" size="8" />
<br>
文本：<input name="vcssFontSize" type="text" class="normal_input" id="vcssFontSize" value="12px" size="5" />
字体：
<select name="vcssFontFamily" id="vcssFontFamily" οnclick="if(value=='')value='Arial';"><option selected>选择</option><option value="宋体">宋体<option value="黑体">黑体<option value="Arial">Arial<option value="微软雅黑">雅黑</select>
粗细：<input name="vcssFontWeight" type="text" class="normal_input" id="vcssLineHeight3" value="" size="8" onMouseOut="event.cancelBubble=true;this.className='normal_input';" />
效果：<input type="radio" name="vcssTextDecoration" value="underline" onClick="if(this.checked)vcssDecorationResult.value=this.value">下划线
<input type="radio" name="vcssTextDecoration" value="none" onClick="if(this.checked)vcssDecorationResult.value=this.value">无
<input type="radio" name="vcssVisibility" class="hiddenObj" id="unsetDecoration" onClick="if(this.checked)vcssDecorationResult.value='';" /><a onClick="unsetDecoration.click();" style="cursor:pointer;" title="取消文字效果属性">×</a>
<input name="vcssDecorationResult" type="hidden" />
<br>
背景图片：<input name="vcssBackgroundImage" type="file" class="normal_input" id="vcssBackgroundImage">
重复：<select name="vcssBackgroundRepeat" id="vcssBackgroundRepeat" οnclick="if(value=='')value='no-repeat';"><option selected>选择<option value="repeat-x">横向重复<option value="repeat-y">纵向重复<option value="no-repeat">不重复</select>
<br>
水平位置：<input name="vcssBackgroundPositionX" type="text" class="normal_input" id="vcssBackgroundPositionX" value="" size="5" />
垂直位置：<input name="vcssBackgroundPositionY" type="text" class="normal_input" id="vcssBackgroundPositionY" value="" size="5" />
附件：<select name="vcssBackgroundAttachment" id="vcssBackgroundAttachment" οnclick="if(value=='')value='fixed';"><option selected>选择<option value="fixed">固定<option value="scroll">滚动</select>
<br />
垂直对齐：<select name="vcssVerticalAlign" id="vcssVerticalAlign" οnclick="if(value=='')value='middle';">
<option selected>选择</option>
<option value="middle">middle</option>
<option value="bottom">bottom</option>
<option value="auto">top</option>
<option value="auto">auto</option>
<option value="baseline">baseline</option>
</select>
清除：<select name="vcssClear" id="vcssClear" οnclick="if(value=='')value='both';">
<option selected>选择</option>
<option value="left">left</option>
<option value="right">right</option>
<option value="both">both</option>
</select>
Overflow：<select name="vcssOverflow" id="vcssOverflow" οnclick="if(value=='')value='hidden';">
<option selected>选择</option>
<option value="scroll">scroll</option>
<option value="auto">auto</option>
<option value="hidden">hidden</option>
</select>
<br />
定位：<select name="vcssPosition" id="vcssPosition">
<option selected>选择</option>
<option value="absolute">绝对</option>
<option value="relative">相对</option>
</select>
Z坐标：<input name="vcssZIndex" id="vcssZIndex" class="normal_input" size="5" value="" onMouseOut="event.cancelBubble=true;this.className='normal_input';" />
left:<input name="vcssLeft" id="vcssLeft" class="normal_input" size="4" value="" />
top:<input name="vcssTop" id="vcssTop" class="normal_input" size="4" />
right:<input name="vcssRight" id="vcssRight" class="normal_input" size="4" />
bottom:<input name="vcssBottom" id="vcssBottom" class="normal_input" size="4" />
<br />
UL列表：类型<select name="vcssListStyleType" id="vcssListStyleType" οnclick="if(value=='')value='none';">
<option selected>选择</option>
<option value="none">none</option>
<option value="disc">disc</option>
<option value="circle">circle</option>
<option value="square">square</option>
<option value="decimal">decimal</option>
</select>
图像：<input name="vcssListStyleImageBtn" type="button" id="vcssListStyleImageBtn" οnclick="vcssListStyleImage.click();" value="...">
<input name="vcssListStyleImage" id="vcssListStyleImage" type="file" value="" style="display:none;" />
位置：<input type="radio" name="vcssListStylePosition" value="inside" onClick="if(this.checked)vcssPositionResult.value=this.value">内
<input type="radio" name="vcssListStylePosition" value="outside" onClick="if(this.checked)vcssPositionResult.value=this.value">外
<input type="radio" name="vcssVisibility" class="hiddenObj" id="unsetPosition" onClick="if(this.checked)vcssPositionResult.value='';" /><a onClick="unsetPosition.click();" style="cursor:pointer;" title="取消列表效果属性">×</a>
<input name="vcssPositionResult" type="hidden" />
光标：
<select name="vcssCursor" id="vcssCursor" οnclick="if(value=='')value='pointer';">
<option selected>选择</option>
<option value="default">默认</option>
<option value="pointer">手</option>
<option value="text">文本</option>
<option value="move">移动</option>
<option value="crosshair">crosshair</option>
<option value="default">default</option>
<option value="pointer">pointer</option>
<option value="hand">hand</option>
<option value="move">move</option>
<option value="help">help</option>
<option value="wait">wait</option>
<option value="text">text</option>
<option value="w-resize">w-resize</option>
<option value="s-resize">s-resize</option>
<option value="n-resize">n-resize</option>
<option value="e-resize">e-resize</option>
</select><br /><br />
<input name="vcssOk" type="button" id="vcssOk" onClick="setSelectionWithCss(1);" value="确定">
<input name="vcssCancel" type="button" id="vcssCancel" value="取消">
<input name="vcssView" type="button" id="vcssView" onClick="setSelectionWithCss(2);" value="应用">
<input name="vcssImport" type="button" id="vcssImport" value="@import..">
<input name="vcssSave" type="button" id="vcssSave" value="保存..">
<input name="vcssLoad" type="button" id="vcssLoad" value="载入..">
<br><fieldset style="padding:10px; "><legend>实际应用效果如下</legend><div id="vcsseffect_div" class="vcsseffect">
Effect of This Rule Shows You at here!
<br>
希望人BLOG(http://www.xwrblog.cn/)总有一些惊喜等着你!!!
</div>
</fieldset><br></p></div></div>
<hr />
<textarea name="cssTextValue" cols="100" rows="5" id="cssTextValue"></textarea>
<input name="vcssView" type="button" id="vcssView" οnclick="window.clipboardData.setData('text',document.all.cssTextValue.value);alert('CSS已保存到剪贴板');" value="复制到剪切板">
<textarea name="cssTextValueCompare" cols="100" rows="5" id="cssTextValueCompare"></textarea>
<input name="vcssView2" type="button" id="vcssView" οnclick="window.clipboardData.setData('text',document.all.cssTextValueCompare.value);alert('CSS已保存到剪贴板');" value="复制到剪切板">
<hr />
<div class="vv" id="vv" contentEditable="true" style="width:300px;height:50px;background-color:#ff80c0;color:#800040;border-width:1px;border-color:#ff0080;border-style:solid;margin:6px;padding:6px;float:left;font-Size:12px;">
</div>
<input type="button" id="vcssView" οnclick="getSelectionWithCss();setSelectionWithCss()" value="获取左侧DIV样式">
<DIV style="WIDTH: 100%"></DIV>
<HR>
<div>
<script src='http://s34.cnzz.com/stat.php?id=626178&web_id=626178&show=pic' language='JavaScript' charset='gb2312'></script>
<a href="http://www.xwrblog.cn/" target="_blank"><img src="http://www.xwrblog.cn/logo/logo-88x31.jpg" width="88" height="31" border="0" /></a>
</body>
</html>
css，div在线编辑器（换成html就OK了）相关推荐
- 帝国cms html5 编辑器,帝国cms7.2编辑器换成百度编辑器的方法（完全正确教程）...
用过官网修改代码的教程,失败,再用一键包,图片无法上传,最好找到了正确的详细教程,记录如下: 在这个网页中下载最新版本,防止漏洞. 步骤2,下载后会有个文件夹,上传至帝国cms的/e/data/ecm ...
- css将鼠标箭头换成图片
就一行代码 html,body{cursor: url('wish1.png'),auto;}
- bootstrap-table 加表格线 样式换成table-bordered
<div class="col-sm-12 select-info table-bordered"> <table id=&quo ...
- 【源码共享】我花2小时写了微信官网的响应式布局HTML+CSS 换成旅行主题风格更炫酷了
微信官网仿写效果 ↑ 移动端响应式效果 ↑ 微信官网首页,简约干净,能学习写好这个首页,就能掌 握HTML网页设计前端盒子的布局.嵌套,及css效果的 使用... 微信官网首页主要有以下几个需要关注的 ...
- 开源在线excel编辑器_5款免费在线PDF转换成word或者excel的分享
word在日常工作中,应用广泛,但是里面关于PDF的转换工具必需要会员才可以使用,但又不愿意只为了转换一次而花费钱去买会员,本文为你们提供了5款免费在线PDF转换成word或者excel的网. 1.I ...
- 黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的 ...
- dedecms编辑器 php,dede编辑器怎么换成kindEditor编辑器
dede编辑器怎么换成kindEditor编辑器? 最近由于项目需要,在搞dedeCMS,发现dede自带的ckEditor在word粘贴这方面做得不是很好,从word上面直接ctrl+V的内容跟wr ...
- Html、CSS、JavaScript 实时效果在线编辑器 - 学习的好工具，算不算？！
关于 二维码 与 NFC 之间的出身贫贱说 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 ...
- 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能
这篇文章讲的是在线编辑器功能,之前的部门模块中,增加部门的功能jsp页面起先是这么做的. 加入在线编辑器之后要达到的效果是: 采用一个插件,名为FCKeditor-v2.6.3.要理解一个插件,要先从 ...
最新文章
- h5 返回上一页并且刷新页面
- 求解一个数的所有约数之积
- 真正掌握vuex的使用方法（六）
- html font-family设置无效,css设置中文字体(font-family:黑体)后样式失效问题
- android4.0教程,图文教程现身，在Win7等系统里跑起Android4.0
- Shanda EZ Mini
- MySQL的快速修复
- 【线段树求逆序数】【HDU1394】Minimum Inversion Number
- pytorch test单张图片_PyTorch的元学习库：Torchmeta
- 服务器vmware私有云,方案建议-使用VMware架构搭建自己的私有云.pptx
- java与c互通aes加密解密
- VideoProc for mac(全能视频处理软件)
- java unbox_java base-05-Box UnBox 自动装拆箱
- 做一个很出色的程序员
- BBTRZ柔性矿物质绝缘防火电缆的优势
- 人机大战5个误区:人类没那么差阿尔法狗不会防水
- VS shortcuts
- JS打印出Fibonacci数（不使用全局变量）
- 干货--微信公众平台客户端调试工具-初试WPF开发
- IT系统、TN系统、TT系统接地异同及适用范围