深山老林

[原]九宫格生成脚本 -- GNineBox v2.1

2007-01-08 | Tag：原创 JScript

GNineBox的2.1版本，支持Opera。

/* =================== GNineBox v2.1 ===============================
GNineBox("jgClass")
GNineBox("类名")

功能说明：
GNineBox是一个生成九宫格的程序。也可用于制作圆角。

版本更新历史：
v2.1：支持Opera。
v2.0：可通过CSS样式定义九宫格外框样式，实现表现跟内容分离。
（已知问题：不支持Opera）

版权信息：
本程序是自由程序，使用请保留本标注。

作者信息：
Ghost Zhang
Email:lovej1bz@gmail.com
QQ:22168741
ORG:www.WebReBuild.ORG www.CSSForest.ORG
Blog:http://forest.blogbus.com

使用说明：
只需要通过CSS样式定义要应该九宫格的class类的公共图片名称即可。
例：
定义样式：.gnb{background:url("gn.gif");}或
.gnb{background-image:url("gn.gif");}
只需要给出图片名称前面的公共名即可，如图片名分别为“gn_tl.gif”、
“gn_tm.gif”、“gn_tr.gif”，只要imgName定义为“gn”。
在页面最下面加入：<script type="text/javascript">GNineBox("GNB");</script>

GNineBox的样式的定义优先级如下：
标签级样式，如：<div class="gnb" style="background-image:url(gn.gif)">...</div>
文件级样式，如：<style type="text/css">.gnb{background-image:url(gn.gif)} </style>
外联样式，如：<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" media="screen" />

没有层级的关系，即.top .gnb{background-image:url(gn.gif)}与.gnb{background-image:url(gn.gif)}是相等的。
在文件级样式或外联样式中，最后的定义会被使用，即：
如果同时定义了.top .gnb{background-image:url(gn.gif)}和.gnb{background-image:url(gn2.gif)}
那么.gnb{background-image:url(gn2.gif)}会被应用。

注意：FireFox跟Opera对路径中的空格必须解析为%20。
如果background的image路径中出现空格，请将其改为%20，以确保路径能被正确读取。
如：
background-image:url(http://www.cssforest.org/trys/gninebox 2.0/bg.gif);
应该写为：
background-image:url(http://www.cssforest.org/trys/gninebox%202.0/bg.gif);
========================================================================*/

GNineBox 2.1Demo

下载GNineBox v2.1

GhostZhang 发表于00:53 | 阅读全文 | 评论 1 | 编辑 | 分享 0
[原]横排列表(li)的左右对齐

2007-01-03 | Tag：CSS 原创

之前解决的一个小问题，让横排的列表可以左右对齐。相关代码如下：

==================HTML==========================
<div class="overdiv">
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>
</div>
=================================================

==================CSS==========================
.overdiv{
width:290px;
height:300px;
overflow:hidden;
background-color:#436973;
}
.overdiv ul{
list-style:none;
width:320px;
height:auto;
}
.overdiv li{
float:left;
width:80px;
height:80px;
margin-right:25px;
margin-bottom:5px;
background-color:#83B1DF;
text-align:center;
line-height:80px;
}
=================================================

Demo

GhostZhang 发表于20:51 | 阅读全文 | 评论 2 | 编辑 | 分享 0
[原]九宫格生成脚本 -- GNineBox v2.0

2006-12-30 | Tag：JScript 原创

GNineBox v2.0终于发布啦，这个版本实现了表现跟内容分离，通过CSS的定义，即可改变九宫格的外框表现。谢谢在制作过程中给于帮助的和意见的各位朋友。特别鸣谢PJ的CSSDome。

/* =============== GNineBox v2.0 ==========
GNineBox("jgClass")
GNineBox("类名")

功能说明：
GNineBox是一个生成九宫格的程序。也可用于制作圆角。

版本更新历史：
v2.0：可通过CSS样式定义九宫格外框样式，实现表现跟内容分离。
（已知问题：不支持Opera）

版权信息：
本程序是自由程序，使用请保留本标注。

作者信息：
Ghost Zhang
Email:lovej1bz@gmail.com
QQ:22168741
ORG:www.WebReBuild.ORG www.CSSForest.ORG
Blog:http://forest.blogbus.com

使用说明：
只需要通过CSS样式定义要应该九宫格的class类的公共图片名称即可。
例：
定义样式：.gnb{background:url("gn.gif");}或
.GNB{background-image:url("gn.gif");}
只需要给出图片名称前面的公共名即可，如图片名分别为“gn_tl.gif”、
“gn_tm.gif”、“gn_tr.gif”，只要imgName定义为“gn”。
在页面最下面加入：<script type="text/javascript">GNineBox("GNB");</script>

GNineBox的样式的定义优先级如下：
标签级样式，如：<div class="gnb" style="background-image:url(gn.gif)">...</div>
文件级样式，如：<style type="text/css">.gnb{background-image:url(gn.gif)} </style>
外联样式，如：<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" media="screen" />

没有层级的关系，即.top .gnb{background-image:url(gn.gif)}与.gnb{background-image:url(gn.gif)}是相等的。
在文件级样式或外联样式中，最后的定义会被使用，即：
如果同时定义了.top .gnb{background-image:url(gn.gif)}和.gnb{background-image:url(gn2.gif)}
那么.gnb{background-image:url(gn2.gif)}会被应用。
==================================================*/

