<!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.tool.la/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://www.tool.la/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">
<font style="color:#FF0000; font-size:14px; font-weight:bolder">
在线DIV+CSS编辑器
</font>
</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" onmouseover="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" onclick="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=
在线DIV+CSS编辑器
![star](https://csdnimg.cn/release/downloadcmsfe/public/img/star.98a08eaa.png)
![avatar](https://profile-avatar.csdnimg.cn/default.jpg!1)
Idclend
- 粉丝: 0
- 资源: 4
最新资源
- matlab画图.rar
- VerilogVHDL\FPGA入门教程FPGA器件边练边学-快速入门Verilogvhdl
- 基于C++的mfc的仿QQ聊天系统(高分课程设计期末大作业)
- 基于Java web的学生管理系统(源码+数据库+报告)高分项目
- 基于Java web的学生管理系统(源码+数据库+报告)期末大作业&课程设计
- FM1702SL芯片13.56MHZ NFC读卡器开发板PROTELPCB图+FM1702SL中文说明书+FM1715编程指南
- 期末大作业交通数据分析与应用期末作业程序源码+实验报告.zip
- 期末大作业基于Java web的图书销售管理系统(源码+数据库)高分项目
- python-leetcode面试题解之第274题H指数.zip
- python-leetcode面试题解之第270题最接近二叉搜索树值.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)