JS轻松实现CSS设置,DIV+CSS常用CSS设置

早些时候见过一个鸟日本人写的DW中的样式设置http://www.99yp.com/uploads/200607/css/index.htm，写了一大堆的代码，靠，现在派不上用场，小鸽子写了一个更好的样式生成器，适合DIV+CSS架构的网页。
(在网吧做网页的朋友，可以使用这个呀！)将常用的样式写了出来，做成DW的扩展插件多好，麻烦高手把他做成DW的扩展插件：
小鸽子个人网:http://xbnz.126.com/[网址助记:新白娘子]

▒ 恋婷DIV+CSS编辑器 beta1.0

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

类/标签/ID：
所有数值都不用输入单位;

宽：
高：
背景色：
前景色：

边框：
颜色：

选择soliddottednonehiddendasheddoublegrooveridgeinsetoutset

外间距 Margin ：
如:10px 2px

内间距 Padding：
如:10px 2px

浮动： 左
右
×

显示：
选择
block
inline
none

可见：可见
隐藏
×

文本对齐：
选择
left
center
right

行高：

%
无
px

文字缩进：

文本：
字体：
选择宋体黑体Arial雅黑
粗细：
效果：下划线
无
×

背景图片：
重复：选择横向重复纵向重复不重复

水平位置：
垂直位置：
附件：选择固定滚动

垂直对齐：
选择
middle
bottom
top
auto
baseline

清除：
选择
left
right
both

Overflow：
选择
scroll
auto
hidden

定位：
选择
绝对
相对

Z坐标：
left:
top:
right:
bottom:

UL列表：类型
选择
none
disc
circle
square
decimal

图像：

位置：内
外
×

光标：

选择
默认
手
文本
移动
crosshair
default
pointer
hand
move
help
wait
text
w-resize
s-resize
n-resize
e-resize

实际应用效果如下

Effect of This Rule Shows You at here!

[中國最Q小鴿子·最愛丁香花] http：//xbnz.126.com


这是一个使用了复杂的样式的DIV，你可以使用获取CSS来获取这个CSS

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 又一实用的常用CSS缩写语法收集

    又一实用的常用CSS缩写语法收集

    为什么要进行CSS缩写? 在进行WEB标准网页设计时,必不可少的是写入大量的CSS语法,一般情况下我们可以通过Dreamweaver软件的"CSS样式"面板自动生成相应的CSS代码. 不过虽然软件生成的CSS代码阅读清晰易懂,但就是由于CSS对条条样式定义的清晰解释,也就使得CSS代码阅读显得冗长复杂,同时CSS代码的字节数也在增加--这对于追求高效率和完美性的人来说,是很难容忍的. 比如我们在给某元素定义填充大小时,使用到padding,当对上.右.下.左填充有不同要求时,软件生成的

  • JS+CSS实现Div弹出窗口同时背景变暗的方法

    本文实例讲述了JS+CSS实现Div弹出窗口同时背景变暗的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现的Div弹出窗口,同时背景变暗</title> <script>     function    locking(){      document.all.ly.style.display="block";      document.all.

  • Query常用DIV操作获取和设置长度宽度的实现方法

    Query常用DIV操作获取和设置长度宽度的实现方法

    获取或设置div的高度和宽度 方法一:height和width函数(得到的是证书),可以用于获取或设置元素的高度和宽度. val()获取或设置元素的值 方法二:css函数可以用于获取或设置元素的高度和宽度 获取css("width")(得到的是以px结尾的字符串),设置css("width",20px)或css({width:20px,height:20px}) JQuery的链式操作 <!DOCTYPE html PUBLIC "-//W3C//D

  • js获取某元素的class里面的css属性值代码

    js获取某元素的class里面的css属性值代码

    用js如何获取div中css的 margin.padding.height.border等.你可能说可以直接用document.getElementById("id").style.margin获取.但是你说的只能获取直接在标签中写的style的属性,无法获取标签style外的属性(如css文件中的属性).而下面方法则两者值都可以获取.实例效果图如下: js在获取css属性时如果标签中无style则无法直接获取css中的属性,所以需要一个方法可以做到这点.getStyle(obj,at

  • jQuery使用CSS()方法给指定元素同时设置多个样式

    本文实例讲述了jQuery使用CSS()方法给指定元素同时设置多个样式的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $(

  • CSS将div内容垂直居中案例总结

    CSS将div内容垂直居中案例总结

    一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果. 二.内边距(padding)法 另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用padding将内容垂直居中,比如: p { padding:20px 0

  • js控制不同的时间段显示不同的css样式的实例代码

    js函数,可以放到单独的js文件中也可以放到当前页的<head>标记之内 复制代码 代码如下: function getCSS(){        datetoday = new Date();        timenow=datetoday.getTime();        datetoday.setTime(timenow);        thehour = datetoday.getHours();        if (thehour<12)            disp

  • js动态设置div的值下例子

    复制代码 代码如下: <!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> <meta http-equiv=&qu

  • JavaScript动态设置div的样式的方法

    有时候需要根据需要动态设置div的样式,当然对于稍有经验的javascript开发者来说,这一切都是那么的简单,但是对于初学者或者说没有相关经验的开发者来说可能就是一个不大不小的难关,下面就通过实例简单介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&quo

  • 使用JS轻松实现ionic调用键盘搜索功能(超实用)

    这个需求是产品提的,一开始只是设置了 <input style="padding-top: 3px;" type="search" placeholder="搜索医生或医院" ng-model="query"> type="search" 发现android上可以ios调取不出search健来,气死我了,经过google的搜索得到结论,需要在外面套用一个form表单,于是加上果然好使而且结合了f

随机推荐