三心二意 | 关注web标准

图片和窗口自适应大小代码

Wed, 24 Aug 2005 19:42:00 +0800

我的1234

Wed, 10 Aug 2005 06:06:00 +0800

工作忙,时间少,学习刘韧的1234.

1.期待中的"麦莎"就这样悄悄的过去了,也许应该庆幸,可是心里也有点失落.毕竟想看看十年以来的最大暴雨是怎么样的.

2.今天一整天在做老舍茶馆的内容校对工作,有点晕.发现还是出DEMO比较好.

3.说句过时的话,看了一半<七剑>,才发现其实<英雄>也不错.

4.发现自己找个好老婆,庆幸中.

和MM照了大头贴~

Sun, 31 Jul 2005 05:19:00 +0800

FLASH,我来了|@三心二意·关注WEB标准

Mon, 11 Jul 2005 04:42:00 +0800

7/10/2005

使用外部CSS设置FlashMX组件外观|@三心二意关注WEB标准

Mon, 11 Jul 2005 02:57:00 +0800

我们都知道可以轻松的设置 Flash MX 2004 组件的外观，但是如果能用一个外部的 CSS 文件来控制，岂不是更好，使用起来就会更加的方便。这里是在网上发现的一个例子（原文网址： http://blogs.flashsupport.com/robert/archive/2004/09/08/209.aspx ）：

1. 创建一个 CSS 文件，定义组件的一些属性，如： /* Filename: styles.css */

checkbox { 
  color: 0x0000FF; 
  embedFonts: false; 
  fontFamily: Arial;
  fontSize: 24; 
}

2. 在 Flash 中载入这个 CSS 文件，将组件套上相关的样式：

import mx.controls.CheckBox; 
  var oStyle:Object; 
  var ccbTest:mx.controls.CheckBox; 
  var styles = new TextField.StyleSheet(); 
  styles.onLoad = function(bSuccess:Boolean):Void { 
   if (bSucess) { 
      oStyle = this.getStyle("checkbox"); 
      for(var i in oStyle){ 
        ccbTest.setStyle(i, oStyle[i]); 
      } 
    } else { 
    trace("Error loading CSS file."); 
  } 
}; 
styles.load("styles.css");

在DIV+CSS排版中新闻列表的制作方法 | @ 三心二意·关注WEB标准

Fri, 08 Jul 2005 06:12:00 +0800

最终效果:

2005年5月30日新闻标题01
2005年5月30日新闻标题02
2005年5月30日新闻标题03
2005年5月30日新闻标题04

CSS代码:

.list{
	margin: 0px 10px 20px;
	text-align: left;	
}

