JS实现的marquee风格代码

垃圾文章凑合着看很一般还不错精品 (暂时没有评价)
Loading ... Loading ...

用到的东西，记录下，回头用的时候方便～

网页调用部分

  1. <script type="text/javascript">initTicker(document.getElementById("list-pmarquee"));</script>

css部分

  1. #list-pmarquee{ position:relative; width:864px; height:58px; overflow:hidden; border: 2px solid #F0F0F0; margin-top:10px; }
  2.   #list-pmarquee ul{ display:inline;}
  3.   #list-pmarquee li{ display:inline; margin:5px 5px 0 0; float:left; width:150px;}

JS部分

  1. function initTicker(container) {
  2.  mover = container.getElementsByTagName("ul").item(0);
  3.  
  4.  
  5.  // set
  6.  mover.style.position = "absolute";
  7.  mover.style.margin = "0 0 0 0";
  8.  mover.style.left = "0px";
  9.  mover.leftPosition = 0;
  10.  
  11.   // duplicate text
  12.   mover.style.width = 300 * 3 * 2 + "px";
  13.   mover.innerHTML += mover.innerHTML;
  14.  
  15.   // set action
  16.   mover.tickerAction = window.setInterval(
  17.    function()
  18.    {
  19.     if (mover.leftPosition * -1 > (300 * 3)) {
  20.      mover.leftPosition = -1;
  21.     } else {
  22.      mover.leftPosition -= 1;
  23.     }
  24.     mover.style.left = mover.leftPosition + "px";
  25.    }
  26.   , 30);
  27.  
  28. }
可乐发表于:08-05-08
| 没有评论

网页设计中的尺寸

垃圾文章凑合着看很一般还不错精品 (暂时没有评价)
Loading ... Loading ...

1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。
2、1024*768下，网页宽度保持在1002以内，如果满框显示的话,高度是612-615之间.就不会出现水平滚动条和垂直滚动条。
3、在ps里面做网页可以在800*600状态下显示全屏，页面的下方又不会出现滑动条，尺寸为740*560左右
4、在PS里做的图到了网上就不一样了，颜色等等方面，因为ＷＥＢ上面只用到２５６ＷＥＢ安全色，而ＰＳ中的ＲＧＢ或者ＣＭＹＫ以及ＬＡＢ或者ＨＳＢ的色域很宽颜色范围很广，所以自然会有失色的现象.
页面标准按800*600分辨率制作，实际尺寸为778*434px
页面长度原则上不超过3屏，宽度不超过1屏
每个标准页面为A4幅面大小，即8.5X11英寸
全尺寸banner为468*60px，半尺寸banner为234*60px，小banner为88*31px
另外120*90，120*60也是小图标的标准尺寸
每个非首页静态页面含图片字节不超过60K，全尺寸banner不超过14K
点击查看全文 »

可乐发表于:07-17-08
| 没有评论

CSS的渲染效率

垃圾文章凑合着看很一般还不错精品 (暂时没有评价)
Loading ... Loading ...

有几天没写东西也没转东西了。一来是生活太忙碌，二来是最近实在没啥可写的。

1.
十六进制的颜色值对位数与大小写

编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 - color:#f3a;
* 建议用 - color:#FF33AA;

2.
display与visibility的差异

他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
* 不赞成 - visibility:hidden;
* 建议用 - display:none;

3.
border:none;与border:0;的区别

和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
* 不赞成 - border:0;
* 建议用 - border:none;

4.
不宜过小的背景图片平铺

一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
* 不赞成 - 宽高8px以下的平铺背景图片
* 建议用 - 衡量适中体积及尺寸的背景图片

5.
IE的滤镜

IE的滤镜除了比较消耗资源外也有兼容性问题。当中有令PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。
* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用，最好选择其它方法能避免使用滤镜。
点击查看全文 »

可乐发表于:07-15-08
| 没有评论

简单的说下SVN的使用方法

垃圾文章凑合着看很一般还不错精品 (暂时没有评价)
Loading ... Loading ...

1. 下载 TortoiseSVN 1.3.5 在这里 http://tortoisesvn.tigris.org/
2. 安装并重启。
3. 在桌面上建立一个新文件夹，随便什么名字
4. 双击该文件夹并点 SVN Checkout.
5. 输入你要使用的SVN地址，比如 http://kaytwo.googlecode.com/svn/trunk/ 然后点击 OK
6. 然后会下载SVN内的内容。
7. 要下载最新版本的SVN, 只要右击这个文件夹 选择 SVN Update.
这是本地win环境下载和使用SVN的方法，用shell在Linux主机上可能还有别的方法。

因为用到了，顺带做个记录

可乐发表于:06-30-08
| 没有评论

LightBox周边效果

垃圾文章凑合着看很一般还不错精品 (暂时没有评价)
Loading ... Loading ...

