网络生活——关注网络，关注前端设计

 

二级dropdown弹出菜单.html

三级dropdown弹出菜单.html

flyout-竖向三级弹出菜单.html

水平三级横向弹出菜单.html

水平竖弹向上三级弹出菜单.html

在网上看到一篇不错的译文，很系统的讲述了写样式时可以如何写得“漂亮”，文中也提到关于样式的管理，这也是我花了很长时间在总结的事，看了这篇文章后，还真有自己动手整理出来的冲动，:) 还是先看看文章吧。

原文名称:Creating Sexy Stylesheets
原文地址: http://www.thinkvitamin.com/features/design/creating-sexy-stylesheets

作为一个CSS方面的专家,所做的不只是记住选择符(Selectors)那么简单,提升样式表的效用和可维护性,以及设计蓝图和管理工作流程都是工作的一部分.在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位顶尖的设计者的调查提炼而来.

接下来,我将重点放在创建性感的样式表方法的讨论之上.一旦CSS被用来创建具有魅力的网站,CSS的书写事实上就已经成为了艺术.使用何种方法创建,架构以及管理CSS成为了一件美妙的事情.

那么怎么创建这些性感的样式表?样式表应该具有那些特征呢?

几个月前,我有幸出席了在俄勒冈州波兰特岛所召开的Web Visions 2007的主题会议.在准备我的演讲报告时,我调查了12位工作在网页设计方面的设计人员和开发人员.基于调查的结果,再结合我自己的工作经验,我编写了下面的一个列表用来在创建样式表的时候给予自己以适当的提醒.

01. 保持CSS脱离标记
使用链接或者导入样式表的方法对于中阶或高阶的CSS开发人员来说都是再正常不过的事情,但是我在这里依然会强调一下这种方法的重要性.我见过的许多站点,在创站之初,CSS文件很整洁,组织的也井井有条,但是随着时间的推移,这些文档由于内嵌的甚至内联(inline)的样式出现而变得杂乱无章,一方面可能是由于给予的更新期限很短,另一方面或许就是纯粹的由于懒惰.

你正忙于一个拥有成千上万条的渠道内容同时出现的网站的大面积更新,给你的期限很短,所以你就选择了使用内嵌或者内联样式这样一些”快速修补”的方法.一些年过去了,习惯依然…,直到有一天你被告知这个站点需要重新设计,但是所有的内容仍然不变,这个时候而你只有一个星期去完成.想象一下,这将是一个怎样的境况.

其实这是很普遍的情况,更新样式表是一个再简单不过的任务,在你几年的”快速修补”之后,这些样式遍布了整个站点,相信你根本没办法记住他们在那里.所以现在你面对的只有2个选择a)在一个星期之内找出一个方法去清理规整这些样式b)找一份新的工作吧.

千万不要将你的工作变得愈来愈困难.使用链接和导入样式表是你的不二之选.规范的创建并保持样式表的整洁,你会活得更容易一些.

提示:小心使用链接或导入的方法会在标记上添加冗余的样式.每次你创建新的样式表,你都会更新要不就是添加新的样式,过多的外联样式不只会使补丁的修复变得困难,也会使样式表更难于维护.因此可以理解为什么大型站点会为不同的区块部分而去分离样式表.小心不要玩过火了,过犹不及.

这里很值得提及一下的是过多的样式表将会使HTTP的请求数增加.这些都会潜在的影响性能.因此,Internet Explorer将链接的样式表数限制在了32个.

02. 语法不是猜字谜.
你应该明白为什么我会说到这个.语法学是你最好的朋友,选择合适的,有意义的元素去描述你的内容,确保你所选择的是富有语意的类(class)和ID特征值.做正确的事情会使你的生活变得容易很多,如果你是某个团队的一分子,对团队其他成员来说也是如此.看一下下面的这条规则:

.l13k { color: #369; }

如果你是刚接手这个工作,你在CSS文件中看到了上面的内容,你能不能说清楚这个类是什么意思?大部分情况下你都会说不.这个类的名称可能是个缩写,但是恐怕没有办法去弄清楚他到底是什么的缩写,眼前是一摸黑.或者是这种情况,可能是你把它放到这里,你现在很清楚它是什么意思,但是你能保证3年之后你还记得它是什么意思么?

现在我们看一下下面的规则:

.left-blue { color: #369; }

你可能立即知道这个类选择符是为左侧边栏的显示蓝色区块而创建的,这时它就正确的表达了一定的语意.正如我在上面提到的,一旦要你在在一周内要重新设计,但是在重构过程中,这个区块需要定位到右边,颜色变为红色,类的特征值就没有任何意义,所以你现在需要改变你所有的特征值,要不就什么都不改变,不过这样可能或导致重重的困惑.

因此解决上面问题的最好方法就是在类特征值的命名中避免使用颜色(包括颜色名称和十六进制值)或者宽度,高度的尺寸值.同时你也尽量的避免去使用任何表明表现形式的值,例如box.反之,将表现和内容分离的意义也就不复存在了.

最后,我们看一下最合适的命名规则:

.product-description { color: #369; }

你应该能理解,这个规则是应用于产品描述.无论你的设计改变了多少次都不会改变.清楚明了的感觉不错.

03. 体会注释的优点
如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助.最常见的是为CSS样式规则添加提示信息,不过使用注释对优化组织结构和提升效用也很有帮助.

提示和标签

这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦.这种应用简洁性最为重要.例如:

/* Turn off borders for linked images */
img { border: 0; }

时间戳和签名

许多设计人员和开发人员会在最新更新的CSS文件标注日期时间,以及他们的名字.这些都会提供给我们一些联系信息以及文档更新信息.

/* Sushimonster Typography Styles Updated: Thu 10.18.07 @ 5:15 p.m. Author: Jina Bolton —————————————————-*/

对于一项工程,这种方法会很有用,如果你是小组一分子时,这更是显得尤其重要.要提醒的是,一些组织都要求在文档中留下这类信息,而有些公司喜欢把名字和日期这些信息放在文档之外的地方,所以在开始之前最好弄清楚这些事情.

组织

在CSS文档中使用注释指示不同的区块是个不错的主意.例如,如果所有的头部信息被组合在一起,你可以使用注释使它和下面的区块样式区分开来.

/* HEADER —————————————————-*/

接下来我会就此进行进一步的阐述,现在我们先讨论一下如何”分离样式类型”

注释标记

如果你的CSS文件都是按照我上面所说的按照区块进行划分的话,使用注释标记可以配合”查找”功能使你在文档的各个部分之间切换自如.标注一个章节(Chapter),例如使用等号”=”,然后在后面添加一个区块的名称,例如”HEADER”,这样就为你的CSS文档创建了一个”锚点”.

/* =HEADER —————————————————-*/

这种方法在内容繁杂的样式表中尤其有用.更多的相关信息你可以在

Stop Design 站点上了解
.

参考

将

在舞台新建一个影片剪辑，实例名为line，样子就随便画个长条

textwidth = 200; this.onEnterFrame = function() { this.line._width += textwidth/this._totalframes; }; onEnterFrame 在FLASH 帮助文件中的说明

onEnterFrame（MovieClip.onEnterFrame 处理函数） onEnterFrame = function() {} 以 SWF 文件的帧频重复调用。分配给 onEnterFrame 事件处理函数的函数将在附加到受影响的帧上的所有 ActionScript 代码之前处理。 必须定义一个在调用事件处理函数时执行的函数。您可以在时间轴上定义该函数，也可以在扩展 MovieClip 类或链接到库中的元件的类文件中定义该函数。 一旦满足阻止 Flash Player 调用已定义函数的条件，将 onEnterFrame 事件处理函数的值设置为 null。 可用性：ActionScript 1.0、Flash Player 6 示例下面的示例为 onEnterFrame 事件处理函数定义一个函数，该函数将 trace() 动作发送到"输出"面板： my_mc.onEnterFrame = function () { trace("onEnterFrame called"); }

个人理解onEnterFrame的作用就是逐帧执行函数中的代码，以上范例就是逐帧增加this.line._width的值达到动画效果

function copybtn() { //此函数用来生成按钮 nums = 10;//复制的个数 for (var j = 1; j<=nums; j++) { //复制库里的mc，并将其置于舞台上，分配好各自的坐标 _root.attachMovie("round", "abc"+j+"_mc", 100+j); _root["abc"+j+"_mc"]._x = 19.5+30*(j-1); _root["abc"+j+"_mc"]._y = 186.5; } }

_root.attachMovie("round", "abc"+j+"_mc", 100+j); 这句是重点，三个参数分别为 round 库里面的元件的标示符，在库中选择元件，右键点击选择链接，按如下图设置 "abc"+j+"_mc" 这个是置于舞台后的实例名 100+j 这个是置于舞台后的深度，数字大的上面

实现这个效果真是一波三折，花了一天多实现在研究清楚

实现代码如下：

 

 var myXML:XML = new XML();<br />myXML.ignoreWhite = true;<br />myXML.load("test.xml");<br />myXML.onLoad = function(suc) {<br /> if (suc) {<br />  loadStart();<br />  //载入完成后执行loadStart函数<br /> }<br />};<br />var myCL:MovieClipLoader = new MovieClipLoader();<br />function loadStart() {<br /> var swfurl = String(myXML.firstChild.childNodes[1].childNodes[1].firstChild);<br /> myCL.loadClip(swfurl, _root.container);<br />}

研究中出现的问题：

一、强制转换数据类型

a=String(b);

可以把b的类型转换成字符串赋予a

二、查看变量类型

trace(typeof(a));

可查看a的变量类型

 var ad = "ad/1.swf"; container._lockroot = true; var my_mcl = new MovieClipLoader(); my_mcl.loadClip(_root.ad, _root.container); 

说明：

ad为定义外部flash地址

container._lockroot = true;

flash的帮助文件中介绍如下：

一个布尔值，指定将 SWF 文件加载到影片剪辑中时 _root 引用的内容。默认情况下，_lockroot 属性为 undefined。您可以在正在被加载的 SWF 文件中或正在加载该影片剪辑的处理函数中设置此属性。

例如，假设您有一个名为 Games.fla 的文档，用于让用户选择要玩的游戏并将该游戏（例如 Chess.swf）加载到 game_mc 影片剪辑中。请确保，在加载到 Games.swf 中之后，在 Chess.swf 中对 _root 的任何使用都指向 Chess.swf 中的 _root（而非 Games.swf 中的 _root）。如果对 Chess.fla 具有访问权限并将其发布到 Flash Player 7 或更高版本，则可以将此语句添加到 Chess.fla 的主时间轴上

my_mcl.loadClip(_root.ad, _root.container);中前面是flash地址，后面是想要在哪里调用。

源码下载：flash外部调用.rar

本文转载自毅博客

我们在做网页的时候自己画的图也不错，自己做的布局也很精致，做的图标也很漂亮，第一眼看起来也觉得很漂亮，但是看看就觉得不舒服。也不清楚为什么，这里我告诉你，也许就是你的排版出现问题了。由于排版的不合理，所产生的视觉效果会对读者的眼睛产生一定的疲劳影响，基本的毛病在于“字间距太挤或太宽”、“行距太小或太大”、“段距太少或太多”、“每行字数太多或太少”等这几个常见因素。下面的内容可以从图示中看出效果来，同时我会给大家一个相对比较好的参数供大家参考。当然设计本来就不要太过拘泥，我所提供的都是一般性的提议，不同网站不同对待，不要过于拘泥我所给大家的一些参数。

 

大家看到上图，前三个是行距的问题：

第一个太挤了，都粘在一起了，这样眼睛在看这个文本的时候会需要花点时间去分辨，这样的排版会让读者看得很累。很不舒服。大家看一下自己手头上所做文本的是不是太挤了，如果是那就改一下吧！第二个是比较适中的，由于每行分得很清楚，这样看起来有很强的识别性。第三个是比较宽的，松了一点，这样看起来也很清楚，但是当你的文章不是一两行而是十几行与几十行的时候你就会觉得文章的连贯性产生了很严重的脱节，一般排版不会越过两个字体高度（2em）

下面两个就是字数的问题了，第四个每行文字太长，这样看起来头要摇来摇去，这样读者更容易显得很累。因为要不断的转动头，或是让眼球不断的左右摆动。最舒服的方式就是读者一眼看上去就能把一行看完，不然从行末到下一行行首也会形成断裂感。而下面的又太扁了，这样看起来也不是很舒服。由于在不断的换行阅读，眼球也会觉得不舒服。而推荐的最好的字数是： 不大于45个字母，不大于30个汉字。

上面的图是关于段距的，第一个是比较合适的，这样的把段落分开了，让读者觉得文章并不是很多很难读，而如果不把段落当一回事，任其自然那么就会如下面一样，两段成为一段，这里是两段还好，如果是几十段，那么这个文章就很少有人能读下去了！

在经典论坛中的行距已经重新设定过了，现在发布长篇的文章就不会觉得糊在一起了，并且在链接上加了下划钱，对于色盲或色弱的朋友也容易识别，更为人性化了！