DIV+CSS编辑器
< 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 ="description" content ="DIV+CSS编辑器是一个在线编辑DIV+CSS的在线编辑工具" />
< meta content ="DIV+CSS编辑器,在线编辑,DIV+CSS,DIV+CSS工具,在线工具" name ="keywords" />
< 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+" { ";
for(var v=0;v<everyRule.length-1;v++)
...{
resultCSSTEXT+=everyRule[v]+"; ";
}
resultCSSTEXT+=" }";
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 ="vcssBorderdStyle" id ="vcssBorderdStyle" onclick ="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" onclick ="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" onclick ="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" onclick ="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" onclick ="if(value=='')value='fixed';" >< option selected > 选择 < option value ="fixed" > 固定 < option value ="scroll" > 滚动 </ select >
< br />
垂直对齐: < 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 >
清除: < 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 >
Overflow: < 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 >
< 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" 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 >
图像: < input name ="vcssListStyleImageBtn" type ="button" id ="vcssListStyleImageBtn" onclick ="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" 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 >< 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 > 工具啦 (www.tool.la) 给你最全、最好的工具! </ div >
</ fieldset >< br ></ p ></ div ></ div >
< hr />
< 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 ="复制到剪切板" >
< 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,你可以使用获取CSS来获取这个CSS
</ div >< input type ="button" id ="vcssView" onclick ="getSelectionWithCss();setSelectionWithCss()" value ="获取左侧DIV样式" >
< div style ="width:100% " > </ div >
</ div >
</ body >
</ html >
DIV+CSS编辑器相关推荐
- css,div在线编辑器(换成html就OK了)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html京东下拉菜单设置,div css下拉导航菜单(图+演示)
div css下拉导航菜单(图+演示),div css下拉导航菜单,css导航菜单下拉 CSS导航菜单(CSS下拉菜单演示图) 查看演示-CSS下拉菜单样式:下拉导航菜单/ 以下有DIV CSS下拉菜 ...
- div+css知识点文档
第一章xhtml+css入门 1.HTML:超文本标记语言 2.XHTML:可扩展超文本标记语言 3.CSS: 层叠样式表或级联样式表 4.主流浏览器: IE(美国微软).Firefox(谋智).op ...
- HTML网页设计制作大作业(div+css) ~中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化)
HTML网页设计制作大作业(div+css) ~ 中华美德6页面带音乐 ~ 学生网页设计作业源码(中华文化) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
- psd转div+css,PSD转DIV+CSS的方法.doc
PSD转DIVCSS的方法 把psd页面利用div+css切割成html页面 首先看看效果下面的图片就是效果图,切割出来后,可能头部和底部会宽点..... 新建文件夹 开始时,在您的计算机中创建一个文 ...
- 对用DIV+CSS+JS实现多子部门组织结构图的改进
这是回复论坛一坛友的问题涉及到的. 因为我把广告从HOST里禁了,所以CSDN论坛里面回复时的编辑器其它功能都没了,只有一个简单的输入框.简洁不少,可是不仅不能发图片,而且打字也都反应很慢,比起博客编 ...
- 十天学会DIV+CSS(WEB标准)
学习本系列教程需有一定html和css基础,也就是指您之前做过网页,会用表格布局.如果您刚开始学习网页制作,不知道什么是表格布局及html和css,建议您先去充电,否则学习本教程会非常吃力或者根本就听 ...
- DIV+CSS技术的研究
第一章 DIV+CSS技术的基础知识 第一节DIV+CSS的基本概念 DIV+CSS是网站标准(或称"WEB标准")中常用术语之一,通常为了说明与HTML网页设计语言中的表格(ta ...
- html网页设计制作大作业(div+css)个人博客(1个页面)
临期末的,有好多web新手的小伙伴们很是发愁,网上找吧 要么付费的,要么就很复杂,根本就不像自己能做出来的.看了我这个资源或许就可以解决你这个问题喽! 作品介绍: 1.网页标题:绿色清新个人博客div ...
最新文章
- React学习笔记4: React脚手架配置代理
- Oracle-等待事件解读
- Redux之compose
- 基于 Apache Hudi 构建流批一体系统实践
- word文档打印 自动编码_办公室文件打印有哪些技巧 办公室文件打印技巧介绍【图文】...
- JAVA WEB框架的错误体系
- 矩阵转置(信息学奥赛一本通-T1126)
- python的学习之路
- bzoj 4026 dC Loves Number Theory(主席树)
- Thrift原理简析
- step7支持linux,STEP7 V5.4版本要求的操作系统-工业支持中心-西门子中国
- 乐高叉车wedo教案_15乐高教育wedo编程机器人手臂教案
- 数据仓库、LODP、OLAP
- 启明星辰潘柱廷:信息安全市场的战国春秋与陆地海洋观
- B站手艺人又在刷新年轻人的见识
- 专访李云:从通讯行业的架构师到互联网“新兵” 李云csdn
- Linux内核固定虚拟地址映射
- Group BOM 和BOM group
- 2021ICPC欧洲东南部区域赛题解ACFGJKLN
- 重学MySQL(InnoDB Buffer Pool是什么?)