.list ul{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.list li{
	background: url(/news/images/line.gif) repeat-x bottom; 
	/*列表底部的虚线*/
	width: 100%;	
}

.list li a{
	color: #777777;
	display: block;
	padding: 6px 0px 4px 15px;
	background: url(/news/images/dot.gif) no-repeat 0 6px;
	/*列表左边的箭头图片*/
}

.list li span{
	float: right;/*使span元素浮动到右面*/
	text-align: right;/*日期右对齐*/
}

.list li a:hover{
	color: #336699;
	background: url(/news/images/dot2.gif) repeat-x bottom;
}

注意:span一定要放在前面,反之会产生换行

<ul class="list">
<li><span>2005年5月30日 </span><a href="#">新闻标题01</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题02</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题03</a></li>
<li><span>2005年5月30日 </span><a href="#">新闻标题04</a></li>
</ul>

美编基础 | @ 三心二意·关注WEB标准

Thu, 07 Jul 2005 08:28:00 +0800

以下是我们谈到的主要的十点.对我们做美编都有帮助,尤其像我这样的新手. 1.提案一个有经验的设计师,在给客户交稿时,至少会准备三种样子供他选择: 第一:100%自已喜欢的风格,把自我发挥到极至. 第二:50%自己喜欢,50%客户喜欢的风格,各让一半,互相妥协. 第三:0%自己喜欢,完全从客户的要求出发,放弃自己的风格. 有上述三种准备,交稿时,你往往过的会很从容. 没有经验的新手,只给客户一个提案.

实时切换CSS样式 | @ 三心二意·关注WEB标准

Thu, 07 Jul 2005 07:28:00 +0800

　　用W3C标准建造的网站，从理论上来说可以做到完全的表现与结构相分离。打个比方，就是可以在不动骨架（结构，XHMTL）和肌肉（行为，Javascript）的前提下，彻彻底底地换一身皮（表现，CSS）。

　　当然，换皮之前你需要先按W3C标准建好你的网站，并且为它准备两套表现不一样的CSS。“换皮”实质上就是“换CSS”，我们要做的，只是用某种方法让浏览器载入另一套CSS，重新渲染页面。方法有很多种，我就介绍最常见的三种。

方法一：什么也不干

　　啊？什么也不干？嗯，这个……准确地说是：就干那么一丁点儿（你还真以为有这么好的事儿呀……）。

　　假设我们有两套CSS，分别封闭在两个不同的文件中：a.css和b.css。然后在<head>和</head>之间加入如下两行XHTML代码：

<link rel="stylesheet" type="text/css"
 title="主题A" href="a.css" />

<link rel="alternate stylesheet" type="text/css"
 title="主题B" href="b.css" />

　　然后用你的Firefox打开这个页面，在菜单栏中选择：查看 -> 页面风格，应该可以看到如下的“风景”：

　　就这么简单，现在你就可以用Firefox来“换皮”了。IE？IE没这个功能……MS就是这么拽，W3C“明文推荐”：要求浏览器提供给用户自己选择样式表的权力，可它就不这么干。幸运的是这件事也不是太难杂，咱就代劳一下吧。

方法二：Javascript

　　在方法一的基础上，可以用Javascript的DOM方法访问link对象，再将不需要的CSS设为“禁用（disabled）”，剩下的CSS就会被浏览器用来渲染页面。脚本如下，请注意其中的注释：

<script type="text/javascript">
function setStyle(title) {

  //预定义变量
  var i, links;

  //用DOM方法获得所有的link元素
  links	= document.getElementsByTagName("link");
  
  for(i=0; links[i]; i++) {

    //判断此link元素的rel属性中是否有style关键字
    //即此link元素是否为样式表link
    //同时判断此link元素是否含有title属性
    if(links[i].getAttribute("rel").indexOf("style") != -1
	 && links[i].getAttribute("title")) {

      //先不管三七二十一把它设为disabled
      links[i].disabled = true;

      //再判断它的title中是否有我们指定的关键字
      if(links[i].getAttribute("title").indexOf(title) != -1)

        //如果有则将其激活
        links[i].disabled = false;
    }
  }
}
</script>

　　然后在合适的地方调用这个函数，以本页为例，添加如下两个按钮：

<input type="button" value="清光" onclick="setStyle('清光');" />
<input type="button" value="冥焰" onclick="setStyle('冥焰');" />

　　试试效果：

　　使用Javascript的好处是方便、快捷、简单，缺点也是很明显的：很难做到全站的CSS切换，只能局限在当前页上。为了记忆用户的选择，可行的方案就是采用cookie。可是就算使用cookie，也需要在何时载入CSS，用户没有Javasciprt支持怎么办等问题上多做好些文章。所以不如用下面的方法——

方法三：服务器端脚本

　　毫无疑问，最好的CSS切换器应该使用服务器端脚本（PHP、ASP、JSP等）来开发。这样做的好处是很明显的：直接、高效、兼容性好、可以记忆用户选择、甚至可以组合不同的CSS实现相当复杂的“皮肤”切换。

　　我这里就用PHP为例，用其他的语言也都大同小异，对一般的开发人员来说不会有任何困难。

　　基本思路是这样：用户选择一种“皮肤”，把用户的选择记入cookie（记入数据库也一样，不过这样系统开销会大一些），用户访问网站上的任何一个页面时，再从cookie（或数据库）中读出之前用户的选择，载入相应的CSS文件（这里还是以方法一中讲到的a.css和b.css为例）。

　　创建一个名为switcher.php的文件，内容如下：

<?php
$style = $_GET["style"];
setcookie('style',$style,time()+31536000,'/','.site.com','0');
header("location:".$_SERVER['HTTP_REFERER']);
?>

　　这段脚本先读取query数据，然后把参数style的值记入cookie，最后返回上一页。接下来我们就可以创建两个用于切换样式的链接了，并且放在合适的页面上，比如首页或用户管理后台（注意把其中的site.com换成你的域名）：

<a href="switcher.php?style=a">主题A</a>
<a href="switcher.php?style=b">主题B</a>

　　点击任意一个链接，相应的就会把“a”或“b”记入cookie，然后就需要一段脚本来读取这个cookie值并且输出XHTML来引入对应的CSS：

<?php
	if(isset($_COOKIE["style"])){
		$style	= $_COOKIE["style"];
	}else{
		$style	= "a";//默认采用主题A
	}
?>
<link rel="stylesheet" type="text/css"
 title="当前选择的主题" href="<?php echo $style ?>.css" />

　　每一个需要切换样式的页面都要加上这段代码，所以直接把它加入网站的头文件中就行了。当然你可以根据自己的需要修改这个脚本，但万变不离其宗，总的思路应该是不变的。本站就是用这种方式做的CSS切换器，你可以在首页右侧的搜索框下面找到，have a try^_^。

上班族创业指南

Thu, 30 Jun 2005 21:06:00 +0800

这是一个创业的时代，想自己创业做老板的人越来越多，其中也包括众多上班族。所碰到的问题：时间紧、资金有限、经验缺乏、患得患失，是几乎所有想自主创业的上班族都会遇到的问题。针对这些问题，我们的建议是：采取有针对性的措施。

措施一：我要兼职，我要兼职！

对于不想冒任何风险而又想尝一尝创业滋味的上班族来说，不妨先尝试一下兼职。目前在北京、上海、广州等大城市，上班族做兼职是一种常见现象。兼职职位有高有低，需要根据各人的能力、机遇而定。不过，不管任何兼职，都可以锻炼能力、积累经验，同时还可以积累一定量的资金，又不占用上班时间，不用放弃目前的工作，正好能够弥补想创业的上班族的短板，可谓一举两得的好事。但是上班族在选择兼职的时候，一定要注意与自己的特长和未来发展的方向相结合。兼职是为了缩短自主创业的距离，缩短从打工者到老板的距离，如果陷入到为兼职而兼职，为眼前的一点蝇头小利斤斤计较，而忘记了对自己能力的锻炼和资源的积累，那就有点得不偿失了。

措施二：我要朋友，我要朋友！

充分利用在工作中积累的资源和建立的人脉关系。这是上班族的一个特点，也是上班族的一个优势，学会充分利用在工作中积累的资源和建立的人脉关系进行创业，可以大大减少创业风险。《科学投资》采访过一位朋友，原来在北京一家大的电脑图像制作公司工作，在工作中与很多小的电脑图像公司、报社、杂志社、电视台、电视节目制作公司建立了关系，积累了人脉。时机成熟后，这位朋友辞去了原来的工作，自己成立了一个电脑图像工作室。因为相当于原来工作的延续，无缝衔接，这位朋友几乎没有冒任何风险，便踏上了成功之路。现在这位朋友的工作室生意很红火。但是在这方面要注意的是，不能将个人生意与单位生意搞混淆，将工作秩序搞颠倒，甚至只要是有利可图的生意就归自己，而无利可图或者亏本的生意就归单位，这样做不仅要冒道德上的风险，而且很有能会受到法律的制裁。另外，要区分清楚主业、副业，不能因为自己的创业活动影响单位的工作。

措施三：我要创业，我要创业！

选择合适的合伙人进行创业。有些上班族没有时间自己进行创业，但可以提供一定的资金，或者拥有一定的业务经验和业务渠道，这时候就可以寻找合作伙伴一起进行创业。与合作伙伴一起进行创业需要注意的事项是：责、权、利一定要分清楚，最好形成书面文字，有双方签字，有见证人，以免到时候空口无凭。更不能等到赚钱了再说。我们看到无数合作创业的伙伴，在公司没有赢利之前，双方都能够和谐相处、和和气气，一旦公司赚了钱，矛盾便开始出现，有时一发而不可收拾。这就是大多数合伙企业，开始热热闹闹，中间打打闹闹，最后一败涂地的原因。

措施四：我要项目，我要项目！

找准好的项目。春节期间《科学投资》记者采访了一位朋友。这位朋友在上海的一家台资企业工作，妻子在一家大型电器公司当推销员。这位朋友手头有一定积蓄，又不愿放在银行里吃息，因为银行利息太低(眼下已是负息)。从去年6月起，他瞅准时机，在上海吴淞码头开了一家拉面馆，后来连开了4家。现在这4家拉面馆每月能为他带来2万多元的收入，远超过其打工的薪水。这位朋友说，其实很简单，他看准了地方，出钱盘下店面，请了几个人来开店，设了一个店长，工资要高些，其他人按市场行情走，每月几百元外带吃祝他只要每个星期到店里走一趟，盘盘帐。因为店小，帐目很简单，无非是进货、出货。进货，就是这个星期买了多少钱的面粉、买了多少钱的牛肉、蔬菜；出货，就是这个星期消耗了多少面粉，消耗了多少钱的牛肉、蔬菜；卖了多少钱，将中间差价一算，刨除房租、水电、税费及人员工资，就是他赚的钱。既省心省力，又不花时间。类似这样的项目，非常适合想创业的上班族。关键是你要开动脑筋，时刻留心，四处留心。另外，就是该下手时就下手，不能犹犹豫豫。大家都在找机会，机会来了你不下手，一眨眼机会可能就被别人逮跑了。

前不久，有台湾机构调查上班族最热衷的创业项目，一共有10个，分别是：摆地摊卖服装饰品，占20.81%;炸鸡排、咸酥鸡等小吃摊，占18.78%;咖啡店占16.63%；网络上开设店铺，占15.54%；便利商店，占15.32%;饮料冰品店，占14.15%；连锁加盟餐饮，占13.11%；语言补习班，占11.96%；升学补习班，占11.62%；瘦身美容用品或服务，占11.22%。这10个项目都有一个共同的特点，就是投资较少，另一个特点是管理相对简单，不需要创业者长年累月、耗时费力地盯在那里。

措施五：我要代理，我要代理！

做一个好的产品代理也不错。现在翻开报纸、杂志，到处是寻找产品代理的广告。有些人对此类广告抱着本能的排斥心理，以为都是骗子，其实并非如此。这里同样隐藏着一座座金山，关键是你要有眼光。选择产品代理，最重要的是看清代理产品的发展前景。成熟的产品是不需要满世界打广告来寻找代理的，不打广告也会有许多代理人找上门来。打广告招代理的产品，一般都是尚处于市场拓展阶段的新产品，因而如何判明产品的市场前景，也就是产品之于代理商的“钱”景，是一门学问。这里有几条原则可供参考：其一，就是尽量不做大公司和成熟产品的代理，因为这类产品一般市场稳定，但利润空间小，条件苛刻，非实力雄厚者不能承受，上班族更难以问津。

其二，选择产品，必须是真材实料的，必须是正规企业生产的，最好经相关部门认证的有合法手续的产品。其中是否存在市场，可由其产品的功能和广告支持力度来判断。

其三，产品的独特性与进入门槛要高。有些产品很好，但太容易仿造，结果市场一打开，跟风者一哄而上，市场很快又垮掉，这时候最吃苦的除了厂家，就是代理商，这样的例子我们见过很多。产品的独特性如何，是否容易仿造，可以根据产品原材料的来源是否珍息独有，产品的技术含量等等来判断。

其四，最好直接与生产厂家接触，而不要做二手甚至三手的代理商，除非生产厂家有特殊要求。如果打算做二手、三手代理商，那么，一要考虑上级代理商留给你的利润空间是否足够，二要考虑上级代理商的人品与信誉，三要考虑上级代理商与生产厂家的关系。上级代理商人品不好，信誉不佳，很可能在你打开市场局面后将你丢掉，以便独食其利；上级代理商与生产厂家关系不好，厂家炒掉上级代理商，也很可能会使你前功尽弃。总之，在这个问题上，要抱一种“害人之心不要有，防人之心不可无”的态度

几个AS

Thu, 30 Jun 2005 00:52:00 +0800

原文地址：http://www.flash8.net/bbs/dispbbs.asp?boardID=1&ID=133130

**********************************************

1.复制MC并随机设定子MC的相关属性：

duplicateMovieClip("mc","mc"+i,10+i);
setProperty("mc"+i,_x,random(400) );//x坐标
setProperty("mc"+i,_y,random(300) );//y坐标
setProperty("mc"+i,_alpha,random(100) );//透明度属性
i++;
if(i>200){//设定复制的个数；
i=1;
}
**********************************************

2.文字的逐个出现（打字效果）

Frame1:   text="引号内是要出现的字";
                ll = text.length;// 表示text文本的字符数；
                i = 1;//用于控制输出的变量；

Frame4:
                if (i<ll+1) {
        text1 = text.substring(0,i);//从第0个字符开始抽取显示，抽取长度为i；
                        i++;
                        }
********************************************

3.冒泡法排序：
      for(i;i<n;i++){ //外层循环；
           for(j=n;j<=i+1;j--){//内层循环；
              if(a[j]<a[j-1]){
                   temp=a[j];
                    a[j]=a[j-1];
                    a[j-1]=temp;//交换位置；
                    }

*******************************************

4.插入法排序（算法复杂性比冒泡法要小）：
                  for(i=2;i<=n;i++){
                             j=i;
                            if(a[j]<a[j-1]){
                                   temp=a[j];
                                   a[j]=a[j-1];
                                   a[j-1]=temp;
                                   j--; }
                                }

*******************************************

5.一个按钮控制声音的播放与停止：
                      on(release)
                          {a=a+1;
                               if(a%2==1){//奇偶判断；
               mysound.stop();
              _root.b=int(ji.position/1000);//记录下停止时播放的位置；
     }
   else{ mysound.start(_root.b);//从上一次停止的位置开始继续播放；
       }
}

***********************************************
6.MC以恒定速度旋转

        onClipEvent (enterFrame) {
               _rotation +=6;//设定每次的旋转角度值；
               }

day 是保留字 | @欣有鱼而米粒不足

Mon, 27 Jun 2005 20:33:00 +0800

记住，在设计的时候不要给id赋予“day”的名字，在Firefox下正常，但IE却解析错乱。至今发现的问题是，会导致连接不正常。比如这段代码：


<li><a href="calendar.php" id="day">日</a></li>

本来连接应该是calendar.php,但是，在IE下，我的测试是奇怪的32，不知何故，只能解读为day是IE的保留字，或者说是一个bug。谁能帮我向MS BugZilla一下呢？我希望IE7不会出现这个问题。

!important和(空格)/**/:的组合技巧|@欣有鱼而米粒不足

Thu, 23 Jun 2005 22:40:00 +0800

先温习一下对于IE的box-model的破解
IE box-model这个臭名昭著的bug存在于IE6/Win以前的每一只版本，这个虫子直到tantak发布了流传最为广泛的那个hack才开始被驯服

http://www.tantek.com/CSS/Examples/boxmodelhack.html
IE5.X/win对box-model的解析是一样的，他们认为width包括了边框(border)和补白(padding)，幸运的是这个情况在IE6中有了好转
但是IE6在向后兼容的同时也包容了以前的错误，IE6其实有两个核心，在旧的页面前他仍旧表现出对错误的宽容，只有在文档中严格地加上文档类型
(DOCTYPE)声明，IE6才能够接受正确的box-model
所以，tantak的hack必须和正确的DOCTYPE同时包含在文档中才能够正常工作 .

div.content {
    width:400px;                //这个是错误的width，所有浏览器都读到了
    voice-family: "\"}\"";            //IE5.X/win忽略了"\"}\""后的内容
    voice-family:inherit;
    width:300px;            //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content {        //html>body是CSS2的写法
    width:300px;                //支持CSS2该写法的浏览器有幸读到了这一句

现在回到主题，我们经常看到!important和(空格)/**/:组合在一起使用，这个写法有什么奥妙呢？

看刚才那个写法，我这里可以提供另一种写法也能达到这样的效果

div.content {
    width:300px !important;        //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
    width(空格)/**/:400px;        //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了
旧的，因为!important标记对他们不起作用
}
html>body .content {        //html>body是CSS2的写法
    width:300px;                //支持CSS2该写法的浏览器有幸读到了这一句
}

同样，这个方法仍必须依靠正确的文档类型声明才能够正常工作，原因在前面已经说过。

文档类型声明就像一个开关，打开向后兼容的未来，而错误使用的话，就是一个Pandora box.
}

控制ul | @欣有鱼而米粒不足

Thu, 23 Jun 2005 09:14:00 +0800

如何很好地控制ul标签呢？

作为列表例如

显示如下

test

可以在ul标签上设置 margin 属性来控制圆点的间距。

让圆点不过行，则使用inline删行规则

表格如何用样式表定义 | @欣有鱼而米粒不足

Thu, 23 Jun 2005 09:13:00 +0800

table 在样式表里定义

前阵子在研究时发现：

表格的 border="0" 可以定义为 border-style: none ，因为边框为0，也就是不要边框。表格默认是没有边框的，也可以不定义。

表格的 cellspacing="0" 可以定义为 border-collapse: collapse，至于原因看看样式表手册 2.0

表格的填充 cellpadding，这时我一直没办法定义，因此想了一下，忽然觉得 padding 就是填充，那么表格的填充实际上是 td 的 padding

样式表如下：

table { border-collapse: collapse; border-style: none }
td { padding: 0 }

网页代码如下：

<table><tr><td>hihi,tesion</td></tr></table>

原来的代码：

呵呵...end! :)

鼠标经过图片交换图片 | @欣有鱼而米粒不足

Thu, 23 Jun 2005 09:10:00 +0800

没事对浏览器特性研究了一下，用样式表来实现鼠标经过图片，点击图片交换图片。

怎么做？我想如果IE浏览器最简单不过了，但换作Mozilla,FireFox...那可真是一个头疼的问题。

为了适应任何浏览器，我在这里只做简单介绍，假设我有两张图片，宽为：93px 高为：45px

样式表

.m1 {
background: url(../images/01.jpg); width: 93px; height: 45px;
/* Mozilla, height+14 */ padding:0 45px 31px 48px!important;
padding: 0
/* tesion design */
}
.m1:hover{ background: url(../images/01on.jpg) }

url(../images/01on.jpg) 这里图片为你图片的实际路径

html里是这样的

自己试试？如何？是不是很简单？

/* Mozilla, height+14 */ padding:0 45px 31px 48px!important; padding: 0

这句话的作用在此简单解说一下！

Mozilla,FireFox 都是 mozilla 这家人的，所以随便用一个测试就可以了。

height +14，相信大家也明白我的注释意思了吧？高+14，在 mozilla 浏览器里。IE可以直接定义a属性的width和height，但mozilla好象不起作用？那么，用内填充padding来撑大，但撑的同时，IE已经定义了width和height，那就不能让IE错乱了吧？刚好!important声明起作用了。由于IE浏览器对该声明并不在乎，也就是说，样式默认是读最后一个的，因此我们让MOZILLA读第一个padding设置，IE读第二个。

padding顺序：上,右,下,左，很容易记，是顺时针的。

mozilla有个奇怪的bug,在此大家试的过程一定会发觉，因此我不定义“上”的填充数值。左和右随便定义，或者左为0，右93px（图片宽93px）。那高就是原来的 45PX - 14PX = 31PX

OKAY... 一个试验品，相信可以带来更多的方便。

各位若有问题可以在我群里提出来。谢谢

至于怎么做鼠标点击时，点过的连接图片，大家可以看看样式表手册，其实DW里早已经有分出来，我在此不多说了，眼见为实。 :hover 是鼠标经过时超连接样式规则