首先我們定義一塊畫布，然后在上面畫一個(gè)圓形。

他看起來應(yīng)該是這個(gè)樣子的：（每一個(gè)實(shí)例我都會(huì)附加圖片以及demo鏈接，方便直觀的理解與源代碼的查看，查看的時(shí)候請(qǐng)使用標(biāo)準(zhǔn)瀏覽器）

點(diǎn)擊查看Demo

現(xiàn)在我們就讓這個(gè)圓動(dòng)起來

動(dòng)起來是這個(gè)樣子的（gif循環(huán)之后234三個(gè)demo將無法區(qū)分，所以這里的gif只循環(huán)一次，需要多次查看效果請(qǐng)刷新或者進(jìn)入demo查看）：

點(diǎn)擊查看Demo

我們可以看到圓動(dòng)起來的時(shí)候，circle元素里邊不再是空的，多了一個(gè)animate的元素，這個(gè)animate含有下面幾個(gè)屬性：

attributeName：動(dòng)畫屬性名，顧名思義，你想要改變哪個(gè)屬性

attributeType：動(dòng)畫屬性的類別，常見的兩個(gè)值，XML和css，取決于屬性是在xml里還是在style里，下面改變opacity的demo里，就是使用的css。不寫的時(shí)候默認(rèn)值為auto，他會(huì)先搜索css，建議寫上。

from to ：性的開始和結(jié)束值，from可選，當(dāng)不寫的時(shí)候會(huì)取默認(rèn)值。

begin dur ：動(dòng)畫的開始時(shí)間與結(jié)束時(shí)間。如果你想打開頁面過幾秒才開始動(dòng)畫，那么就定義begin就好了。

觀察上邊的動(dòng)畫，我們發(fā)現(xiàn)動(dòng)畫結(jié)束的時(shí)候又回到了第一幀，如果我們想讓他停在最后一幀，就需要用到 fill 屬性（animate的fill屬性與svg的fill填充要區(qū)分一下）

fill支持參數(shù)有：freeze與remove. 其中remove是默認(rèn)值，表示動(dòng)畫結(jié)束直接回到開始的地方，現(xiàn)在再看這個(gè)動(dòng)畫的樣子：

點(diǎn)擊查看Demo

這樣看起來動(dòng)畫還是沒有滿足我的需求，我想讓動(dòng)畫一直循環(huán)播放怎么辦？這就要用到 repeatCount

屬性的取值可以是一個(gè)數(shù)字，也可以是“indefinite”表示無限循環(huán)。現(xiàn)在動(dòng)畫變成了這樣：

點(diǎn)擊查看Demo

現(xiàn)在動(dòng)畫是循環(huán)了，可我還是覺得哪里別扭，第一幀和最后一幀并沒有銜接起來，看起來有突兀。這時(shí)候我們就回過頭再看看動(dòng)畫的開始和結(jié)束。
from和to只能定義開始和終結(jié)兩個(gè)時(shí)間點(diǎn)，另外還有一個(gè)屬性by，是可以替代to的，to表示的是一個(gè)絕對(duì)值，by表示的是一個(gè)offset，比如from為50，to為80，表示從50到80，by為80的話，表示offset為80，那么最終的結(jié)果就是130,如果我們的demo使用by，那么就是by 30.除了by意外，還有一個(gè)屬性values，他可以接受一組數(shù)值，比如我們想作出圓的呼吸效果，那么只需要

現(xiàn)在我們?cè)倏匆谎蹌偛诺膭?dòng)畫

點(diǎn)擊查看Demo

可是現(xiàn)在的效果我還是不滿意，我想讓這個(gè)圓形呼吸的同時(shí)改變透明度，這就是svg在單個(gè)對(duì)象上面做多重動(dòng)畫了。我們?cè)?attributeName=”r” 下面，增加一個(gè)animate元素，用來改變圓的透明度

現(xiàn)在這個(gè)動(dòng)畫是這個(gè)樣子的（gif并不能很好的展示出透明度的漸變，建議使用標(biāo)準(zhǔn)瀏覽器打開demo查看）：

點(diǎn)擊查看Demo

寫到這里，我上邊的呼吸效果已經(jīng)實(shí)現(xiàn)了，但是我現(xiàn)在又有了新的想法，我想放一排的圓，讓一個(gè)動(dòng)完，才讓下一個(gè)接著動(dòng)。這也就是我們編程里的“同步”概念，在svg里就是 同步動(dòng)畫。同步動(dòng)畫的實(shí)現(xiàn)很簡(jiǎn)單，只需要有動(dòng)畫id，然后下一個(gè)動(dòng)畫的 begin 值 為上一個(gè)的 id.end, 比如

我們來看一下同步動(dòng)畫的實(shí)例：

點(diǎn)擊查看Demo

更為強(qiáng)大的是，begin的值可以是表達(dá)式，比如

這樣就實(shí)現(xiàn)了同步的同時(shí)，帶有5s的偏移，也就是第一個(gè)結(jié)束5s之后，第二個(gè)動(dòng)畫才開始。OK，同步動(dòng)畫實(shí)現(xiàn)了，不過現(xiàn)在我要改需求……..把剛才的圓還給我，我要讓他旋轉(zhuǎn)。SVG的旋轉(zhuǎn)動(dòng)畫需要用到另一個(gè)<animateTransform>元素，他的用法和animate并沒有本質(zhì)的區(qū)別，只不過屬性需要換一批。比如我們相讓剛才那個(gè)圓形旋轉(zhuǎn)起來，等等，圓形原地旋轉(zhuǎn)的話，好像我們并看不出他在旋轉(zhuǎn)呀，那好吧，我們換一個(gè)旋轉(zhuǎn)起來視覺效果比較強(qiáng)的圖形，現(xiàn)場(chǎng)寫一個(gè)五角星出來，并給他加animateTransform ：

查看一下他動(dòng)起來的樣子：

點(diǎn)擊查看Demo