“Lightbox”是一个别致且易用的图片显示效果，它可以使图片直接呈现在当前页面之上而不用转到新的窗口。
　　类似于WinXP操作系统的注销/关机对话框，除去屏幕中心位置的对话框，其他的区域都以淡出的效果逐渐变为银灰色以增加对比度，此时除了对话框内的表单控件，没有其他区域可以获取焦点

Lightbox JS2.0
典型也是最常见的一个

ThickBox
比较常见的，可以显示图片、网页，并且可指定方框的大小

Greased Lightbox
提供装在浏览器的扩展，平常看图片时就会有 Lightbox 效果


Lightbox Gone Wild
可以显示网页、图片等

可乐发表于:06-18-08
| 没有评论

书写高效的CSS

垃圾文章凑合着看很一般还不错精品 (1 人作出评论, 评价为: 3)
Loading ... Loading ...

样式系统是如何分类选择器的？
Mozilla 样式系统将规则主要分成四类。理解这个分类非常的重要，他是你了解规则匹配的第一步。下面我用了一个术语：关键选择符，指的是位于最右边的选择符。他可以是 id 选择符，class 选择符或者标签选择符。
ID 类
ID 选择符作为关键选择符

  1. button#backButton { } /* ID 类 */
  2. #urlBar[type="autocomplete"] { } /* ID 类 */
  3. treeitem > treerow > treecell#myCell :active { } /* ID 类 */

Class 类
Class 选择符作为关键选择符

  1. button.toolbarButton { } /* Class 类 */
  2. .fancyText { } /* Class 类 */
  3. menuitem > .menu-left[checked="true"] { } /* Class 类 */

标签类
标签选择符作为关键选择符

  1. td { } /* 标签类 */
  2. treeitem > treerow { } /* 标签类 */
  3. input[type="checkbox"] { } /* 标签类 */

通用类
所有其他的都属于此类

  1. :table { } /* 通用类 */
  2. [hidden="true"] { } /* 通用类 */
  3. * { } /* 通用类 */
  4. tree > [collapsed="true"] { } /* 通用类 */

样式系统是如何匹配规则的？
Mozilla 样式系统先从最右边的选择符开始匹配，然后由右及左，依次匹配。只要子树（？）继续检查，样式系统就会继续向左进行匹配，直到匹配成功或者因不匹配而退出。
你的第一步就是根据关键选择符的类型过滤选择器分类。目的就是过滤掉部分选择器，而不需要浪费时间去尝试匹配他们。这是增强性能的关键。你用来检查元素用的选择器类越少，样式系统解析地就越快。例如，如果你的元素有一个ID，那么只有符合元素ID的ID类会被检查；只有符合元素Class的Class类会被检查；只有符合元素标签的标签类会被检查；而通用类则总是会被检查。
点击查看全文 »

可乐发表于:06-17-08
| 没有评论

如何编写代码才能更有效率（编程同样适用）

垃圾文章凑合着看很一般还不错精品 (1 人作出评论, 评价为: 5)
Loading ... Loading ...

一、排版：
　　1.关键词和操作符之间加适当的空格。
　　2.相对独立的程序块与块之间加空行
　　3.较长的语句、表达式等要分成多行书写。
　　4.划分出的新行要进行适应的缩进，使排版整齐，语句可读。
　　5.长表达式要在低优先级操作符处划分新行，操作符放在新行之首。
　　6.循环、判断等语句中若有较长的表达式或语句，则要进行适应的划分。
　　7.若函数或过程中的参数较长，则要进行适当的划分。
　　8.不允许把多个短语句写在一行中，即一行只写一条语句。
　　9.函数或过程的开始、结构的定义及循环、判断等语句中的代码都要采用缩进风格。
　　10.C/C++语言是用大括号‘{’和‘}’界定一段程序块的，编写程序块时‘{’和
　　　‘}’应各独占一行并且位于同一列，同时与引用它们的语句左对齐。在函数体
　　　　的开始、类的定义、结构的定义、枚举的定义以及if、for、do、while、
　　　　switch、case语句中的程序都要采用如上的缩进方式。

二、注释
　　1.注释要简单明了。
　　2.边写代码边注释，修改代码同时修改相应的注释，以保证注释与代码的一致性。
　　3.在必要的地方注释，注释量要适中。注释的内容要清楚、明了，含义准确，防止
　　　注释二义性。保持注释与其描述的代码相邻，即注释的就近原则。
　　4.对代码的注释应放在其上方相邻位置，不可放在下面。
　　5.对数据结构的注释应放在其上方相邻位置，不可放在下面；对结构中的每个域
　　　的注释应放在此域的右方；同一结构中不同域的注释要对齐。
　　6.变量、常量的注释应放在其上方相邻位置或右方。
　　7.全局变量要有较详细的注释，包括对其功能、取值范围、哪些函数或过程存取它
　　　以及存取时注意事项等的说明。
　　8.在每个源文件的头部要有必要的注释信息，包括：文件名；版本号；作者；生成
　　　日期；模块功能描述（如功能、主要算法、内部各部分之间的关系、该文件与其
　　　它文件关系等）；主要函数或过程清单及本文件历史修改记录等。
　　9.在每个函数或过程的前面要有必要的注释信息，包括：函数或过程名称；功能描
　　　述；输入、输出及返回值说明；调用关系及被调用关系说明等。

