欢迎来到福编程网，本站提供各种互联网专业知识！
手机版
微信关注
快捷导航
正则表达式
AJAX相关
黑客相关
相关技巧
Mysql
MsSql
MsSql2005
MsSql2008
MariaDB
Oracle
Access
SQLite
PostgreSQL
MongoDB
DB2
Redis
数据库文摘
数据库其它
LINUX
RedHat/Centos
Ubuntu/Debian
Fedora
Solaris
红旗Linux
Unix/BSD
苹果MAC
麒麟系统
注册表
BIOS
系统安装
系统进程
Fireworks教程
广告
商业广告，理性选择
网站首页
网络编程
数据库
操作系统
平面设计
网站运营
网络安全
电脑相关
手机学院
您的位置：
网站首页
>
网络编程
>
CSS/HTML
>
经验交流
用js实现的DIV+CSS编辑器代码
发布时间：2007-03-09 作者： 来源：转载
标签：
雪佛兰
通用
奢华
劳斯莱斯
旗舰版
64位
收藏夹
解调器
DIV+CSS编辑器在线DIV+CSS编辑器类/标签/ID：所有数值都不用输入单位;宽：高：背景色：前景色：边框：颜色：选择soliddottednonehiddendasheddoublegrooveridgeinsetoutset外间距Margin：如:10px2px内间距Padding：如:10px2px浮动：左右×显示：选择blockinli
<!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="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> </head><OBJECT id=dlgHelper CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0px" height="0px"></OBJECT> <body> <p align="center"> 在线DIV+CSS编辑器 </p> <p style="TEXT-INDENT: 2em"> 类/标签/ID：<input name="vcssIdentName" id="vcssIdentName" value=".style1" class="normal_input" onmouseover="select();" onMouseOut="event.cancelBubble=true;this.className='normal_input';" /> 所有数值都不用输入单位; 宽：<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)" /> 边框：<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> 外间距 Margin ：<input name="vcssMargin" type="text" onKeyDown="if(event.keyCode==32)this.value+='px';" class="normal_input" id="vcssMargin" value="" size="20" /> 如:10px 2px 内间距 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 浮动： 左<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='';" /> × <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='';" />× <input name="vcssVisibilityResult" type="hidden" /> 文本对齐：<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" /> 文本：<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='';" />× <input name="vcssDecorationResult" type="hidden" /> 背景图片：<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> 水平位置：<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> 垂直对齐：<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> 定位：<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" /> 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='';" />× <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> <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="载入.."> <fieldset style="padding:10px; "><legend>实际应用效果如下</legend> Effect of This Rule Shows You at here! 工具啦 （www.tool.la） 给你最全、最好的工具！ </fieldset> </p> <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，你可以使用获取CSS来获取这个CSS <input type="button" id="vcssView" onclick="getSelectionWithCss();setSelectionWithCss()" value="获取左侧DIV样式"> </body> </html>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
上一篇：
css条件注释理论及实践源文件
下一篇：
关于《精通css》之几个不错的注意事项
广告
商业广告，理性选择
相关推荐
图片下面出现空白像素BUG的常用解决方法归纳
cookie解决微信不能存储localStorage的问题
学习小实例--滚动条的简单实现
HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)
CSS3实现动态翻牌效果 仿百度贴吧3D翻牌一次动画特效
《CSS3实战》笔记--渐变设计（一)
《CSS3实战》笔记--渐变设计（二)
《CSS3实战》笔记--渐变设计（三)
CSS 使用Sprites技术实现圆角效果
手机屏幕尺寸测试——手机的实际显示页面的宽度
利用CSS3新特性创建透明边框三角
HTML实现title 属性换行小技巧
IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
CSS可以做的几个令你叹为观止的实例分享
告别AJAX实现无刷新提交表单
html小技巧之td,div标签里内容不换行
ie6,ie7,ie8完美支持position:fixed的终极解决方案
CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera
三个不常见的 HTML5 实用新特性简介
css代码优化的12个技巧
广告
商业广告，理性选择
文章分类
经验交流
基础教程
VML相关
热门关键词
雪佛兰
通用
奢华
劳斯莱斯
旗舰版
64位
收藏夹
解调器
网卡
网线
分辨率
家电
4k
显示器
header
USER_AGENT
色彩
图形
商业
生成
广告
商业广告，理性选择
热门文章
1
什么是Meta标签？ 哪些Meta标签对搜索引擎SEO优化有作用？
2
Mac设置VPN来登录youtube等国外网站的步骤
3
各大搜索引擎登录入口,网站收录入口
4
Openvpn在麒麟操作系统上的配置方法
5
联想笔记本BIOS设置图解中文详细说明
6
AMI BIOS设置图解教程+Award Bios设置全程图解
7
Mac怎么切换主显示器 苹果电脑Mac双显示器设置主显方法图解
8
分享最受美国人喜欢的十大搜索引擎
9
分享10个常见的SQL注入工具
10
mac系统中自带的邮件程序怎么添加qq邮箱帐号?
最新更新
无线路由器经常断线 故障解决
怎么在Mac上设置锁屏不待机
VHD和VHDX硬盘格式有什么区别?
关闭Aero Shake节约系统资源的方法
怎么更改Mac中的邮件字体大小
提高WIN7系统开机速度方法分享
Mac系统怎么更改用户登录密码
Mac上如何修改时间和日期
如何将常用应用固定至开始屏幕或任务栏
MySQL中replace into语句的用法详解（insert into 的增强版）
广告
商业广告，理性选择
网站首页
|
关于我们
|
免责声明
|
广告合作
|
联系我们
Copyright @ 2015-2024
福编程 fuphp
All Rights Reserved.
豫ICP备15036959号-4