和前邊的例子并沒有本質(zhì)區(qū)別，唯一不同的地方在于from部分，from和to都是三個(gè)值，第一個(gè)值是角度，從0到360度的旋轉(zhuǎn)，第二個(gè)和第三個(gè)組成一個(gè)坐標(biāo)，這個(gè)坐標(biāo)決定了svg圍繞哪個(gè)點(diǎn)來進(jìn)行旋轉(zhuǎn)，關(guān)于這方面的知識(shí)推薦新同學(xué)了解一下SVG的坐標(biāo)系相關(guān)知識(shí)。transform的type可以包括translate，scale,skew等，和css相通，用法也與rotate大同小異，這里就不一一的列舉實(shí)例。實(shí)現(xiàn)了旋轉(zhuǎn)以后，我們?cè)贀Q一個(gè)更強(qiáng)大的動(dòng)畫元素，<animateMotion>.我們可以用他來實(shí)現(xiàn)引導(dǎo)線動(dòng)畫，讓你的圖形沿著復(fù)雜的路徑運(yùn)動(dòng)。比如我們先畫一條路徑

哎呀一不小心畫的太圓了，不過沒關(guān)系，我們現(xiàn)在把用過的二手五角星拿過來

加入了animateMotion元素，animateMotion的path決定了五角星的運(yùn)動(dòng)路線，可以先看一下效果，是這樣的

點(diǎn)擊查看Demo

好像哪里不對(duì)勁，對(duì)了，五角星沿著路徑轉(zhuǎn)動(dòng)的時(shí)候能不能隨著角度傾斜？那么就需要用到

這個(gè)屬性會(huì)讓你的圖形隨著你的路徑自動(dòng)做角度的調(diào)整。加上之后的最終動(dòng)效是這樣的

點(diǎn)擊查看Demo

總結(jié)語：看完上邊的實(shí)例，你其實(shí)已經(jīng)站在SVG動(dòng)畫的門里了，剩下的就是進(jìn)階知識(shí)的獲取，以及熟練度的達(dá)成。下一次我繼續(xù)和大家一起學(xué)習(xí)SVG動(dòng)畫一些進(jìn)階的技巧！

原文鏈接: 騰訊ISUX

點(diǎn)擊下載

2. Responsive Slides

點(diǎn)擊下載

3. iView Slider

點(diǎn)擊下載

4. Adaptor

點(diǎn)擊下載

5. Refineslide

點(diǎn)擊下載

6. Nivo Slider

點(diǎn)擊下載

7. Rhinoslider

點(diǎn)擊下載

8. Camera: jQuery Slider with Touch Support

點(diǎn)擊下載

9. Craftyslide

點(diǎn)擊下載

]]> http://www.mxio.cn/35192.html/feed 0 http://www.mxio.cn/34673.html http://www.mxio.cn/34673.html#respond Fri, 07 Jun 2013 01:49:46 +0000 為什么Facebook是藍(lán)色的——從最初到最新的版本，幾經(jīng)設(shè)計(jì)更迭，始終不變的主色調(diào)都是藍(lán)色？答案其實(shí)很簡(jiǎn)單，根據(jù)《紐約客》的一次采訪，F(xiàn)acebook的創(chuàng)始人馬克·扎克伯格其實(shí)是一個(gè)紅綠色盲，他只能分辨出藍(lán)色：“藍(lán)色對(duì)我來說是色彩最豐富的顏色。”

* Facebook最初始的設(shè)計(jì)界面，那時(shí)候它還叫做thefacebook.com。當(dāng)時(shí)，想要在上面開個(gè)賬戶必須有一個(gè)以.edu（哈佛大學(xué)）結(jié)尾的郵箱才行。

無心插柳也好，有意栽培也好，色彩往往能夠體現(xiàn)互聯(lián)網(wǎng)品牌的創(chuàng)始人的審美和喜好，而設(shè)計(jì)師對(duì)于色彩的挑選和取舍，也是完成作品中的必備環(huán)節(jié)。

Youtube設(shè)計(jì)師Marc Hemeon就曾收集了18組流行網(wǎng)站或產(chǎn)品的按鈕設(shè)計(jì)色彩，用來評(píng)估和調(diào)研色彩對(duì)于用戶心理的影響：

對(duì)應(yīng)網(wǎng)站或產(chǎn)品的謎底如下：

1、Google
2、Twitter
3、Facebook
4、Microsoft
5、Pinterest
6、Yahoo
7、Instagram
8、Flickr
9、Spotify
10、Rdio
11、Svbtle
12、Medium
13、Basecamp
14、Square
15、Amazon
16、Quora
17、LinkedIn
18、Path

大部分網(wǎng)站或產(chǎn)品的按鈕色彩都不會(huì)超過3種，指向“動(dòng)作”的按鈕應(yīng)當(dāng)統(tǒng)一為同一種顏色，比如Google的“搜索”按鈕是藍(lán)色，而Twitter的“注冊(cè)”按鈕則是明亮的黃色。

社交分享工具Buffer的聯(lián)合創(chuàng)始人Leo Widrich在博客上補(bǔ)充了關(guān)于色彩的一些觀點(diǎn)，摘錄部分內(nèi)容如下。

色彩能夠幫助品牌極為簡(jiǎn)易的建立用戶認(rèn)知：

灰色：象征冷靜、中立；（蘋果、維基百科、紐約時(shí)報(bào)……）
綠色：象征健康、生命；（BP石油、食品超市whole foods、星巴克……）
藍(lán)色：象征可靠、力量；（戴爾、大眾汽車、IBM……）
紫色：象征智慧、想象；（雅虎、T-Mobile、科幻主題電視臺(tái)Syfy……）
紅色：象征血?dú)狻⒛贻p；（可口可樂、樂高、肯德基……）
橙色：象征歡樂、信任；（芬達(dá)、亞馬遜、火狐……）
黃色：象征溫暖、透明；（百思買、法拉利、麥當(dāng)勞……）

