<!--#include file="../utf-8.asp" -->
<!--#include file="Function.asp" -->
<!--#include file="../CheckAdmin.asp" -->
<!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=utf-8">
<meta content="all" name="robots" />
<META NAME="copyright" CONTENT="Copyright 2010-2012 - yidacms.com" />
<META NAME="Author" CONTENT="世纪伟成  yidacms.com" />
<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: 100%;
	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>
<%

if InStr(admin_aqx,"16") > 0 Then 
  response.write ""
Else 
 response.write "<div class=""admin_qx"">对不起,您没有权限操作!</div>"
 response.end
End If 

%>
<p align="center">
<font style="color:#FF0000; font-size:14px; font-weight:bolder">
在线DIV+CSS生成器</font></p>
<table width="100%" border="1"cellpadding="3" cellspacing="0" bordercolor="#666666" style="border-collapse:collapse">
  <tr>
    <td>类/标签/ID：</td>
    <td><input name="vcssIdentName" id="vcssIdentName" value=".style1" class="normal_input" onmouseover="select();" onmouseout="event.cancelBubble=true;this.className='normal_input';" /></td>
    <td>宽度：</td>
    <td><input name="vcssWidth" type="text" class="normal_input" id="vcssWidth" value="" size="8" /></td>
    <td>高度
    ： </td>
    <td><input name="vcssHeight" type="text" class="normal_input" id="vcssHeight" value="" size="8" /></td>
  </tr>
  <tr>
    <td>背景色： </td>
    <td><input name="vcssBackgroundColor" type="text" class="normal_input" id="vcssBackgroundColor" onmouseout="event.cancelBubble=true;this.className='normal_input';" value="" size="8" onclick="callColorDlg(this)" /></td>
    <td>前景色：</td>
    <td><input name="vcssColor" type="text"  class="normal_input" id="vcssColor" value="" size="8" onmouseout="event.cancelBubble=true;this.className='normal_input';" onclick="callColorDlg(this)" /></td>
    <td>边框：</td>
    <td><input name="vcssBorderWidth" onclick="value=1;vcssBorderdStyle.value='solid';" type="text"  class="normal_input" id="vcssBorderWidth" value="" size="8" /></td>
  </tr>
  <tr>
    <td>颜色：</td>
    <td><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" onclick="if(value=='')value='solid';">
        <option selected>选择</option>
        <option value="solid">solid</option>
        <option value="dotted">dotted</option>
        <option value="none">none</option>
        <option value="hidden">hidden</option>
        <option value="dashed">dashed</option>
        <option value="double">double</option>
        <option value="groove">groove</option>
        <option value="ridge">ridge</option>
        <option value="inset">inset</option>
        <option value="outset">outset</option>
      </select></td>
    <td>外间距 Margin ：</td>
    <td><input name="vcssMargin" type="text" onkeydown="if(event.keyCode==32)this.value+='px';" class="normal_input" id="vcssMargin" value="" size="20" /></td>
    <td>如:10px 2px</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>内间距 Padding：</td>
    <td><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" /></td>
    <td>如:10px 2px</td>
    <td>浮动：</td>
    <td>左
      <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" /></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>显示：</td>
    <td><select name="vcssDisplay"  id="vcssDisplay">
      <option selected>选择 </option>
      <option value="block">block </option>
      <option value="inline">inline </option>
      <option value="none">none </option>
    </select></td>
    <td>可见：</td>
    <td><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" /></td>
    <td>文本对齐：</td>
    <td><select name="vcssTextAlign" id="vcssTextAlign" onclick="if(value=='')value='center';">
      <option selected>选择</option>
      <option value="left">left</option>
      <option value="center">center</option>
      <option value="right">right</option>
    </select></td>
  </tr>
  <tr>
    <td>行高：</td>
    <td><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></td>
    <td>文字缩进： </td>
    <td><input name="vcssTextIndent" type="text" class="normal_input" id="vcssLineHeight4" value="" size="8" /></td>
    <td>文本：    
    <input name="vcssFontSize" type="text" class="normal_input" id="vcssFontSize" value="12px" size="5" /></td>
    <td>字体： 
      <select name="vcssFontFamily" id="vcssFontFamily" onclick="if(value=='')value='Arial';">
        <option selected>选择</option>
        <option value="宋体">宋体</option>
        <option value="黑体">黑体</option>
        <option value="Arial">Arial</option>
        <option value="微软雅黑">雅黑</option>
      </select></td>
  </tr>
  <tr>
    <td>效果：</td>
    <td><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" /></td>
    <td>背景图片：</td>
    <td><input name="vcssBackgroundImage" type="file"  class="normal_input" id="vcssBackgroundImage" /></td>
    <td>重复：</td>
    <td><select name="vcssBackgroundRepeat" id="vcssBackgroundRepeat" onclick="if(value=='')value='no-repeat';">
      <option selected>选择</option>
      <option value="repeat-x">横向重复</option>
      <option value="repeat-y">纵向重复</option>
      <option value="no-repeat">不重复</option>
    </select></td>
  </tr>
  <tr>
    <td>垂直位置： </td>
    <td><input name="vcssBackgroundPositionY" type="text" class="normal_input" id="vcssBackgroundPositionY" value="" size="5" /></td>
    <td>附件：</td>
    <td><select name="vcssBackgroundAttachment" id="vcssBackgroundAttachment" onclick="if(value=='')value='fixed';">
      <option selected>选择</option>
      <option value="fixed">固定</option>
      <option value="scroll">滚动</option>
    </select></td>
    <td>清除：</td>
    <td><select name="vcssClear" id="vcssClear" onclick="if(value=='')value='both';">
      <option selected>选择</option>
      <option value="left">left</option>
      <option value="right">right</option>
      <option value="both">both</option>
    </select></td>
  </tr>
  <tr>
    <td>Overflow：</td>
    <td><select name="vcssOverflow" id="vcssOverflow" onclick="if(value=='')value='hidden';">
      <option selected>选择</option>
      <option value="scroll">scroll</option>
      <option value="auto">auto</option>
      <option value="hidden">hidden</option>
    </select></td>
    <td>Z坐标：</td>
    <td><input name="vcssZIndex" id="vcssZIndex" class="normal_input" size="5" value="" onmouseout="event.cancelBubble=true;this.className='normal_input';" /></td>
    <td>left:
    <input name="vcssLeft" id="vcssLeft" class="normal_input" size="4" value="" /></td>
    <td>right:
    <input name="vcssRight" id="vcssRight" class="normal_input" size="4" /></td>
  </tr>
  <tr>
    <td>top:
    <input name="vcssTop" id="vcssTop" class="normal_input" size="4" /></td>
    <td>bottom:
    <input name="vcssBottom" id="vcssBottom" class="normal_input" size="4" /></td>
    <td>粗细：
    <input name="vcssFontWeight" type="text" class="normal_input" id="vcssLineHeight3" value="" size="8" onmouseout="event.cancelBubble=true;this.className='normal_input';" /></td>
    <td>图像：
    <input name="vcssListStyleImageBtn" type="button" id="vcssListStyleImageBtn" onclick="vcssListStyleImage.click();" value="..." /></td>
    <td>位置：</td>
    <td><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" /></td>
  </tr>
  <tr>
    <td>光标：</td>
    <td><select name="vcssCursor" id="vcssCursor" onclick="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></td>
    <td>水平位置：</td>
    <td><input name="vcssBackgroundPositionX" type="text" class="normal_input" id="vcssBackgroundPositionX" value="" size="5" /></td>
    <td>垂直对齐：</td>
    <td><select name="vcssVerticalAlign" id="vcssVerticalAlign" onclick="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></td>
  </tr>
  <tr>
    <td>定位：</td>
    <td><select name="vcssPosition" id="vcssPosition">
      <option selected>选择</option>
      <option value="absolute">绝对</option>
      <option value="relative">相对</option>
    </select></td>
    <td>UL列表：类型
    <input name="vcssListStyleImage" id="vcssListStyleImage" type="file" value="" style="display:none;" /></td>
    <td><select name="vcssListStyleType" id="vcssListStyleType" onclick="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></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input name="vcssOk" type="button" id="vcssOk" onclick="setSelectionWithCss(1);" value="确定" /></td>
    <td><input name="vcssCancel" type="button" id="vcssCancel" value="取消" /></td>
    <td><input name="vcssView3" type="button" id="vcssView2" onclick="setSelectionWithCss(2);" value="应用" />
    <input name="vcssImport" type="button" id="vcssImport" value="@import.." /></td>
    <td><input name="vcssSave" type="button" id="vcssSave" value="保存.." /></td>
    <td><input name="vcssLoad" type="button" id="vcssLoad" value="载入.." /></td>
  </tr>
</table>
<p align="center">&nbsp;</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><br />
<fieldset style="padding:10px; "><legend>实际应用效果如下</legend><div id="vcsseffect_div" class="vcsseffect">
Effect of This Rule Shows You at here!
<br>显示你生成的代码阅览，yidacms.com</div>
</fieldset><br></p></div></div>
<textarea name="cssTextValue" cols="100" rows="5" id="cssTextValue"></textarea>
<input name="vcssView" type="button" id="vcssView" onclick="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" onclick="window.clipboardData.setData('text',document.all.cssTextValueCompare.value);alert('CSS已保存到剪贴板');" value="复制到剪切板">

</body>
</html>