GNineBox 2.0Demo

下载GNineBox v2.0

GhostZhang 发表于01:41 | 阅读全文 | 评论 2 | 编辑 | 分享 0
[原]GNineBox v1.0发布

2006-12-08 | Tag：JScript 原创

也许你使用过我之前写的《[原]用DIV做九宫格》中的方法制作九宫格，不知你有没觉得，当要做几个不同样式的九宫格时，样式文件得COPY几份，间隔之类的得重新设置，会比较麻烦。懒人有懒福啦，自己写了个九宫格的脚本，用来生成九宫格，这样就不用去动那个慢慢变大的样式表啦。

============================GNineBox v1.0============================
GNineBox("JgId","JgWidth","JgHeight","JgImgPath","imgName","imgType")
GNineBox("对象"，"宽度"，"高度"，"图片路径"，"图片名"，"图片类型")

功能说明：
GNineBox是一个生成九宫格的程序。也可用于制作圆角。目前是1.0版本。

版权信息：
本程序是自由程序，使用请保留本标注。

作者信息：
Ghost Zhang
Email:lovej1bz@gmail.com
QQ:22168741
ORG:www.WebReBuild.ORG www.CSSForest.ORG
Blog:http://forest.blogbus.com

参数说明：
JgWidth:可以定义1～6个数值，以“|”分隔。分别将应用于6个宽，即：上左、
     上右、下左、下右、中左、中右。
  一个值：应用于所有宽；
  二个值：应用于上左右、下左右，中间为默认值20px；
  三个值：应用于上左右、下左右、中左右；
  四个值：应用于上左、上右、下左、下右，中间为默认值20px；
  五个值：应用于上左、上右、下左、下右、中左右；
  六个值：应用于上左、上右、下左、下右、中左、中右。
----------------------
JgHeight:可以定义1～2个数值，分别将应用于2个高，即：上、下。
  一个值：应用于上下；
  二个值：应用于上、下。
----------------------
JgImgPath:设置图片路径。为空表示当前目录。
----------------------
imgName:设置图片名称。为空表示于ID同名。
  只需要给出图片名称前面的公共名即可，如图片名分别为“gn_tl.gif”、
  “gn_tm.gif”、“gn_tr.gif”，只要imgName定义为“gn”。
----------------------
imgType:设置图片类型。默认为“gif”。

如：GNineBox("GNineBox","20px|23px|25px","25px","","box","gif")
=====================================================================

GNineBox Demo

下载GNineBox v1.0

GhostZhang 发表于13:40 | 阅读全文 | 评论 9 | 编辑 | 分享 0
个人站点筹备中

2006-12-04 | Tag：闲话闲说

当了这么久的网民，写了这么久的BLOG，却一直都没自己的个人站点，亏我还是做网站的呢，呵呵。

这次终于下定决心，买了域名空间，虽然现在工作很饱和，但还是很想自己搞个小站玩玩，在BUS里只能写写日志，很多东西都因为没有条件而玩不起来，还是有自己空间好点啊～哈哈。

不过才刚刚开始，真希望自己有足够的时间快点把它做完。(偷笑中……)

GhostZhang 发表于21:30 | 阅读全文 | 评论 1 | 编辑 | 分享 0
[原]边框样式的写法总结

2006-11-15 | Tag：原创 CSS 经验之谈

今天在群（CSS森林:30247792）里讨论了border的样式写法，发现border的写法还真是灵活，做了一下总结，希望对大家有用：

border : border-width || border-style || border-color

border是一个复合的属性，它可以同时定义上右下左四个边框，当四个边都是同个样式时可以使用，如：

=================CSS=================
border:1px solid #FF00FF。
=====================================

这是最简单的应用，如果四个边的样式不是相同的怎办？一般会有下面几种情况，写法差不多：