站在消費(fèi)者角度，色彩也能夠在理解和決策階段起到一定的影響作用：

黃色：吸引注意力的購物窗口；
紅色：刺激心血的緊迫感，常出現(xiàn)在清倉場(chǎng)景；
藍(lán)色：多用于銀行和商業(yè)機(jī)構(gòu)里，強(qiáng)調(diào)安全；
綠色：讓人聯(lián)想到富裕和輕松，緩解壓力；（支付寶的信用卡還款按鈕選擇了綠色作為主色調(diào)，能夠理解原因了吧）
橙色：呼叫意味濃厚，用于創(chuàng)建下訂、購買、出售的行動(dòng)；
粉色：服務(wù)于女性和年輕女孩的浪漫色調(diào)；
黑色：奢侈品的最佳匹配；
紫色：給人舒緩&平靜的感受，常被美容及抗衰老產(chǎn)品使用；

男性和女性對(duì)于色彩的喜好度有所偏差：

企業(yè)分析服務(wù)公司KISSmetrics的調(diào)查報(bào)告顯示（這份報(bào)告主要用于建議App產(chǎn)品的創(chuàng)業(yè)者在產(chǎn)品設(shè)計(jì)上的策略）——
女性喜愛的色彩：藍(lán)色、紫色和綠色；
女性討厭的色彩：橙色、棕色和灰色；

男性喜愛的色彩：藍(lán)色、綠色和黑色；
男性喜愛的色彩：褐色、橙色和紫色；

色彩能夠決定轉(zhuǎn)化率的差距：

美國數(shù)字營(yíng)銷公司Hubspot曾經(jīng)做過一場(chǎng)A/B Testing，用于測(cè)試不同顏色對(duì)于用戶點(diǎn)擊轉(zhuǎn)化造成的差異——

左右兩個(gè)測(cè)試顏面在內(nèi)容上完全一直，唯一不同的是按鈕的顏色，在超過2000人次的樣本測(cè)試中，最終紅色方案的點(diǎn)擊率超過綠色方案的點(diǎn)擊率足足21%。
而在測(cè)試之前，大部分的研究員都猜測(cè)綠色方案會(huì)獲得更高的點(diǎn)擊，因?yàn)榫椭庇X而言，綠色代表著通行、準(zhǔn)許通過的意思，而紅色則更傾向于警告、阻止意味。

最后，為什么Html語言里超鏈接的默認(rèn)顏色是藍(lán)色的？

因?yàn)樗{(lán)色是從灰色底色中脫穎而出的最佳色調(diào)。

這個(gè)決定是由Tim Berners-Lee——萬維網(wǎng)的發(fā)明者做出的。在他那個(gè)年代，互聯(lián)網(wǎng)的第一代瀏覽器Mosaic顯示的網(wǎng)頁底色通常都是灰底黑字，為了讓超文本鏈接能夠更方便識(shí)別，Tim Berners-Lee將超鏈接定義為藍(lán)色并帶有下劃線的文字。

一個(gè)好的網(wǎng)頁設(shè)計(jì)會(huì)給用戶帶來記憶深刻，好用易用的體驗(yàn)。從網(wǎng)頁設(shè)計(jì)的版式、信息層級(jí)、圖片、色彩等視覺方面的運(yùn)用，直接影響到用戶對(duì)網(wǎng)站的最初感覺，而在這些內(nèi)容中，色彩的配色方案是至關(guān)重要的，網(wǎng)站整體的定位、風(fēng)格調(diào)性都需要通過顏色，給用戶帶來感官上的刺激，從而產(chǎn)生共鳴。

從色彩研究的方向來看，色彩分為色調(diào)、飽和度、明度三方面，顏色的運(yùn)用是純色之間的關(guān)系，以及它們混合在一起的效果。我們可以從當(dāng)前眾多的網(wǎng)絡(luò)應(yīng)用中的實(shí)例，找到色彩運(yùn)用的一些廣泛的色彩關(guān)系和配色方案，通過這些色彩的關(guān)系，可以作為實(shí)際工作學(xué)習(xí)中配色的指南。

單色：使用一種色調(diào)不同的飽和度與亮度

近似色：使用色盤中的鄰近色調(diào)

互補(bǔ)色：使用色盤中的相反色調(diào)

分割互補(bǔ)色：使用一個(gè)色調(diào)和兩個(gè)與它的補(bǔ)色鄰近色調(diào)

三分色階：使用色盤中的等距三個(gè)色調(diào)

雙互補(bǔ)色：使用兩個(gè)色調(diào)和它們的補(bǔ)色

近似互補(bǔ)色：使用兩個(gè)互補(bǔ)色調(diào)和一個(gè)顏色相近色調(diào)

中間色：使用沒有色度的顏色

突出色：在沒有色調(diào)的顏色中突出一個(gè)高飽和度的色調(diào)

暖色：使用色盤中暖色調(diào)的顏色

冷色：使用色盤中冷色調(diào)的顏色

原文地址：阿里巴巴良無限UPD團(tuán)隊(duì)

下面介紹常見的CSS簡(jiǎn)寫規(guī)則：

一、盒子大小

這里主要用于兩個(gè)屬性：margin和padding，我們以margin為例，padding與之相同。盒子有上下左右四個(gè)方向，每個(gè)方向都有個(gè)外邊距：

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;

你可以簡(jiǎn)寫成：

margin:1px 2px 3px 4px;

語法 margin:top right bottom left;

//四個(gè)方向的邊距相同，等同于margin:1px 1px 1px 1px;
margin:1px;
//上下邊距都為1px，左右邊距均為2px，等同于margin:1px 2px 1px 2px;
margin:1px 2px;
//右邊距和左邊距相同，等同于margin:1px 2px 3px 2px;
margin:1px 2px 3px;
//注意，這里雖然上下邊距都為1px，但是這里不能縮寫。
margin:1px 2px 1px 3px;

二、邊框(border)

邊框的屬性如下：

border-width:1px;
border-style:solid;
border-color:#000;

可以縮寫為一句：

border:1px solid #000;

語法 border:width style color;

三、背景(Backgrounds)

背景的屬性如下：

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:00;

可以縮寫為一句：

background:#f00 url(background.gif) no-repeat fixed 0 0;

語法是background:color image repeat attachment position;
你可以省略其中一個(gè)或多個(gè)屬性值，如果省略，該屬性值將用瀏覽器默認(rèn)值，默認(rèn)值為：

• color: transparent

• image: none

• repeat: repeat

• attachment: scroll

• position: 0% 0%

四、字體(fonts)

字體的屬性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

可以縮寫為一句：

font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;

注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個(gè)值。

五、列表(lists)

取消默認(rèn)的圓點(diǎn)和序號(hào)可以這樣寫list-style:none;,
list的屬性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

可以縮寫為一句：

list-style:square inside url(image.gif);

六、顏色(Color)

16進(jìn)制的色彩值，如果每?jī)晌坏闹迪嗤?，可以縮寫一半。例如：