三、命名
　　1.较短的单词可通过去掉“元音”形成缩写；
　　2.较长的单词可取单词的头几发符的优先级，并用括号明确表达式的操作顺序，避
　　　免使用默认优先级。
　　3.使用匈牙利表示法
点击查看全文 »

可乐发表于:05-29-08
| 没有评论

CSS中背景background-position负值定位深入理解

垃圾文章凑合着看很一般还不错精品 (1 人作出评论, 评价为: 4)
Loading ... Loading ...

CSS中背景定位background-position负值一直是不好理解的难点，一方面用的比较少，另一方面的理解的不够深入，今天花了点时间认真的思考了，把我的心得写出来．
下面是我要用到的一个背景图：

用如下代码测试

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
  3. <head>
  4. <style type="text/css" >
  5. <!--
  6. .style1,.style2,.style3{
  7. float:left;
  8. width:162px;
  9. height:162px;
  10. background:#CCCCCC url(http://www.52004.com.cn/wp-content/uploads/2008/05/1.gif) 0 0 no-repeat;
  11. border:1px dotted #999999;
  12. color:red;
  13. margin-right:10px;
  14. }
  15. .style2{
  16. background-position:-50px -50px;
  17. }
  18. .style3{
  19. background-position:100px 100px;
  20. }
  21. .blue{
  22. color:blue;
  23. }
  24. -->
  25. </style>
  26. </head>
  27. <body>
  28. <div class="style1">
  29. x:0,<span class="blue">y:0</span>
  30. </div>
  31. <div class="style2">
  32. x:-50px,<span class="blue">y:-50px</span>
  33. </div>
  34. <div class="style3">
  35. x:100px,<span class="blue">y:100px</span>
  36. </div>
  37. </body>
  38.  
  39. </html>

HTML页中是162*162的灰色背景DIV块并加入三种不同位置的背景图片，
在浏览器中看到的效果：
点击查看全文 »

可乐发表于:05-28-08
| 没有评论

随机大小图片居底居中显示

垃圾文章凑合着看很一般还不错精品 (1 人作出评论, 评价为: 5)
Loading ... Loading ...

做图片展示的时候用到过这类效果，但是没有用CSS写出来效果。今天突然想起来淘宝UED考试题里的一道题目是居底，居中。看了下代码，做了下修改就实现了我想要的结果。SNAKE同学用的是用另一种实现手段。
我改的：

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta name="Robots" content="index,follow">
  5. </meta><meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  6. </meta><meta name="keywords" content="">
  7. </meta><meta name="description" content="">
  8. <style>
  9. <!--
  10. .box { width:500px; height:500px; border: 1px solid #CCC; display: table-cell; *display: block; *font-size: 175px; vertical-align:bottom; text-align:center;}
  11. .box img{ vertical-align:bottom; }
  12. -->
  13. </style>
  14. <title></title>
  15. </meta></head>
  16.  
  17. <body>
  18. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:100px;height:100px;" /></div>
  19. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:150px;height:150px;" /></div>
  20. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:10px;height:100px;" /></div>
  21. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:100px;height:10px;" /></div>
  22. <div class="box"><img src="http://www.cnblogs.com/images/cnblogs_com/justinyoung/myPic/photo2006.jpg" style="width:50px;height:60px;" /></div>
  23. </body>
  24. </html>

SNAKE同学的
点击查看全文 »

可乐发表于:05-28-08
| 没有评论

js控制下拉框里超过文字变成省略号

垃圾文章凑合着看很一般还不错精品 (暂时没有评价)
Loading ... Loading ...

我们先建个测试页面，看看加长效果是如何的

效果图：

  1. < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb1231" />
  5. <title>测试</title>
  6. </head>
  7. <body>
  8.     <select id="a">
  9.         <option>下拉框里的字太多了，下拉框会变长，然后把版面挤乱了，多余的如何显示成省略号？</option>
  10.         <option>或者限制住下拉框的跨度也行？</option>
  11.         <option>style="width:100px;"</option>
  12.         <option>这种已经试过了，没用！</option>
  13.     </select>
  14. </body>
  15. </html>

这么长肯定会影响到布局的，那么改怎么办呢？
点击查看全文 »

可乐发表于:05-27-08
| 没有评论
Page 1 of 1112345下一页»...最后 »