===============CSS===================
/*边框样式、宽度、颜色都不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #0000FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border-width:1px 2px 1px 1px;
border-style:solid solid double solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}

/*边框样式不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #FF00FF;
border-bottom:1px double #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:solid solid double solid;
}

/*边框宽度不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:2px solid #FF00FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF00FF;
}
.div2{
border-width:1px 2px 1px 1px;
border:solid #FF00FF;
}

/*边框颜色不同*/
.div1{
border-top:1px solid #FF00FF;
border-right:1px solid #0000FF;
border-bottom:1px solid #FF00FF;
border-left:1px solid #FF0000;
}
.div2{
border:1px solid;
border-color:#FF00FF #0000FF #FF00FF #FF0000;
}
=====================================

还有就是有些边框是没有的，比如只有底边：

================CSS==================
.div1{
/*错误的*/
border:none;
border-bottom:1px solids #FF00FF;
}
.div2{
border:1px #FF00FF;
border-style:none none solid;
}
=====================================

注意：
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四条边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

GhostZhang 发表于13:30 | 阅读全文 | 评论 1 | 编辑 | 分享 0
[原]用CSS画简单的圆角

2006-10-19 | Tag：原创 CSS

近来总看到圆角：有用图做的、用JS打出来的。不太愿意用，不过有时也是真的没办法，这里介绍一种用CSS画的简单的圆角，只用于抛砖引玉，大家可以再发挥。

----------------------------------------------HTML---------------------------------------------------------
<div class="bim212">

<div class="bim-t">
  <div class="bim-tt"></div>
  <div class="bim-tm"></div>
  <div class="bim-tb"></div>
</div>


<div class="bim-m">
  测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
</div>


<div class="bim-b">
  <div class="bim-bt"></div>
  <div class="bim-bm"></div>
  <div class="bim-bb"></div>
</div>

</div>
----------------------------------------------------------------------------------------------------------------

----------------------------------------------CSS---------------------------------------------------------
.bim212{
/*定义框大小*/
  width:auto;
  height:auto;
}
  .bim-tt,.bim-bb,.bim-tm,.bim-bm,.bim-tb,.bim-bt,.bim-m{
  /*定义框颜色*/
   border-color:#FF6347;
  }
  .bim-t,.bim-b{
  /*上部和下部*/
   width:auto;
   height:4px;
   font-size:0;
   line-height:0;
  }
   .bim-tt,.bim-bb{
    width:auto;
    height:0;
    margin:0 4px;
    border-top-width:1px;
    border-top-style:solid;
   }
   .bim-tm,.bim-bm{
    width:auto;
    height:1px;
    margin:0 2px;
    border-left-width:2px;
    border-right-width:2px;
    border-left-style:solid;
    border-right-style:solid;
   }
   .bim-tb,.bim-bt{
    width:auto;
    height:2px;
    margin:0 1px;
    border-left-width:1px;
    border-right-width:1px;
    border-left-style:solid;
    border-right-style:solid;
   }
  .bim-m{
   width:auto;
   height:auto;
   padding:3px;
    border-left-width:1px;
    border-right-width:1px;
    border-left-style:solid;
    border-right-style:solid;
  }
----------------------------------------------------------------------------------------------------------------

其实跟九宫格差不多，只是把上面两部分换成了圆角，不过想画不同的圆角，所用到的样式是不相同的，所以这个方法的灵活性不好，唯一的优点也许就是没用到图片跟脚本吧。:P

GhostZhang 发表于13:15 | 阅读全文 | 评论 0 | 编辑 | 分享 0
方向

2006-10-08 | Tag：随便想想

天啊，又开始找不到方向了。对自己信心不足，看来自己的目标还是不够明确……
近来看了一些朋友的小站，突然觉得自己的水平很菜，发现自己要学的东西好多，但不知从何学起。
方向？
又开始胡言乱语了……

GhostZhang 发表于14:36 | 阅读全文 | 评论 1 | 编辑 | 分享 0

共28页第一页上一页 1 2 3 4 5 6 7 8 9 10 下一页最后一页

搜索

[原]九宫格生成脚本 -- GNineBox v2.1

2007-01-08 | Tag：原创 JScript

[原]横排列表(li)的左右对齐

2007-01-03 | Tag：CSS 原创

[原]九宫格生成脚本 -- GNineBox v2.0

2006-12-30 | Tag：JScript 原创

[原]GNineBox v1.0发布

2006-12-08 | Tag：JScript 原创

个人站点筹备中

2006-12-04 | Tag：闲话闲说

[原]边框样式的写法总结

2006-11-15 | Tag：原创 CSS 经验之谈

[原]用CSS画简单的圆角

2006-10-19 | Tag：原创 CSS

方向

2006-10-08 | Tag：随便想想

个人资料

GhostZhang

文章分类

Tag

最新日志

最新评论

日历

链接

存档