Aqua: #00ffff ——#0ff
Black: #000000 ——#000
Blue: #0000ff ——#00f
Dark Grey: #666666 ——#666
Fuchsia:#ff00ff ——#f0f
Light Grey: #cccccc ——#ccc
Lime: #00ff00 ——#0f0
Orange: #ff6600 ——#f60
Red: #ff0000 ——#f00
White: #ffffff ——#fff
Yellow: #ffff00 ——#ff0

七、屬性值為0

書寫原則是如果CSS屬性值為0，那么你不必為其添加單位(如:px/em)，你可能會(huì)這樣寫:

padding:10px 5px 0px 0px;

試試這樣吧:

padding:10px 5px 00 ;

八、最后一個(gè)分號(hào)

最后一個(gè)屬性值后面分號(hào)可以不寫，如：

#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal;
}

可以簡(jiǎn)寫成:

#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal
}

九、字體粗細(xì)(font-weight)

你可能會(huì)這樣寫:

h1{
font-weight:bold;
}
p{
font-weight:normal;
}

可以簡(jiǎn)寫成:

h1{
font-weight:700;
}
p{
font-weight:400;
}

十、圓角半徑(border-radius)

border-radius是css3中新加入的屬性，用來實(shí)現(xiàn)圓角邊框。

-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;

可以簡(jiǎn)寫成:

-moz-border-radius:0 6px 6px;
-webkit-border-radius:0 6px 6px;
border-radius:0 6px 6px;

語法 border-radius:topleft topright bottomright bottomleft

形式需要思考創(chuàng)造，圖片素材需要學(xué)習(xí)處理，文字需要梳理編排，但網(wǎng)頁色彩是不是一定需要有天生的色感、豐富的理論和多年經(jīng)驗(yàn)沉淀才能運(yùn)用自如？

當(dāng)然不！

關(guān)于網(wǎng)頁配色

網(wǎng)頁配色的文章在網(wǎng)絡(luò)上很多，甚至有些泛濫，稍微關(guān)注過的同學(xué)應(yīng)該都知道“色輪”、“色卡”等輔助性配色工具，但那更多都是從印刷介質(zhì)上的色彩系統(tǒng)延伸出來的，不完全適用于網(wǎng)頁，甚至造成很大的局限，比如你會(huì)較真的通過色輪來選用網(wǎng)頁色彩嗎？再比如通過下面提供的配色組合，你能自由的應(yīng)對(duì)一個(gè)又一個(gè)的類型相若的網(wǎng)頁設(shè)計(jì)需求嗎？

由于CMYK與RGB色彩模式不同，網(wǎng)頁的色彩呈現(xiàn)數(shù)量要龐大的多，選用也應(yīng)該更自由，但在配色上卻常碰到設(shè)計(jì)作品偏臟、發(fā)灰、花哨等大問題，這事兒得解決。

網(wǎng)頁案例剖析

“網(wǎng)頁配色不宜超過三種。”

真理，這沒錯(cuò)，但更多是從色相（赤橙黃綠青藍(lán)紫等不同顏色）上來說的。

色相差異明顯，主要色彩的選取就比較好辦，常見的有對(duì)比色、臨近色、冷暖色調(diào)互補(bǔ)等方式，可以簡(jiǎn)單設(shè)定，或直接從成功作品中借鑒主輔色配比都可以，比如常見的朱紅點(diǎn)綴深藍(lán)、明黃點(diǎn)綴深綠等。

但通常，我們需要面對(duì)的設(shè)計(jì)需求在色彩分配上會(huì)有更多的問題出現(xiàn)：

（由于本人從事游戲網(wǎng)頁視覺設(shè)計(jì)工作，故案例均以游戲網(wǎng)頁做示意說明，其他網(wǎng)頁類型可以做延伸思考或僅作參閱）

如上所示，根據(jù)網(wǎng)頁信息的多寡，會(huì)有更多色彩區(qū)域的層級(jí)劃分和文字信息層級(jí)區(qū)分需求，那么在守住“網(wǎng)頁色彩（相）不超過三種”的原則下，只能尋找更多同色系的色彩來完善設(shè)計(jì)，也就是在“飽和度”和“明度”上做文章。

這也就是本文為解決這一問題所要分享的“天然”配色技巧：疊柔配色法。

疊柔配色技巧分享（這里才是正文，上面都是廢話）

這個(gè)方法非常簡(jiǎn)單，無需知道三角函數(shù)、四則運(yùn)算，無需理解色彩指數(shù)和直方圖，甚至不用了解色階曲線和亮度強(qiáng)弱……甚至，你可以對(duì)色彩毫無知覺。

★只需要明白三個(gè)關(guān)鍵詞：疊加、柔光和透明度（填充）。

如果連這三個(gè)關(guān)鍵詞都不甚明了，那就記住他們所在的位置（下圖）：

