mozilla UI 高效CSS

Posted by hezc on 2010年06月24日 0 comments

本文将介绍 Mozilla UI 在用的一些 CSS 优化规则。第一部分是关于 Mozilla 样式系统如何分类选择器的一般讨论，在理解了这些的基础上，第二部分则罗列了 Mozilla 样式系统书写 CSS 的规则指南。

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

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

    1. display与visibility的差异

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

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

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

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

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

    1. IE的滤镜

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

    1. *{ margin:0; padding:0;}避免浏览器样式差异

    2. *号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你 不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。
    3. 不赞成，使用*号通配符
    • 不赞成，div span button b table等标签纳入通配符控制内外填充样式
    • 建议用，有选择性地使用通配符控制内外填充样式。


      ========================================================

    样式系统是如何分类选择器的？

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

    ID 类

    ID 选择符作为关键选择符

    例：

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

    Class 类

    Class 选择符作为关键选择符

    例：

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

    标签类

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

    例：

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

    通用类

    所有其他的都属于此类

    例：

    :table { } /* 通用类 */
    [hidden="true"] { } /* 通用类 */
    * { } /* 通用类 */
    tree > [collapsed="true"] { } /* 通用类 */


    样式系统是如何匹配规则的？

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

    高效 CSS 指南

    避免通用类

    确保选择器不是以通用类结束。

    不要用标签名或class来描述ID类

    如果你有一个选择器是以ID类作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。

    • 差 – button#backButton { }
    • 差 – .menu-left#newMenuIcon { }
    • 好 – #backButton { }
    • 好 – #newMenuIcon { }

    不要用标签名来描述 class 类

    和上一条类似，所有的 class 也是唯一的。你应该把标签名包含在 class 名中。

    • 差 – treecell.indented { }
    • 好 – .treecell-indented { }

    尽量选择最特殊的类来存放选择器

    降低系统效率的一个最大原因是我们在标签类中用了过多的选择符。通过添加 class 到元素，我们可以将类别进行再细分为 class 类，这样就不用为了一个标签浪费时间去匹配过多的选择符了。

    • 差 – treeitem[mailfolder="true"] > treerow > treecell { }
    • 好 – .treecell-mailfolder { }

    避免子孙选择符

    子孙选择符是CSS中最耗资源的选择符。他真的是非常的耗资源，尤其是在选择器使用标签类或通用类的时候。很多情况中，我们真正想要的是子选择符。 除非有明确说明，在 UI CSS 中是严禁使用子孙选择符的。

    • 差 – treehead treerow treecell { }
    • 好一点，但还是不行(参照下一条) – treehead > treerow > treecell { }

    标签类中不要包含子选择符

    不要在标签类中使用子选择符。否则，每次元素的出现，都会额外地增加匹配时间。（特别是当选择器似乎多半会被匹配的情况下）

    • 差 – treehead > treerow > treecell { }
    • 最好 – .treecell-header { }

    留意所有子选择符的使用

    小心地使用子选择符。如果你能想出一个的不使用他的方法，那么就不要使用。特别是在 RDF 树和菜单会频繁地使用子选择符，像这样。

    • 差 – treeitem[IsImapServer="true"] > treerow > .tree-folderpane-icon { }

    请记住 RDF 的属性是可以在模板中被复制的！利用这一点，我们可以复制那些想基于该属性改变的子 XUL 元素上的 RDF 属性。

    • 好 – .tree-folderpane-icon[IsImapServer="true"] { }

    运用继承

    理解哪个属性会继承，并允许他们这么做！我们已经清楚地建立了 XUL widgetry(?) ，所以你可以把 list-style-image 或 font 属性设置在父标签上，然后他会渗透到匿名内容里。这样，你就不需要浪费时间在匿名内容上直接写声明了。

    • 差 – #bookmarkMenuItem > .menu-left { list-style-image: url(blah); }
    • 好 – #bookmarkMenuItem { list-style-image: url(blah); }

    在上面的例子中，定义匿名内容样式的需求（不用去搞明白 list-style-image 是如何继承的）导致需要一个 class 类的选择器，而这条规则实际上更应该以最唯一的 ID 类结尾。
    请记住，特别是在匿名内容中，他们都拥有相同的 class 。上面那条不好的选择器写法导致每个菜单的图标都会被检查是否包含在收藏夹菜单栏目中。这是非常耗资源的（因为有很多菜单）；这个选择器应该不要被收藏夹 以外的菜单检查。

    使用 -moz-image-region

    把很多图片组合在一张图片里，然后用 -moz-image-region 来选择他们，会比每张图片分开存储，执行效率上高很多。


    转载

    地址：http://www.css88.com/archives/402
    作者：愚人码头

    • CSS开发手册

    Posted by hezc on 2010年06月24日 0 comments

    基础篇：

    一、三种样式选择器

    标签选择器 p {color:red;}

    类选择器 .p {color:red;}

    ID选择器 #p {color:red;}

    二、transparent

    Background:transparent; 防止定义背景被覆盖

    三、Netscape4.X（IE/WINDOWS4.0以前的版本）下错误的透明背景理解

    Background:inhrit; 在netscape4.x下透明背景将被理解为黑绿

    四、字体默认选择：

    Body {font-family:”lucida Grande”,Verdana,Lucida,Arial,Helvetica,sans-serif; }

    按顺序调用不同平台的默认字体

    五、如何解决旧浏览器不支持CSS的情况

    使用群选择器 例如：p,td,ul,ol,li,dl,dt,dd {font-size:small;}

    六、使用netscape4友好规则

    Body {font-family:Verdana,sans-serif;}

    p,td,ul,ol,li,dl,dt,dd {font-size:small;}

    七、方法重载细节规则：

    Body {font-family:Verdana,sans-serif;}

    p,td,ul,ol,li,dl,dt,dd {font-size:small;}

    p {font-family:times,”Times New Roman”,serif;}

    八、内容（派生）选择器

    Li strong {font-style:italic; font-weight:normal }

    例如：strong {color:red;} h2{color:red;} strong h2 {color:blue;}

    例如：#sidebar {color:red} #sidebar p {color:blue;}

    例如：.fancy {color:red;} .fancy p {color:blue;} / li.fancy {color:black;}

    CSS嵌入

    一、  外联样式表：

    <link rel=”StyleSheet” href=”/css/basic.css” type=”text/css” media=”all”>

    <style type=”text/css” media=”all>

    @import url(“/Styles/mystylesheet.css”);

    </style>

    注意：使用@import用来对IE4.0以下浏览器进行屏蔽

    二、  嵌入式样式表：

    <head>

    <style type=”text/css” >

    <!- -

    Body {color:red;}

    - ->

    </style>

    </head>

    注意：为了IE3下访问站点，我们可以使用嵌入式样式表（建议在页面中使用内联成功后，剪切到外联样式表中）

    CSS混合布局应用

    www.i3forum.com

    一、  Margin（框距）padding（边框距）

    margin属性设置顺序：上左下右

    padding属性设置顺序：上左下右

    margin:25px 0 25px 0;

    简写：margin:25px 0;

    二、Display显示属性设置

    （1）、Display属性none  (隐藏)

    .alt {display:none;}

    <span class=”alt”>Content List Part</span>

    （2）、Display属性block  (块/区域)

    Img {display:block;}

    <img href=”1.gif”></img>

    块级元素：存在自身的“盒”中，后面跟随一个默认的回车

    内联元素：是流的一部分，后面不跟随回车

    （3）、Display属性inline

    区别block元素，使用inline状态时，显示方式按照内联元素显示

    三、  动态链接属性设置：

    a:link {

    font-weight : bold;

    text-decoration : none;

    color: #c30;

    background: transparent;

    }

    a:visited {

    font-weight : bold;

    text-decoration : none;

    color: #c30;

    background: transparent;

    }

    a:hover {

    font-weight : bold;

    text-decoration : underline;

    color: #f60;

    background: transparent;

    }

    a:active {

    font-weight : bold;

    text-decoration : none;

    color: #f90;

    background: transparent;

    }

    （1）      　　文字修饰属性（text-decoration）

    Text-decoration:underline overline none;

    Underline:链接时有下划线

    Overline:连接时有上划线

    None:连接时无下划线

    （2）      　　动态连接属性顺序

    （LVHA）－ LoVe－HA！

    （3）      　　IE/WINDOWS的伪装欺骗性

    应避免使用a:active属性：出现bug 连接会出现冻结现象

    四、  如何设置行高（line-height）

    Line-height:1.5;

    五、  如何设置文章位置（text-align）

    可选择属性（left middle right）

    IE6/WINDOWS的BUG会错误使文档居中

    六、  对于字体的完整CSS应用

    Font:13px/1.5 Georigia,”New Centeury Schoolbook”,Times,serif;

    七、  设置页面分界限

    （1）  　　vertical-align:middle; 等于 <td valign=”middle”>设置垂直对齐

    （2）  　　background:none 等于 background:url(images/1.gif) repeat;

    八、  设置显示器设备

    <style type=”text/css” media=”screen”> media属性

    使用HTML4.01转换到XHTML1.0过渡式transitional

    （早期的基于Gecko核心的浏览器如：netscpae6.0 Mozilla1.0）

    一、  在Gecko核心浏览器清除CSS间隙

    规则如下：

    Img {display:block;} 使用块级元素清楚间隙

    .inline {display:inline;} 使用内联元素显示方式

    页面如下：

    <img class=”inline” alt=”/” />

    也可用

    Td img {display:block;}

    二、在Gecko核心img默认作为内联函数处理

    在内联元素下方默认留有空白，这是为了给所包含的块下行字母流出的空间

    盒模型、Bug和工作区

    CSS四个区域：内容、边框距、边界和边距

    在使用CSS设置表格之前：

    {width:400px; height:75px;}

    错误的理解：表格面积＝400px; height:75px;

    实际上CSS设置的表格：

    Width:400px height:75px 内容为 Content

    那么整个盒的面积为：Content＋padding*2+border*2

    盒模式失效及解决办法：（IE4到IE5.5/Windows）

    正确理解盒模式的浏览器

    （IE6/WIN,IE5/MAC,Netscpae6+,Mozilla,Chimera,Kmeleon,Opera5+）

    Float漂浮属性用来使用在两在不同ID选择器中相连

    {float:left;}

    对于使用padding的表格将使用以下解决方法：

    Oprea友好规则（Box盒状模型）

    解决办法：

    #nav

    {

    width:151px;/* False value for IE4-5.x/Win */

    voice-family:”\”}\”";

    voice-family:inherit;

    width:100px;   /* Actual value for conformant browsers */

    }

    html>body #nav {

    width:100px;/* be nice to Opera */

    }

    IE上的空白Bug

    解决方法：缩进代码，<td><a href=”#foo”><img src=”1.gif” alt=”/” /></a></td>

    IE6/Windows上的漂浮Bug

    解决办法：使用JavaScript id名称：content

    If (document.all && window.attachEvent)

    Windows.attachEvent (“onload”,fixWinIE);

    Fuction fixWinIE() {

    If (doucument.all.cotent.offsetHeight) {

    Doucument.all.content.style.display=”block”;

    }

    }

    嵌入Flash的Bug：

    解决办法：在XHTML中嵌入以下代码：

    <object type:”application/x-shockwave-flash” data=”movie.swf”

    Width=”400px” height=”300px”>

    <parma name=”movie” value=”movie.swf”>

    </object>

    Flash空白故障（IE/WIN 5,5.5,6 Version）

    解决办法：使用JavaScript的doucuemnt来欺骗效验系统

    <script type=”text/javascript”>

    //[CDATA[

    If (navigator.mimeTypes && navigator.mimeTypes[“application/x-shockwave-flash”]){

    Doucument.write (‘<object src=”/media/yourflashmovie.swf”……</object>);

    }

    关键字Fahrner方法：（IE5.x/Winodws 提供伪关键字号）

    解决办法：

    P {

    font-size:x-small;

    /* flase value for WinIE4/5 */

    Voice-family:”\”}\””;

    /* trick WinIE4/5 into thinking the rule is over */

    Voice-familt:inherit;

    /* recover from trick */

    Font-size:small;

    /* intended value for better browsers */

    }

    Html>p {
    font-size:small;

    /* be nice to opera */

    }

    区别alt属性与title属性

    Alt:注释文档不显示

    Title:显示文档不注释

    提高可访问性（WAI与508条款）

    Bobby的可访问性测试

    http://bobby.watchfire.com

    能帮助你使网页适应WAI或508条款

    为非鼠标用户提供一个选择

    解决办法：使用JavaScript

    <form action=”fooaction”>

    <input type=”button” onclick=”setActiveStyleSheet(‘default’);

    Return false; onkeypress=”setActiveStyleSheet(‘default’);

    Return false; />

    Onkeypress对于非鼠标用户就相当于onclick对于不能使用JavaScript的用户

    <noscript>

    <p class=”vs15”><a href=”/daily/1.html”></a></p>

    </noscript>

    Tabindex属性提供连接到属性的快捷方法使用Tab换档键的屏幕阅读器，可迅速查询相关内容区域显示和隐藏效果

    解决办法：

    http://www.zeldman.com/j/nu.js

    Function toggle (targeted ) {

    If  (doucument.getElementById ) {

    Targeted = doucument.getElementById (targeted);

    If (target.style.display = “”;

    } else {

    Target.style.display = “none”;

    }

    Xhtml部分：

    <p><a href=”/” onclick=”toggle (‘outside2’) ;return false;” onmouseover=”changeImages

    (‘ch’,’/i/p/cho.gif ‘);return ture;

    Title=”hide or show Relevant Externals (below).”> Toggle Externals </a></p>

    定义CSS规则：

    <dl id=”outside2” style=”display:none;”>

    <dt>Relevant Externals:</dt>

    <dd><a href=http://www.somesite.com titile=”Description” >Site NameS</a></dd>

    我们把规则写入CSS外联表中

    #outside2 {

    Display:block;

    }

    如果你需要一个元素在页面中是不可见的但仍需其占据空间

    解决办法：visibility:hidden;

    动态菜单（下拉和展开）

    下拉式菜单解决办法：http://www.gazingus.org/html/menuDropdown.html

    展开式菜单解决办法：http://www.gazingus.org/html/menuExpandable2.html

    不支持Javascritp脚本的浏览器，如何实现正常浏览

    解决办法：在<head></head>之间插入

    <script type=”text/javascritp”>

    <!– //

    If (!doucument.getElementById) {

    Window.location = http://www.somesite.com/somepage/

    }

    当浏览器不支持Javascript时，window.location将跳转到一个提示页面或者是一个不需要javascript脚本的纯网页

    让DIV居中

    Posted by hezc on 2007年01月28日 0 comments

    方法一：
    ＝＝＝＝css=========
    .box {
    position:absolute;
    width:500px;
    height:200px;
    left:50%;
    top:50%;
    margin-top:-100px;
    margin-left:-250px;
    background:#f60;
    }
    =====xhtml=====

    <div class=”box”> </div>

    方法二：
    ==========css==============

    div {width:100%;}
    #box {display:table;height:550px;_position:relative;overflow:hidden;}
    #box div{_position:absolute;_top:50%;display:table-cell;vertical-align:middle;}
    #box div div
    {width:100%;background:#f7f7f7;display:block;_position:relative;_top:-50%;}
    #box div div .bgRed
    {background:red;height:50px;width:210px;margin:0 auto;}

    ======xhtml===============
    <div id=”box”>
    <div><div>
    <p class=”bgRed”>111</p>
    </div></div>
    </div>

    网页色彩搭配内涵

    Posted by hezc on 2006年05月6日 0 comments

    网页的色彩搭配往往是网友们感到头疼的问题，尤其是那些完全没有美术基础的网友。到底用什么色彩搭配好看呢？让我们来看看网友54雨寒的高见吧！
    一、红色的色感温暖，性格刚烈而外向，是一种对人刺激性很强的色。红色容易引起人的注意，也容易使人兴奋、激动、紧张、冲动、还是一种容易造成人视觉疲劳的色。
    1、在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
    2、在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
    3、在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
    4、在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
    二、黄色的性格冷漠、高傲、敏感、具有扩张和不安宁的视觉印象。黄色是各种色彩中，最为娇气的一种色。只要在纯黄色中混入少量的其它色，其色相感和色性格均会发生较大程度的变化。
    1、 在黄色中加入少量的蓝，会使其转化为一种鲜嫩的绿色。其高傲的性格也随之消失，趋于一种平和、潮润的感觉。
    2、 在黄色中加入少量的红，则具有明显的橙色感觉，其性格也会从冷漠、高傲转化为一种有分寸感的热情、温暖。
    3、 在黄色中加入少量的黑，其色感和色性变化最大，成为一种具有明显橄榄绿的复色印象。其色性也变的成熟、随和。
    4、 在黄色中加入少量的白，其色感变的柔和，其性格中的冷漠、高傲被淡化，趋于含蓄，易于接近。
    三、蓝色的色感冷嘲热讽，性格朴实而内向，是一种有助于人头脑冷嘲热讽静的色。蓝 色的朴实、内向性格，常为那些性格活跃、具有较强扩张力的色彩，提供一个深远、广埔、平静的空间，成为衬托活跃色彩的友善而谦虚的朋友。蓝色还是一种在淡 化后仍然似能保持较强个性的色。如果在蓝色中分别加入少量的红、黄、黑、橙、白等色，均不会对蓝色的性格构成较明显的影响力。
    1、 如果在橙色中黄的成份较多，其性格趋于甜美、亮丽、芳香。
    2、 在橙色中混入小量的白，可使橙色的知觉趋于焦躁、无力。
    四、绿色是具有黄色和蓝色两种成份的色。在绿色中，将黄色的扩张感和蓝色的收缩感相中庸，将黄色的温暖感与蓝色的寒冷感相抵消。这样使得绿色的性格最为平和、安稳。是一种柔顺、恬静、潢足、优美的色。
    1、 在绿色中黄的成份较多时，其性格就趋于活泼、友善，具有幼稚性。
    2、 在绿色中加入少量的黑，其性格就趋于庄重、老练、成熟。
    3、 在绿色中加入少量的白，其性格就趋于洁净、清爽、鲜嫩。
    五、紫色的明度在有彩色的色料中是最低的。紫色的低明度给人一种沉闷、神秘的感觉。
    1、 在紫色中红的成份较多时，其知觉具有压抑感、威胁感。
    2、 在紫色中加入少量的黑，其感觉就趋于沉闷、伤感、恐怖。
    3、 在紫色中加入白，可使紫色沉闷的性格消失，变得优雅、娇气，并充满女性的魅力。
    六、白色的色感光明，性格朴实、纯洁、快乐。白色具有圣洁的不容侵犯性。如果在白色中加入其它任何色，都会影响其纯洁性，使其性格变的含蓄。
    1、 在白色中混入少量的红，就成为淡淡的粉色，鲜嫩而充满诱惑。
    2、 在白色中混入少量的黄，则成为一种乳黄色，给人一种香腻的印象。
    3、 在白色中混入少量的蓝，给人感觉清冷、洁净。
    4、 在白色中混入少量的橙，有一种干燥的气氛。
    5、 在白色中混入少量的绿，给人一种稚嫩、柔和的感觉
    6、 在白色中混入少量的紫，可诱导人联想到淡淡的芳香

    阿捷说网页色彩搭配

    Posted by hezc on 2006年03月30日 0 comments

    网页的色彩是树立网站形象的关键之一，色彩搭配却是网友们感到头疼的问题。网页的背景，文字，图标，边框，超链接…，应该采用什么样的色彩，应该搭配什么色彩才能最好的表达出预想的内涵呢？
    阿捷这里谈一些心得，希望对你有所启发。

    首先我们先来了解一些色彩的基本知识：
    1.颜色是因为光的折射而产生的。
    2. 红，黄，蓝是三原色，其它的色彩都可以用这三种色彩调和而成。网页html语言中的色彩表达即是用这三种颜色的数值表示例如：红色是 color  (255,0,0)十六进制的表示方法为(FF0000)白色为(FFFFFF), 我们经常看到的”bgColor=#FFFFFF”就是指背景色为白色。
    3.颜色分非彩色和彩色两类。非彩色是指黑，白，灰系统色。彩色是指除了非彩色以外的所有色彩。
    4.任何色彩都有饱和度和透明度的属性，属性的变化产生不同的色相，所以至少可以制作几百万种色彩.

    网页制作用彩色还是非彩色好呢？
    根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。
    我们通常的做法是：主要内容文字用非彩色(黑色)，边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。
    ●非彩色的搭配
    黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。 灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果你实在找不出合适的色彩，那么用灰色试试，效果绝对不会太差。
    ●彩色的搭配
    色彩千变万化，彩色的搭配是我们研究的重点。我们依然需要进一步学习一些色彩的知识。
    一.色环。我们将色彩按”红->黄->绿->蓝->红”依次过度渐变，就可以得到一个色彩环。色环的两端是暖色和寒色，当中是中型色。
    (如下图) 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红  |___________| |____| |_________| |_________| | | | | 暖色系 中性系 寒色系 中性系.

    二. 色彩的心理感觉。不同的颜色会给浏览者不同的心理感受
    红色—是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。
    绿色—介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。它和金黄，淡白搭配，可以产生优雅，舒适的气氛。
    橙色—也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。
    黄色—具有快乐，希望，智慧和轻快的个性，它的明度最高。
    蓝色—是最具凉爽，清新，专业的色彩。它和白色混合，能体现柔顺，淡雅，浪漫的气氛(象天空的色彩:)
    白色—具有洁白，明快，纯真，清洁的感受。
    黑色—具有深沉，神秘，寂静，悲哀，压抑的感受。
    灰色—具有中庸，平凡，温和，谦让，中立和高雅的感觉。
    每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。

    ●网页色彩搭配的原理
    1.色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。
    2.色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。(参考设计思考第二篇网站CI的标准色彩一节)
    3.色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。
    4.色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

    ●网页色彩掌握的过程
    随着网页制作经验的积累，我们用色有这样的一个趋势:
    单 色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个 漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自 己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。

    ○网页色彩搭配的技巧
    文章写到这里，有心急的网友要问了：“到底用什么色彩搭配好看呢？你能不能推荐几种配色方案？”别急，这里有一点技巧，可以帮助你迅速成为调色大师:)
    1.用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将 色彩变淡或则加深)，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。
    2.用两种色彩。先选定一种色彩，然后选择它的对比色(在photoshop里按ctrl+shift+I)。我的主页用蓝色和黄色就是这样确定的。整个页面色彩丰富但不花稍。
    3.用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。确定色彩的方法各人不同，我是在photoshop里按前景色方框，在跳出的拾色器窗中选择”自定义”，然后在”色库”中选就可以了:)
    4.用黑色和一种彩色。比如大红的字体配黑色的边框感觉很”跳”。

    在网页配色中，忌讳的是：
    1.不要将所有颜色都用到，尽量控制在三种色彩以内。其实高手是可以用很多种颜色的，那个要有驾驭颜色的能力了，建议初学的同志们就先控制下。
    2.背景和前文的对比尽量要大，(绝对不要用花纹繁复的图案作背景)，以便突出主要文字内容。

    《色彩构成》
    高长调
    对比主色调为高明度的五度以外的对比，有积极、刺激的感觉，对比强烈。
    高中调
    对比主色为高明度的，三至五度的差的对比，有明快的、响亮的、活泼的感觉。
    高短调
    对比主色调为高明度的，三度差以内的对比，显得优雅、柔和，有一种女性化的、朦胧的感觉。
    中长调
    对比主色调为中明度的，五度以外的对比，有强有力的、男性化的阳刚之气。
    中中调
    对比主色调为中明度的，三至五度差的对比，有含蓄的、丰富的、薄暮般的感觉。
    中短调
    对比主色调为中明度的，三度差以内的对比，有模糊而平板的、朴素的感觉。
    低长调
    对比主色调为低明度的，五度以外的对比，有低沉的、具爆发性、晦暗的感觉。
    低中调
    对比主色调为低明度的，三至五度差的对比，有苦恼的、苦闷感的、寂寞的感觉。
    低短调
    对比主色调为低明度的，三度差以内的对比，有忧郁的、死寂的、模糊不清的感觉。
    最长调
    是以黑白两色构成的，明度对比最强的调性，含有醒目的，生硬的，明晰的、简单化等感觉。

    理解表现和结构相分离

    Posted by hezc on 2006年03月28日 0 comments

    作者：阿捷
    对于初学者，我们常看见web标准的好处之一是“能做到表现和结构相分离”，那这到底是什么意思呢？我将以一个实际的例子来详细说明。首先我们必须先明白一些基本的概念：内容、结构、表现和行为。
    1.内容
    内容就是页面实际要传达的真正信息，包含数据、文档或者图片等。注意这里强调的“真正”，是指纯粹的数据信息本身。比如一个不包含辅助的信息,比如导航菜单、装饰性图片等。举个例子，有下面一段文本是我们页面要表现的信息。
    忆 江南(1)唐.白居易江南好，风景旧曾谙。(2)日出江花红胜火，春来江水绿如蓝，(3)能不忆江南。作者介绍772－846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、 同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响 甚大。注释(1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋 五十四字，皆平韵。 (2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。品评此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳 处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风 景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意 脉的精彩笔墨。三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作 者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇 漾的境界中。
    2.结构(Structure)
    可以看到上面的文本信息本身已经完整。但是混乱一团，难以阅读和理解，我们必须给它格式化一下。把它分成标题、作者、章、节、段落和列表等。
    标题忆江南(1)
    作者 唐.白居易
    正文
    江南好，风景旧曾谙。(2)
    日出江花红胜火，春来江水绿如蓝，(3)
    能不忆江南。
    节1作者介绍
    772 －846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、 同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响 甚大。
    节2注释
    列表
    (1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。
    (2)谙(音安)：熟悉。
    (3)蓝：蓝草，其叶可制青绿染料。
    节3品评
    此 词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已 甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭 州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作 者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇 漾的境界中。
    类似上面标题、作者、章、节、段落和列表，我们就把它称做结构。结构使内容更加具有逻辑性，易用性。
    2.表现(Presentation)
    虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。下面是对上面文本用表现处理过后的效果:
    忆江南(1)
    唐.白居易
    江南好，风景旧曾谙。(2)
    日出江花红胜火，春来江水绿如蓝，(3)
    能不忆江南。
    作者介绍
    772 －846 ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、 同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响 甚大。
    注释
    (1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。
    (2)谙(音安)：熟悉。
    (3)蓝：蓝草，其叶可制青绿染料。
    品评
    此 词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已 甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭 州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作 者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇 漾的境界中。
    噢，很明显，我们加了2种背景，将标题字体变大并居中，将小标题加粗并变成红色，等等等等。所有这些，都是“表现”的作用。它使你的 内容看上去漂亮、可爱多了！形象一点的比喻:内容是模特，结构标明头和四肢等各个部位，表现则是服装,将模特打扮得漂漂亮亮。(请原谅我用模特打比方，很 多时候模特比web标准更具有吸引力。)
    那么行为是什么？
    3.行为(Behavior)
    行为就是对内容的交互及操作效果。例如，我们最熟悉不过的JavaScript。使用JavaScript我们可以使内容动起来，可以判断一些表单提交，可以相应你的一些操作。这个我就不再举例子了。
    所有HTML和XHTML页面就是由“结构、表现和行为”这三方面组成的。抽象一点理解，内容是基础层，然后是附加上去结构层和表现层，作后再对它们做点“行为”,示意草图如下：
    4.传统的HTML方法
    传 统的HTML3.2/4.0标签里既有控制结构的标签，例如<title>,<p>，又有控制表现的标签，例如< font>,<b>，还有本意用于结构后来被滥用于控制表现的标签，例如：<h1>,<table>等。结构 标签与表现标签混杂在一起。
    例如上面举例的页面，你可能很熟练的2-5个表格来控制边框、背景和文本居中；用<h2>< h3>来定义标题和小节标题；用<font>和<b>来控制字体大小、颜色和粗体。轻而易举地就能制作好页面。聪明些的设 计师还采用CSS样式表来统一控制一些字体的表现。下面的代码是我们最熟悉不过的了：
    <table border=”0″ width=”100% “><tr><td align=”center”><h1><font color=”#C61C18″> 忆江南</font></h1></td></tr></table>
    传统的方法看上去并没有什么问题。(我们已经很习惯了,从来没有想过会有什么问题。)但是既然W3C放弃HTML，推荐XHTML和XML就一定有它的道理和原因，问题出在哪里？
    问题就出在结构层和表现层混杂在一起！当我们只发布一些简单页面，没什么影响。当我们发布了大量页面，问题就来了。
    第一个问题是：如何改版。假如由于某些原因我们需要把背景替换成黑色，边框变成1px黄色，文字变成白色，所有文字居中。你可能就要一页一页的修改。好，你说你用了CSS，那么恭喜你，你可以直接修改样式表，轻松实现这样简单的改版。(复杂改版暂且不提。)
    第 二个问题是：数据的利用。本质上讲所有页面信息都是数据。当我发布了唐诗300首，宋词100首，就是一个可观的数据库，这个应该不难理解。那么好，是数 据就存在数据查询，处理和交换的问题。假如我所有的页面上都不需要显示“品评”这一小节；假如我要将页面数据转成excel格式；假如我要打印一个干净内 容的页面(不要背景、导航、版权等不相干信息)怎么办？传统的解决方法是：一页一页删除“品评”小节；一页一页地拷贝粘贴到excel，一页一页地制作” 打印友好页”。这样做显然不是有效率的办法。
    实际上，第一个问题实质是批量改变”表现”。由于传统HTML方法的结构并不明显，甚至可以视作只有 表现，我们就象设计时尚杂志那样精心画出每一页。严谨的设计师可以控制到每1px的细节。内容与表格紧密的嵌套、混杂在一起，结构只是用表现来表现出来， 而不是用标签。这种设计方法下，任何内容的变化，结构的变化都会影响整个页面的表现，都需要一点一点细节的修改。CSS的出现，一开始似乎就是用来解决” 批量改表现”的问题。大部分的网页设计师已经能够熟练使用CSS来控制字体的大小颜色，超链接的效果，表格的边框等等，已经体会到CSS批量改变表现的效 率。
    第二个问题则是无法避免。由于结构和表现混杂在一起(内容被n层的表格拆分)，你无法判断哪个td里面到那个td是你需要的数据，无法剥离其 中夹杂的<font><b>的标签。上例中，从哪里开始是正文？哪里开始是“品评”小节?哪些是附加信息不需要打印？我们都无法 让电脑自己去判断，唯一的方法是人工判断，手工处理。结构和表现混杂在一起，页面就好比是一张图片，你无法让电脑搜索其中的文字。(哦，我听见有人说：我 的站点有全文检索啊。恩，我想说的是，第一,这样的检索效率非常低，你需要滤过整个内容，匹配到你的”检索关键字”，例如，我要查找作者李白，搜索引擎会 检索页面所有文字才能告诉你这页里面含有”李白”，而且不一定出现在作者上。第二，这样的检索对数据处理和交换毫无用处。例如我要将所有作者李白的诗摘出 来，我要给所有作者增加一个肖像图片，这样的搜索毫无帮助。)
    对于第二个问题，要如何解决呢？解决的办法就是：结构清晰化，将内容、结构与表现相分离。
    5.web标准推荐的方法
    对 于内容、结构与表现相分离，最早是在软件开发架构理论中提出来的。QQ用过吧，QQ面板的变更皮肤就是内容不变，外观表现在变化；还有winamp的 skin也是这种原理的典型体现。其实我们大多数的设计师已经在实践中都接触到。我们的动态信息发布系统，实际上就是基于这个原理制作的，设计师只需要设 计模版，程序员将数据(标题、作者、发布日期、摘要、相关文章、相关图片等等)从数据库中读出，嵌入你的模板，形成一个新的页面再展示给浏览者。其中的内 容已经被结构化后分别保存在数据库的不同字段中。例如查找作者，我们只要在作者字段中搜索，这样的效率就提高很多了。
    上面都是有赖于程序，如果页 面文档本身就能实现表现和结构相分离，那么数据的交换和再利用不就更方便了。嘿嘿，其实XML就是奔着这个方向去的，XML允许你自己定制结构标识，还提 供了XSLT用来格式化、查询和处理文档内容。例如上面的诗词页面，用XML写出来的代码就象这样：
    <标题>忆江南</标题>
    <作者>唐.白居易</作者>
    <正文>江南好…</正文>
    <作者介绍>772－846 ，字乐天…</作者介绍>
    <注释>据《乐府杂录》…</注释>
    <品评>此词写江南春色…</品评>
    这些<标题><作者>都是自己定义的标签，这样文档结构非常清晰，查询和处理也很简单。啊哦，说远了。还是回到目前能应用的web标准方法上。
    web标准方法目前推荐大家使用XHTML+CSS来制作网站。目标是使结构与表现彻底相分离。
    就 是说，XHTML的标签只用来定义文档的结构，所有涉及表现的东西通通剥离出来，把它放到一个单独的文件里，这个单独的文件就是CSS。(CSS的好处上 面已经讲到，可以批量处理表现)。采用这种方法后，上面的第二个问题中的3个假设困难就迎刃而解。我们可以利用样式表将所有”品评”结构不显示 (DISPLAY: none);我们可以根据页面结构标签将内容自动导入到excel；我们可以设计一个专门的打印样式表，隐藏掉所有附加的信息，只打印干净的内容。就这么 简单。
    现在你明白了吧，为什么我们反对用表格设计布局。原因是<table>用于布局的时候，它是一个控制表现的标签。混杂在内容和结构中，使我们的内容数据无法再利用。结构与表现相分离带来的好处主要有：
    1.数据的多样显示。通过不同的样式表适应不同的设备，做到内容与设备无关
    2.保持整个站点的视觉一致性变得非常简单，修改样式表就可以轻松改版;
    3.由于结构清晰，数据的集成、更新和处理更加方便灵活；
    4.更有意义的搜索。
    好了，说到这，关于表现与结构相分离的概念，您是否有一点理解？如果还是模模糊糊，也不要紧，自己实际制作体验一把，在实践中逐步领会。学习web标准需要循序渐进，阿捷和您一样，也在努力学习中。
    要一个符合wbe标准的实际例子？查看本页原代码，讲”表现”概念的那个例子就是用CSS+DIV实现的。样式表的内容直接在本页head区，没有另外单独调用，便于你的查看:)

    CSS设置不转行,div的高度解决办法

    Posted by hezc on 2006年03月10日 0 comments

    CSS设置不转行
    overflow:hidden       隐藏
    white-space：normal         默认
    pre              换行和其他空白字符都将受到保护
    nowrap       强制在同一行内显示所有文本，直到文本结束或者遭遇 br 对象
    ============================================
    设置强行换行
    word-break:
    normal ; 依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
    break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
    keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
    ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝======

    div的高度解决办法
    1、设置line-height，例：XX{font-size:1px; float:left; width:100%; height:1px; line-height:1px}
    2、设置overflow，例：XX{overflow: hidden; height: 1px}

    用CSS控制链接全部在新窗口打开

    Posted by hezc on 2006年02月21日 1 comment

    定义全部链接都是弹出新窗口
    一般控制链接在新窗口打开，我们在html中这样做：

    <a href =”hezc.com” target=”_blank”>www.hezc.com</a>

    可是要是对于同一页面的所有链接都要求在新窗口打开，在每个链接中都要写上target=”_blank”，未免有些烦琐。实际上，我们有很多方法来实现这个功能。

    1，可以通过CSS来巧妙实现这个功能，代码如下：
    <style>
    a:active {
    text:e­xpression(target=”_blank”);
    }
    </style>
    2，通过html里的“base”标签实现这个功能
    <head>
    <base target=”_blank”>
    </head>

    =============================
    用JavaScript能实现关闭当前窗口同时打开新窗口
    <input type=”button” value=”原窗口” name=”s”onclick=”set()”>
    <input type=”button” value=”退出”onclick=”b_click()”>
    <script>
    var action=0
    function b_click(){
    if(action) window.open(“http://www.hezc.com/”,”ew”,”menubars=1″);
    else self.location=”http://123shouji.cn/cxt”;
    }

    function set(){
    if(action) {action=0;s.value=”原窗口”;}
    else{ action=1; s.value=”新窗口”;}
    }
    </script>

    ===========================
    关闭当前窗口
    ＜a href=”/”onClick=”javascript：window.close();return false;”＞关闭</a>

    网站的创意设计

    Posted by hezc on 2006年01月10日 0 comments

    创意(idea)是网站生存的关键。这一点相信大家都已经认同。然而作为网页设计师，最苦恼的就是没有好的创意来源。

    注意，这里说的创意是指站点的整体创意，（因为这个创意而产生这个站点，或者相同的内容，推出的创意不同），也与网页的平面设计创意有所不同。

    创意到底是什么，如何产生创意呢？

    创意是引人入胜，精彩万分，出奇不意的；创意是捕捉出来的点子，是创作出来的奇招……。这些讲法都说出了创意的一些特点，实质上，创意是传达信息的一种特别方式。

    比如Webdesigner(网页设计师)，我们将其中的E字母大写一下: wEbdEsigEr，感觉怎么样，这其实就是一种创意！

    创意并不是天才者的灵感，而是思考的结果。根据美国广告学教授詹姆斯的研究，创意思考的过程分五阶段：

    1.准备期–研究所搜集的资料，根据旧经验，启发新创意；
    2.孵化期–将资料咀嚼消化，使意识自由发展，任意结合；
    3.启示期–意识发展并结合，产生创意；
    4.验证期–将产生的创意讨论修正；
    5.形成期–设计制作网页，将创意具体化。

    创意是将现有的要素重新组合。

    比如，网络与电话结合，产生IP电话。从这一点上出发，任何人，包括你和我，都可以创造出不同凡响的创意。而且，资料越丰富，越容易产生创意。就好比万 花筒，筒内的玻璃片越多，所呈现的图案越多。你如果有心可以发现，网络上的最多的创意来自与现实生活的结合(或者虚拟现实)，例如在线书店，电子社区，在 线拍卖。你是否想到了一种更好的创意呢？

    创意思考的途径最常用的是联想，这里提供了网站创意的25种联想线索：

    1.把它颠倒
    2.把它缩小
    3.把颜色换一下
    4.使它更长
    5.使它闪动
    6.把它放进音乐里
    7.结合文字音乐图画
    8.使它成为年轻的
    9.使它重复
    10.使它变成立体
    11.参加竞赛
    12.参加打赌
    13.变更一部分
    14.分裂它
    15.使它罗曼蒂克
    16.使它速度加快
    17.增加香味
    18.使它看起来流行
    19.使它对称
    20.将它向儿童诉求
    21.价格更低
    22.给它起个绰号
    23.把它打包
    24.免费提供
    25.以上各项延伸组合

    需要一提的是：创意的目的是更好的宣传推广网站。如果创意很好，却对网站发展毫无意义，好比给奶牛穿高跟鞋，那么，我们宁可放弃这个创意！