注意：透明度與填充略有不同，填充不會(huì)影響到“混合選項(xiàng)”的效果，而透明度則是作用于整個(gè)圖層。

順便，花幾分鐘時(shí)間了解一下這個(gè)配色技巧的原理：

即：用純白色（#ffffff）和純黑色（#000000）通過“疊加”和“柔光”的混合模式（效果類似調(diào)整飽和度和明度），在任意一個(gè)色彩上得到最匹配的顏色（然后通過調(diào)整透明度選取最適合的輔色）。

（上圖示例中，調(diào)整疊/柔模式的黑白色塊的不同透明度（取10%到100%整數(shù)值為例）就可以得到差異較明顯的40種配色，通過這種技巧，理論上每一種顏色都可以輕易獲得無窮盡的“天然配色”，并且是“0失誤”！）

★ 由于疊加和柔光模式對(duì)圖像內(nèi)的最高亮部分和最陰影部分無調(diào)整，因此該配色方法對(duì)純黑色和純白色不起作用。

設(shè)計(jì)實(shí)戰(zhàn)演示：

要不要像上面圖示看起來的那樣復(fù)雜？
不用，只需要理解了上面的方法，就可以忘記圖示，在你的設(shè)計(jì)工作中自由發(fā)揮！

簡(jiǎn)單三步：
①  一個(gè)黑或白色，或黑白漸變（可以是點(diǎn)、線、面…甚至字體）
②  混合模式選擇疊加或柔光
③  調(diào)整透明度（1%-100%隨意，省心的做法是直接鍵入一個(gè)整數(shù)值，比如：輕質(zhì)感類頁面可以選擇20%-40%，重質(zhì)感感類可以鍵入60%或以上）

如下圖：

（無論你采用何種主色，用黑白色彩疊加或柔光，你都可以輕松自如的獲得完美匹配的整套色系。）

這并不僅僅適用于色域劃分或提取幾個(gè)輔色，如下圖：字體顏色、細(xì)節(jié)線條、按鈕漸變、邊角高光、描邊陰影……都可以用黑白色肆意揮灑！

方法延伸（細(xì)節(jié)篇）

假如將該方法運(yùn)用到一個(gè)按鈕上……

通過混合選項(xiàng)中的“陰影、外發(fā)光、描邊（不適用疊柔法）、內(nèi)陰影、內(nèi)發(fā)光”可以自由的刻畫5層像素級(jí)細(xì)節(jié)（當(dāng)然，通常在實(shí)際的使用中刻畫1到3層即可）。

且無論形狀、色彩如何變化，這些細(xì)節(jié)都如影隨形、色彩都隨變而變~可節(jié)省大量重調(diào)細(xì)節(jié)或盲目選取配色的時(shí)間！

細(xì)節(jié)、品質(zhì)和效率，一石三鳥，兼而得之！

（近期看到設(shè)計(jì)圈有討論“網(wǎng)頁雕花不可取”的課題，假如讓細(xì)節(jié)成為習(xí)慣，讓美感成為直覺，雕花也便只是普通設(shè)計(jì)行為而已。）

案例歷練：

后記：

疊柔配色法：無招勝有招~把抓不住的感覺交給精密的計(jì)算機(jī)，科學(xué)化進(jìn)行你的設(shè)計(jì)。
更短的時(shí)間，更高的品質(zhì)，你，值得擁有~……
另：方法是死的，人是活的，配合色階、曲線、色彩平衡等，還可以玩出更多花樣來……

分享來自：TGideas-騰訊游戲官方設(shè)計(jì)團(tuán)隊(duì)

    [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

網(wǎng)頁打開的順序都是按頁面從上到下的順序加載完成的，所以要想使廣告不影響頁面打開速度，就要等頁面全部打開完成后，再加載JS代碼。
 
先加載完頁面再加載廣告的原理：
網(wǎng)頁打開的順序都是按頁面從上到下的順序加載完成的，所以要想使廣告不影響頁面打開速度，就要等頁面全部打開完成后，再加載JS代碼。等頁面加載完再加載廣告其實(shí)就是將廣告的 JS 代碼放在頁面的底部，等頁面內(nèi)容打開完成后再加載到廣告代碼，再用頁面上預(yù)留好的的 DIV 輸出廣告。

使用方法：
1、將以下代碼放置頁面中想要放廣告的地方
<div id=”myads”>載入中…</div>

2、將一下代碼放置頁面底部，也就是footer，php文件的底部。
<div id=”span_myads”>這里放廣告代碼</div>
<script type=”text/javascript”>
document.getElementById(“myads”).innerHTML = document.getElementById(“span_myads”).innerHTML;
document.getElementById(“span_myads”).innerHTML = “”;
</script>

OK，這樣就實(shí)現(xiàn)了先加載完頁面再加載廣告了，怎么樣不影響大家閱讀吧~

    [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]

在css中使用margin可以將margin-top，margin-right，margin-bottom，margin-left，縮寫為一個(gè)標(biāo)記，順序?yàn)?SPAN style="COLOR: #ff0000">上右下左（順時(shí)針）。

margin標(biāo)記可以帶一個(gè)、二個(gè)、三個(gè)、四個(gè)參數(shù)，各有不同的含義。

既然HTML中定義了這么多標(biāo)簽，而且每種標(biāo)簽都有其用法，我們?yōu)槭裁床槐M量去使用這些標(biāo)簽?zāi)?。下面收集并整理?6個(gè)常被我們遺忘卻非常有用的HTML標(biāo)簽。

1. <!? ?> :注釋

2. <!DOCTYPE>：文檔類型聲明

文檔類型，會(huì)使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁并顯示，忽略DTDs，將使網(wǎng)頁進(jìn)入一種混亂模式(quirks mode)。

示例：

XHTML過渡定義類型，此類型可以使用HTML4中的標(biāo)簽

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

XHTML嚴(yán)格定義類型，此文檔只可以使用XHTML1中定義的標(biāo)簽

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

XHTML1.1版定義類型

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

XHTML框架定義類型。(可以使用框架)

<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

3. <abbr>：縮寫

示例：<abbr title=”Pmited”>Ltd.</abbr>

說明：簡(jiǎn)稱和縮寫是對(duì)一個(gè)慣用詞組的縮寫表示，一般使用詞組中每個(gè)單詞的首字母，比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一種提取首字母的縮寫.有時(shí)候縮寫經(jīng)常會(huì)在最后加一個(gè)。

4. <acronym>： 取首字母的縮寫

示例：<acronym title=”Cascading Style Sheets”>CSS</acronym>

5. <area>： 定義圖像點(diǎn)擊區(qū)域

area標(biāo)簽是單獨(dú)出現(xiàn)的，<area />

area標(biāo)簽必須使用在map標(biāo)簽中，而且必須配合img標(biāo)簽使用。

屬性：

Common ― 一般屬性

accesskey ― 鏈接的快捷鍵訪問方式

alt ― 圖像的提示文字

coords ― 定義可點(diǎn)擊區(qū)域圖形的坐標(biāo)

href ― HTML鏈接源的URL

nohref ― 圖像點(diǎn)擊排除的區(qū)域，當(dāng)不使用href時(shí)應(yīng)使用nohref

shape ― 可點(diǎn)擊區(qū)域的形狀

tabindex ― 使用”Tab”鍵的遍歷順序

target ― 鏈接目標(biāo)

area是cPent-side image map area的意思，區(qū)域

area標(biāo)簽示例：

<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

6. <base>: 定義基URL用于頁面的鏈接與引用

base標(biāo)簽是單獨(dú)出現(xiàn)的，<base />

base標(biāo)簽只能放置在head標(biāo)簽內(nèi)

當(dāng)使用相對(duì)路徑定義鏈接時(shí)，可以使用base標(biāo)簽定義基URL解析所有文檔中定義的相對(duì)路徑的URL

屬性：

href ― 基URL

target ― 鏈接目標(biāo)

base是document base URI的意思

base標(biāo)簽示例

<head> <base href=”http://www.renniaofei.com/” target=”_blank”> </head>

使用上面示例代碼的html頁面中的相對(duì)鏈接，將直接指向基URL http://www.renniaofei.com/，并且使用彈出窗口。

base標(biāo)簽在框架中的使用

base標(biāo)簽通?？梢允褂迷诳蚣苕溄又校?br /> <frameset cols=”20%, *”> <frame src=”Pst.html”> <frame src=”http://www.renniaofei.com/” name=”mainTarget”> < /frameset>

鏈接頁P(yáng)st.htm

l<head> <base target=”mainTarget”> </head> < a href=”http://www.renniaofei.com/category/design/”>design</a> < a href=”http://www.renniaofei.com/category/graphic/”>graphic</a> <a href=”http://www.renniaofei.com/category/inspiration/”>inspiration</a> <a href=”http://www.renniaofei.com/category/freebies/”>freebies</a>

通過上面示例可以避免在每個(gè)鏈接中寫入target=”mainTarget”

7. <blockquote>：表示引用塊

blockquote標(biāo)簽是成對(duì)出現(xiàn)的，以<blockquote>開始，以</blockquote>結(jié)束

屬性：

Common ― 一般屬性

cite ― 被引用內(nèi)容的URI

示例：

<blockquote cite=”http://www.renniaofei.com/xhtml/”> <p>標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)要區(qū)分內(nèi)容與表現(xiàn)，學(xué)習(xí)標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)。</p> </blockquote>

8. <button> ：定義按鈕

button標(biāo)簽是成對(duì)出現(xiàn)的，以<button>開始，</button>結(jié)束

可以定義比input內(nèi)容更豐富的按鈕。

屬性：

Common ― 一般屬性

accesskey ― 快捷鍵訪問方式

disabled ― 禁止使用

name ― 標(biāo)簽名稱

tabindex ― 使用”Tab”鍵的遍歷順序

type ― 按鈕類型

button ― 普通按鈕

reset ― 重置表單按鈕

submit ― 提交按鈕

value ― 通過表單傳遞到服務(wù)器端的數(shù)據(jù)

button是push button的意思，按鈕

button標(biāo)簽示例：

<button type=”submit”>提交</button>

一個(gè)使用文字的普通的提交按鈕

<button type=”reset”> 從<strong>任鳥飛</strong>提交表單 </button>

改變按鈕內(nèi)加重文字的button標(biāo)簽

<button type=”button”> <img src=”renniaofei.png” alt=”提交” /></button>

說明：使用圖片的button標(biāo)簽，注意有alt的提示文字。

9. <caption>：HTML表格的標(biāo)題

caption標(biāo)簽是成對(duì)出現(xiàn)的，以<caption>開始。</caption>結(jié)束

屬性：

Common ― 一般屬性

caption:標(biāo)題

示例：

<table width=”80%”> <caption> 域名數(shù)量介紹 < /caption> <tr> < th>www.renniaofei.com</th> < th>.com域名的數(shù)量</th> <th>.cn域名的數(shù)量</th> < th>.net域名的數(shù)量</th> </tr> <tr> < td>2003年</td> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>

說明：

caption標(biāo)簽可以為表格提供一個(gè)描述，和圖像的說明alt比較類似.默認(rèn)情況下，瀏覽器顯示表格標(biāo)題在表格的上方。

CSS里的caption-side屬性用來控制表格標(biāo)題顯示的位置。

10. <cite>引用

cite標(biāo)簽是成對(duì)出現(xiàn)的，以<cite>開始，以</cite>結(jié)束

屬性：

Common ― 一般屬性

cite ― 引用內(nèi)容的URI

cite是citation的縮寫

示例：

<cite cite=”http://www.renniaofei.com/”>一步步的教我學(xué)會(huì)HTML與XHTML</cite>

11. <col> 可以對(duì)HTML表格結(jié)構(gòu)化分區(qū)后的一個(gè)或幾個(gè)區(qū)域使用同樣的樣式行

col標(biāo)簽是單獨(dú)出現(xiàn)的，<col />

屬性：

Common ― 一般屬性

span ― 定義一個(gè)col跨越的列數(shù),默認(rèn)值為1

12. <colgroup>表示對(duì)HTML表格進(jìn)行結(jié)構(gòu)化的分區(qū),在此分區(qū)中可以通過使用col定義每列表格的樣式

colgroup標(biāo)簽是成對(duì)出現(xiàn)的，以<colgroup>開始，以</colgroup>結(jié)束

屬性：

Common ― 一般屬性

span ― 定義一個(gè)colgroup跨越的列數(shù),默認(rèn)值為1

13. <dd>代表HTML自定義列表描述

dd標(biāo)簽是成對(duì)出現(xiàn)的，,以<dd>開始，</dd>結(jié)束

屬性：

Common ― 一般屬性

dd是definition description的縮寫

14. del 標(biāo)簽 ― 定義被刪除的文本

del標(biāo)簽是成對(duì)出現(xiàn)的,以<del>開始，</del>結(jié)束

del通常應(yīng)連同ins標(biāo)簽一同使用，表示被刪除與被插入的文本

通過del與ins定義文檔可以幫助了解文檔內(nèi)容的修改過程，利于多人編輯系統(tǒng)

使用del定義的文本通常帶有刪除線

屬性：

Common ― 一般屬性

cite ― 引用網(wǎng)址，定義為何刪除的引用網(wǎng)址

datetime ― 刪除的時(shí)間與日期

title ― 定義刪除的目的或提示

del是deleted text的縮寫，刪除文本

del標(biāo)簽示例：

<p>任鳥飛網(wǎng)頁設(shè)計(jì)網(wǎng)址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ < /del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.renniaofei.com/</del> 網(wǎng)址已經(jīng)刪除。 </p>

15. <dir> 定義多層目錄列表

不符合標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)的理念，不贊成使用.

dir標(biāo)簽是成對(duì)出現(xiàn)的，以<dir>開始，</dir>結(jié)束

屬性：

Common ― 一般屬性

dir是directory Psts的縮寫，目錄列表

16. <dfn> ? 定義標(biāo)簽

dfn標(biāo)簽是成對(duì)出現(xiàn)的，以<dfn>開始，以</dfn>結(jié)束

屬性：

Common ― 一般屬性

dfn是defining instance的縮寫

示例： <dfn>任鳥飛</dfn>網(wǎng)頁設(shè)計(jì)網(wǎng)!

17. <dl> 代表HTML自定義列表

dl標(biāo)簽是成對(duì)出現(xiàn)的，以<dl>開始，</dl>結(jié)束

自定義列表的開始使用<dl>標(biāo)簽，列表中每個(gè)元素的標(biāo)題使用<dt>(definition term)定義，后面跟隨<dd>(definition description)用于描述列表中元素的內(nèi)容.

屬性：

Common ― 一般屬性

dl是definition Psts的英文縮寫

示例：

<dl> <dt>www</dt> <dd>World Wide Web的縮寫.</dd> <dt>renniaofei</dt> < dd>任鳥飛</dd> <dd>www的:).</dd> < dt>com</dt> <dt>com.cn</dt> < dt>cn</dt> <dd>這都是域名的后綴.</dd> </dl>

說明：

不一定每個(gè)dt標(biāo)簽要對(duì)應(yīng)一個(gè)dd，可以一對(duì)多或多對(duì)一(就像上面的例子)

18. <dt>代表HTML自定義列表組

dt標(biāo)簽是成對(duì)出現(xiàn)的，以<dt>開始，</dt>結(jié)束

屬性：

Common ― 一般屬性

dt是definition term的縮寫

19. <em> 強(qiáng)調(diào)標(biāo)簽

em標(biāo)簽是成對(duì)出現(xiàn)的，以<em>開始，以</em>結(jié)束

屬性：

Common ― 一般屬性

em是emphasis的縮寫

示例： 強(qiáng)調(diào)一下,<em>不要</em>和我開玩笑!

20. <ins> 定義被插入的文本

ins標(biāo)簽是成對(duì)出現(xiàn)的，以<ins>開始，</ins>結(jié)束

ins通常應(yīng)連同del標(biāo)簽一同使用，表示被插入與被刪除的文本

通過ins與del定義文檔可以幫助了解文檔內(nèi)容的修改過程，利于多人編輯系統(tǒng)

使用ins定義的文本通常帶有下劃線

屬性：

Common ― 一般屬性

cite ― 引用網(wǎng)址，定義為何插入的引用網(wǎng)址

datetime ― 插入的時(shí)間與日期

title ― 定義插入的目的或提示

ins是inserted text的縮寫，插入文本

ins標(biāo)簽示例：

<p>任鳥飛網(wǎng)頁設(shè)計(jì)網(wǎng)址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ < /del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.renniaofei.com/</del> 網(wǎng)址已經(jīng)刪除。 </p>

21. <kbd>標(biāo)簽表明使用者輸入的文字

kbd標(biāo)簽是成對(duì)出現(xiàn)的，以<kbd>開始，以</kbd>結(jié)束

屬性:

Common ― 一般屬性

示例： To exit, type <kbd>QUIT</kbd>.

22. <map>定義圖像點(diǎn)擊區(qū)域的集合

map標(biāo)簽是成對(duì)出現(xiàn)的,以<map>開始，</map>結(jié)束

map標(biāo)簽必須配合area標(biāo)簽使用

map標(biāo)簽中name與id屬性指定的值必須與定義圖像點(diǎn)擊區(qū)中圖像(img)的usemap屬性指定的值一致

屬性

Common ― 一般屬性

id ― 定義map的名稱。

name ― 定義map的名稱。

map是cPent-side image map的意思

map標(biāo)簽示例：

<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>

23. <menu> 定義菜單列表

不符合標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)的理念，不贊成使用。

menu標(biāo)簽是成對(duì)出現(xiàn)的,以<menu>開始，</menu>結(jié)束

屬性

Common ― 一般屬性

menu:菜單

24. <noframes>對(duì)不支持框架的設(shè)備進(jìn)行提示

noframes標(biāo)簽是成對(duì)出現(xiàn)的，以<noframes>開始，</noframes>結(jié)束

由于frameset內(nèi)不能包含body標(biāo)簽，因此noframes內(nèi)部必須包含body標(biāo)簽

示例

<frameset cols=”50%,25%,25%”> <frame src=”http://www.renniaofei.com/category/design/”> <frame src=”http://www.renniaofei.com/graphics/”> <frame src=”http://www.renniaofei.com/inspiration/”> <noframes> <body> < p>任鳥飛網(wǎng)頁設(shè)計(jì)網(wǎng)使用了框架技術(shù)，但是您的瀏覽器不支持框架，請(qǐng)升級(jí)您的瀏覽器以便正常訪問。</p> < /body> </noframes> </frameset>

25. <noscript>無法加載腳本時(shí)的提示文字

noscript標(biāo)簽是成對(duì)出現(xiàn)的，以<noscript>開始,以</noscript>結(jié)束

示例

<noscript>此頁面無法加載js腳本代碼。</noscript>

26. <q>

表示一個(gè)行引用

q標(biāo)簽是成對(duì)出現(xiàn)的，以<q>開始，以</q>結(jié)束。

屬性:

Common ― 一般屬性

cite ― 引用內(nèi)容的URI

q是quoted text的縮寫

示例：

<cite>古人</cite>云：<q>良言一句三冬暖，惡語傷人六月寒。</q>

27. <s>定義刪除線的文字

不符合標(biāo)準(zhǔn)網(wǎng)頁設(shè)計(jì)的理念，不贊成使用。

s標(biāo)簽是成對(duì)出現(xiàn)的，以<s>開始，以</s>結(jié)束

屬性：

Common ― 一般屬性

s是strikethrough的縮寫

28. <sub>表示下標(biāo)

sub標(biāo)簽是成對(duì)出現(xiàn)的，以_{開始。以}結(jié)束

屬性：

Common ― 一般屬性

sub是subscript的縮寫

29. <sup>表示上標(biāo)

sup標(biāo)簽是成對(duì)出現(xiàn)的，以^{開始，以}結(jié)束

屬性：

Common ― 一般屬性

sup是superscript的縮寫

30. <tbody> 表示HTML表體

瀏覽器顯示表格時(shí)，通常是完全下載表格后，再全部顯示，所以當(dāng)表格很長(zhǎng)時(shí),可以使用tbody分段顯示。

31. <tfoot>表示HTML表腳

表格的表腳tfoot，可以使用單獨(dú)的樣式定義表腳，并且在打印時(shí)可以在分頁的下部打印表腳。

32. <th>代表HTML表格中的表頭

th標(biāo)簽是成對(duì)出現(xiàn)的,以<th>開始，</th>結(jié)束

屬性：

Common ― 一般屬性

abbr ― 代表表頭的簡(jiǎn)寫

axis ― 對(duì)單元格在概念上分類

colspan ― 一行跨越多列

headers ― 連接表格的數(shù)據(jù)與表頭

rowspan ― 一列跨越多行

scope ― 定義行或列的表頭

aPgn ― 代表水平對(duì)齊方式(left(左對(duì)齊) | center(居中對(duì)齊) | right(右對(duì)齊) | justify)(此屬性應(yīng)該使用CSS實(shí)現(xiàn))

vaPgn ― 代表垂直對(duì)齊方式(top(頂部對(duì)齊) | middle(中部對(duì)齊) | bottom(下部對(duì)齊) | basePne(基線對(duì)齊))(此屬性應(yīng)該使用CSS實(shí)現(xiàn))

th是table header cell的縮寫

示例：

<table width=”80%” border=”1″> <tr> < th>www.renniaofei.com</th> < th>.com域名的數(shù)量</th> <th>.cn域名的數(shù)量</th> < th>.net域名的數(shù)量</th> </tr> <tr> < th>2003年</th> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <th>2004年</th> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <th>2005年</th> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>

33. <thead>表示HTML表頭

表格的頭部thead，可以使用單獨(dú)的樣式定義表頭，并且在打印時(shí)可以在分頁的上部打印表頭

34. l 標(biāo)簽 ― 表示一段語句

l標(biāo)簽是成對(duì)出現(xiàn)的，以<l>開始,以</l>結(jié)束

屬性：

Common ― 一般屬性

l是Pne of text的縮寫

示例： <l>一行實(shí)實(shí)在在的文字!</l>

35. <Code>代碼標(biāo)簽

code標(biāo)簽是成對(duì)出現(xiàn)的，以<code>開始，以</code>結(jié)束，常用于顯示源代碼。

36. <fieldset> 表單分組

如果一個(gè)頁面的表單項(xiàng)太多，我們最好把它們分組顯示，就像使用p標(biāo)簽分開段落一樣，可以使用fieldset與legend標(biāo)簽對(duì)表單內(nèi)容分組。

fieldset標(biāo)簽是成對(duì)出現(xiàn)的，以<fieldset>開始，以</fieldset>結(jié)束

一個(gè)表單可以有多個(gè)<fieldset>，每對(duì)<fieldset>為一組，每組內(nèi)容的描述可以使用legend標(biāo)簽說明

示例：

<fieldset> <legend>我最喜愛的：</legend> <label for=”computer”>計(jì)算機(jī)</label> <input type=”checkbox” value=”1″ id=”fav” name=”fav” /> <label for=”trval”>旅游</label> <input type=”checkbox” value=”2″ id=”fav” name=”fav” /> <label for=”buy”>購物</label> < input type=”checkbox” value=”3″ id=”fav” name=”fav” /> < /fieldset>