Quantcast
Channel: CSS –梅問題．教學網
Viewing all 68 articles
Browse latest View live
↧

《CSS3 Animate動畫模組》隨套隨用搭配jQuery效果更佳

December 10, 2012, 6:22 pm
$
0
0
梅問題-CSS教學－《CSS3動畫模組》隨套隨用搭配jQuery效果更佳
　　一般製作網頁的朋友，應該都知道，若要製造一些動態效果，比方淡入淡出、左右晃動、旋轉...等效果，都需使用jQuery來完成，而現在不用這麼麻煩啦！直接透過CSS3就可完成各種動畫特效，其實CSS3也有提供動畫的語法，因此透過CSS也可作到如jQuery般的各種特效，而國外有位朋友，還將這些動畫特效，已整合成一個套件，因此只要直接載入css檔，立即就可使用，完全不用寫任何的程式碼，同時再搭配jQuery輔助，就可作到滑入、滑出套用什麼的動畫效果，現在就一塊來看看吧！
Animate.css(56種動畫特效):
網站名稱：Animate.css
網站作者：Dan Eden
適用瀏覽器：Firxfox、Chrome、Safari、Oprea
動畫特效：56種
下載網址：http://daneden.me/animate/build/
使用方法：
Step1
進到網站，下載完畢後，將解壓縮css檔載入，在<head>~</head>加入css連結。
<link rel="stylesheet" href="animate-custom.css">
Step2
而這隻css檔中，共包含了56種動畫特效，因此可由官網中，直接預覽效果，當有看到喜歡的效果時，在class中加入 animated 空一格 特效名稱，就可以囉！
<div class="animated shake">
當網頁載入時，文字就會左右晃動
</div>
　　這一隻CSS3的動畫模組，真的很方便，而從下方的範例中，可看到一個是一載入就出現效果，另一個DIV是搭配jQuery，當滑鼠滑入時才會左右晃動，所以完全不用背任何的語法，也不用寫任何的程式碼，直接加入class名稱，立即就可顯示效果囉！
[範例預覽]
↧
Search

網頁必用－CSS線上壓縮器CSS Compressor立即幫CSS廋身

December 17, 2012, 6:22 pm
$
0
0
梅問題－CSS壓縮器-CSS線上壓縮器CSS Compressor立即幫CSS廋身
　　先前曾分享過「線上CSS壓縮器」，透過這一個網站，就可輕易的將網站用的CSS，減肥廋身讓網站瀏覽更順暢，但那個線上CSS壓縮器很不錯用，可設定的條件很多，但最近梅干在改版後，把CSS碼丟上去壓縮後，殘念發生了～竟然有些區塊都跑掉了，所以梅干也不斷找其它的壓縮器，用了好幾個，都發生一樣的問題，不然就是有壓跟沒壓一樣，檔案大小差不多，就在這時候，梅干發現了一個好用、壓縮比高、問題少的CSS線上壓縮器啦！ 　　說到這一個網站，看起來蠻一般的，但壓縮品質真的很不賴，可大幅的減少20%左右，雖然說目前大家都是寬頻了，少了幾KB好像沒什麼，但這對主機就有很大的不同了，當很多人瀏覽時，這就是一件很可怕的事，除了會帶來大量的流量外，也會造成主機的負擔，所以建議各位，當製作好CSS檔，還是先壓縮，再放到網路上去，會讓網站瀏覽更加順暢，與減少主機的負擔喔!
線上CSS壓縮器：
網站名稱：CSS Compressor
網站網址：http://www.pagecolumn.com/tool/css_compressor.htm
Step1
首先將CSS的碼，全選並複製起來。
梅問題－CSS壓縮器-CSS線上壓縮器CSS Compressor立即幫CSS廋身
Step2
貼到CSS線上壓縮器的輸入框中，再按下GO。
梅問題－CSS壓縮器-CSS線上壓縮器CSS Compressor立即幫CSS廋身
Step3
過一回壓縮完後，可看到小了25%，接著再把輸入框中的碼，複製貼回就可以了。
梅問題－CSS壓縮器-CSS線上壓縮器CSS Compressor立即幫CSS廋身
Step4
可看到，從原來的23.8KB，縮小成16.7KB。
梅問題－CSS壓縮器-CSS線上壓縮器CSS Compressor立即幫CSS廋身
↧
↧

CSS教學－CSS原生table屬性讓多個div等高與垂直居中

January 1, 2013, 6:22 pm
$
0
0
梅問題-CSS教學－css原生table屬性讓多個div等高與垂直居中
　　身旁有許多從事網頁設計的朋友，時常問到梅干一個問題，就是早期用table排版時，完全不用考慮td等高的問題，但當改用div進行排版時，就會遇到，二個或多個div時，就會各自依內容長高，且也無法垂直居中，這應該是許多人的困擾，而之前為了讓二個div等高，梅干還特別用了jQuery，來抓div的最大值，將要等高的div值動態寫入，其實會這麼麻煩，一切都是因為IE6.0的緣故，由於IE對於CSS支援度差，使得一下這不行用，那不行用的，把一件簡單的事變的很麻煩。 　　其實在CSS2中，就有一個table的顯示屬性可用，將div直接模擬成table來使用，就可實現多個div等高外，還可讓div內的元件垂直居中，完全不用寫任何的程式碼，就可作到等高與居中的問題，隨著IE6.0已漸漸的消失後，再加上IE8.0、IE9.0已成為目前的主流後，終於在這些的版本中，支援了table屬性，因此現在就可放心的使用，這個table屬性，輕鬆實現多個div等高與垂直居中的美夢啦！
css-table 屬性：
display:table => table
display:table-row => tr
display:table-cell => td ,th
支援瀏覽器：IE8.0、Firefox、Safari、Chrome、Oprea
多個div等高： css：
?View Code CSS
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 26 27 28 29 30 31 32 33 
/* table */
.table {  
  display: table; 
  border-collapse: collapse; 
}  
 
/* tr */
.row{
	display: table-row; border:solid 1px red;
}
 
/* td , th */
.cell1 {  
  display: table-cell; 
  width: 180px; 
  border-right: 1px dotted #fff; 
  background:#fcd6d6;
}  
 
.cell2 {  
  display: table-cell; 
  width: 180px; 
  padding-left: 10px; 
  border-right: 1px dotted #fff; 
  background:#eff8ff;
}  
 
.cell3 {  
  display: table-cell; 
  width: 180px; 
  padding-left: 10px; 
  background:#effff0;
}
html：
?View Code HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
 <div class="table"><!-- table -->
 	<div class="row"><!-- tr --> 
         <div class="cell1"><!-- td -->  
            table-cell內容1<br />
            table-cell內容1<br />
            table-cell內容1<br />
            table-cell內容1<br /><br />      
         </div> 
         <div class="cell2"> 
               table-cell內容2<br>
               table-cell內容2
         </div> 
         <div class="cell3"> 
               table-cell內容3
         </div> 
     </div>   
 </div>
結果預覽：
梅問題-CSS教學－css原生table屬性讓多個div等高與垂直居中
垂直居中： css：
?View Code CSS
1 2 
.table-wrap {display:table; width:300px; height:300px; border:solid 1px #ccc; }
.table-cell {display:table-cell; vertical-align:middle; text-align:center;}
html
?View Code HTML
1 2 3 4 5 6 7 
<div class="table-wrap">
    <div class="table-cell">
        <div class="content">
           內容置中
        </div>
    </div>
</div>
結果預覽：
梅問題-CSS教學－css原生table屬性讓多個div等高與垂直居中
[範例預覽]
↧

CSS教學－「CSS3漸層按鈕」 線上語法產生器

January 29, 2013, 6:10 pm
$
0
0
梅問題－CSS3-CSS3漸層按鈕線上語法產生器
　　說到CSS3帶來了許多便利的語法，但也增加了很多新的屬性名稱，且每個屬性都很長，再的加上沒提示詞時，那可還真是要命的，而網路也有不少的CSS3相關服務，像是之前跟各位介紹過的，「CSS3圓角框」 線上語法產生器，透過點指之間，就可快速的產生所需的圓角框，而接下來要來跟各位，繼續來分享另一個好站，直接透過這「CSS Button Generator」的網站，線上就可直接產生CSS的漸層按鈕，真是超方便的喔！身為網頁設計人員，一定不可或缺喔！
CSS3漸層按鈕產生器：
網站名稱：CSS Button Generator
支援平台：Chrome、Firefox、Safari、Oprea、IE10.0
網站網址：http://css-button-generator.com/
進到該網站後，可看到每個設定的區塊，都相當的清楚，這時就可依照自已所需，自行的調整，或是直接點「Color Theme」鈕，選擇內建配置好的按鈕樣式。
梅問題－CSS3-CSS3漸層按鈕線上語法產生器
設定好按鈕樣式後，拉到頁面下方，就可設定按鈕內的文字，以及class名稱，和文型與粗體。
梅問題－CSS3-CSS3漸層按鈕線上語法產生器
由於是即見即所得，因此在改變設定值時，立即就會顯示結果，當設定好後，只要將輸入框的原始碼複製、貼上，立即就可使用囉!
梅問題－CSS3-CSS3漸層按鈕線上語法產生器
儲存發佈到瀏覽器，檢查一下，哈! 點指之間即可完成，夠ez吧!
梅問題－CSS3-CSS3漸層按鈕線上語法產生器
↧

CSS教學－CSS3 瀑布流版型 column-count

February 3, 2013, 6:10 pm
$
0
0
梅問題－CSS3瀑布流版型編排
　　之前曾分享過，利用jQuery套件製作瀑布流的網頁版型，相關文章請見「jQuery Masonry瀑布流版型套件」，這個瀑布流的版型，打破了以往傳統的編排模式，讓每個Div可以隨著高度，自行的向上靠齊，讓畫面變得更有變化性，除了用jQuery的套件來製作外，其實也可透過CSS3的方式來製作，方法更簡單，語法更簡潔，就可以達到相同的效果，與jQuery最大的差別就在於，CSS3需要IE10.0才有支援。 　　透過CSS3產生的瀑布流版型，會比jQuery來的更即時，不會一開始會先集中在一起，等到計算出每個Div的高度後，再組合起來，但經CSS3部分，就不會有此問題，且無論圖片載入快慢，都不會出現Div重疊的問題，而CSS3有許多相當方便的語法，但都礙於IE的限制，使得網頁設計起來綁手綁腳的，因此當要使用CSS3來打造時，可要先觀查一下，網站的使用者，習慣用什麼樣瀏覽器，若是以IE為首的話，建議還是先採用jQuery的方式，若不是的話，那就恭喜你，可放心的使用啦！
CSS3－column-count：
使用語法：CSS3
支援瀏覽器：Chrome、Firefox、Safari、Oprea、IE10.0
CSS3－column-count語法說明：
column-count： 欄位數
column-width：欄位寬度
column-gap： 欄位間距
column-rule：欄位格線
梅問題－CSS3瀑布流版型編排
CSS3－column-count實作：
#css：
?View Code CSS
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 26 27 
#outbox{
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
    width:734px; 
	margin:0 auto;
}
 
.content_box{
	width:337px;
	display: inline-block;
	font-size:12px;
	border: 1px dotted #4F4F4F;
	padding: 10px;
	margin: 5px 5px 5px 0;
	overflow:hidden;
	font-size:15px;
	line-height: 1.5em;
	letter-spacing: 1pt;
	color:#353535;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;		
}
#html：
?View Code HTML
1 2 3 4 5 6 
<div id="outbox">
   <div class="content_box">1</div>
   <div class="content_box">2</div>
   <div class="content_box">3</div>
   <div class="content_box">4</div>   
</div>
[範例預覽] [範例下載]
↧
↧

CSS教學－讓文字在網頁也能顯示上、下標文字

March 5, 2013, 11:30 pm
$
0
0
梅問題-CSS教學-利用CSS實現文字在網頁中顯示上下標文字
　　有時候像是數學運算式，或是特殊名詞，文字會有上標或下標，因此在平面上，沒什麼太大的問題，許多影像軟體內建就有此功能，只要指定一下，就可將特定文字變成上標或下標，但在網頁時，該怎麼辦呢？大部分的朋友，應該會直接選擇製作成一張圖片，再將它安插在網頁中，但當圖片插入文字時，就會出現文字對齊的問題，因此對於文字上下標，其實透過CSS內建的語法，就可實現網頁上下標的夢想啦！且設定方法超簡單的，所以梅干就直接的實作一下，因此若有這方面需求的朋友，不妨也參考看看。
文字上標(super)：
語法：vertical-align:super;(垂直向上對齊)
範例預覽：
梅問題-CSS教學-利用CSS實現文字在網頁中顯示上下標文字
文字下標(sub)：
語法：vertical-align:sub;(垂直向下對齊)
範例預覽：
梅問題-CSS教學-利用CSS實現文字在網頁中顯示上下標文字
其實只要利用垂直對齊的方式，就可實現上、下標文字啦！因此下回若遇到時，不妨可試看看，就不用再將它作成圖片啦！且所有的瀏覽器皆支援，同時也可針對上、下標字，再設定它的字級與色彩，因此無論是數學運算式，還是專有名詞皆適用。
[範例預覽]
↧

《Easy CSS Menu》網站下拉選單自動產生器

March 25, 2013, 6:30 pm
$
0
0
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
　　說到網站的下拉選單，是最常見也是最實用的操控方式，但這需要點程式背景，才有辦法來完成，偏偏網頁設計都是視覺出生，因此就會四處上網找相關範例來套用，但在套用的過程中，運氣好沒問題，運氣差一點不是跑版就是沒反應，總是套的一把眼淚一把鼻涕的，因此梅干今天要來分享個好東西，那就是Easy CSS Menu，可說是視覺設計人員的救星，透過它就可快速完成各種的下拉選單，同時還可套用各種不同的樣式，且過程也很簡單，只要點一點立即就可完成，因此身為設計人員，這個工具絕不容錯過喔！
Easy CSS Menu：
軟體名稱：Easy CSS Menu
軟體版本：v3.2
軟體語言：英文
適用平台：Windows XP+
官方網站：http://www.easycssmenu.com/
軟體下載：本站下載 | 官方下載
建立下拉選單列表：
Step1
下載完畢解壓，雙響安裝完成後，進入「Easy CSS Menu」應用程式，點右邊的CSS文件圖示。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step2
進入後，在Layout中，可設定下拉選單的方向，是要橫的還是直的，預設Horizontal為橫向，接著點左上的Add Item圖示，建立按鈕選單。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step3
接著在右下角，可設定按鈕的文字、樣式，與連結。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step4
若要建立次選單，則點上方的Add Submenu圖示。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step5
一樣的右邊可設定選單文字與連結，若要再建立多個選項，這時不是按Add Submenu，而是Add Item喔!
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step6
依序就可完成，下拉選單的基礎模型啦!
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
套用下拉選單CSS樣式：
Step1
下方就有各式的模版可套用，左邊是樣式類別，右邊會有該類別的各種模式，只要點一下右邊的樣式型態，立即就會套用。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step2
就可任意的選擇各種樣式，隨點隨套用。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
輸出下拉選單：
Step1
完成後，點右上角「Save Menu as HTML」。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step2
設定好儲存路徑與名稱後，再按Next。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step3
再按下Finish就完成囉!
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
成果預覽：
Step1
接著到剛所設定的目錄下，就會看到一個資料夾與HTML檔。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step2
進到目錄後，除了有一些圖檔外，還有css與js檔，因此該選單並非單純的CSS，而是有透過js來輔助。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step3
之後要套到自已的版型時，以下這幾個區塊，依照它的架構，貼到你的網頁裡。
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
Step4
雙響那htm檔，就可預覽結果畫面囉!夠簡單吧!
梅問題-CSS工具－《Easy CSS Menu》網站下拉選單產生器
↧

《Cyotek Spriter》將多張小圖合併成一張，並產生CSS碼

March 31, 2013, 6:30 pm
$
0
0
梅問題-CSS工具－Cyotek Spriter將多張小圖合併成一張
　　一般在設計網頁時，都會利用CSS來設定一些標籤圖示，讓畫面變得更有特色，所以這時候在設計版型時，就會依照各區塊，設計不同的小圖示，最後再利用分割工具，將圖示一一的分割出來，因此當今天頁面有一、二十個標籤圖示時，就會有一、二十個檔案，雖然這些檔案都很小，看起來好像沒什麼，但今天當有一位瀏覽者，在觀看網頁時，就會向主機請求十幾次，若有上百人或上千人時，那對於主機還會造成不少的負擔，因此這時候就得再將這些圖示，全部整合在一張裡，這時就得再一一重新抓取圖示位置，所以許多網頁設計師，都會很懶的這麼做，但現在不用有更簡單的做法啦！直接透過Cyotek Spriter，就會自動將多張圖片組合在同一頁面中，同時還會主動將這些圖示的位置產生CSS的語法，因此要用時，只要直接拷貝下來就可使用囉！相當的方便喔！
Cyotek Spriter ：
軟體名稱：Cyotek Spriter
軟體版本：v1.0.4.2.7
軟體語言：英文
適用平台：Windows XP+
官方網站：http://cyotek.com/cyotek-spriter
軟體下載：本站下載 | 官方下載
Step1
下載完畢，解壓縮雙響spriter.exe，接著將網站的小圖，直接拖拉到spriter視窗中。
梅問題-CSS工具－Cyotek Spriter將多張小圖合併成一張
Step2
放開滑鼠後，spriter就會將全部的圖示組合在同一個頁面中，這時透過右邊可設定圖檔的排序方式，以及圖片的大小。
梅問題-CSS工具－Cyotek Spriter將多張小圖合併成一張
Step3
將下方的頁籤切到CSS，就會看到程式已將每張小圖的長、寬，以及位置都給抓取出來了。
梅問題-CSS工具－Cyotek Spriter將多張小圖合併成一張
Step4
接著切到Preview頁籤，就會看到所有的圖示，再點上方的Export圖示，將檔案輸出。
梅問題-CSS工具－Cyotek Spriter將多張小圖合併成一張
Step5
依續的設定CSS、html、圖片的檔名。
梅問題-CSS工具－Cyotek Spriter將多張小圖合併成一張
Step6
這樣就輸出完成了。
梅問題-CSS工具－Cyotek Spriter將多張小圖合併成一張
Step7
馬上到剛所設定的輸出位置，就會看到三個檔案，但只要保留圖片與CSS檔就可以了。
梅問題-CSS工具－Cyotek Spriter將多張小圖合併成一張
Step8
之後要用時，只要直接拷貝CSS中的語法就行了，真的是挺方便的。
梅問題-CSS工具－Cyotek Spriter將多張小圖合併成一張
↧
Search

《MinifyMe》橫跨 Win / MAC 平台CSS壓縮軟體

April 14, 2013, 6:30 pm
$
0
0
梅問題-《MinifyMe》跨PC/MAC平台CSS壓縮軟體
　　先前曾分享過，線上的CSS壓縮器，直接把寫好的CSS原始碼，複製到輸入框中，立即就可CSS進行壓縮，如此一來就可加快網頁的載入速度，雖然說線上就可完成，完全無需安裝任何的軟體，真的很方便，但這樣免費的服務網站，能否永續存在，誰也不清楚，因此比較一勞永逸的方法，就是使用單機程式，如此一來就不會有此疑慮了，所以梅干也找了幾套的壓縮器，卻意外的發現到，MinifyMe的壓縮器，且竟然是用Air開發，所以無論是PC還是MAC皆可使用，且操作方法還相當的簡單，因此現在就一塊來看看吧！這個好用的CSS壓縮器。
MinifyMe：
軟體名稱：MinifyMe
壓縮格式：css、js(js若有註解會出現問題)
適用平台：Windows / MAC
注意事項：需安裝Flash player套件
軟體下載：本站下載 | 官方下載
下載完畢後，雙響就可進行安裝，比較特別的是，由於該應用程式，沒有送到Adobe公司作審核，因此會出現一些不明的現象，不用理它直接按安裝。
梅問題-《MinifyMe》跨PC/MAC平台CSS壓縮軟體
選擇安裝位置。
梅問題-《MinifyMe》跨PC/MAC平台CSS壓縮軟體
接著就會開始進行安裝。
梅問題-《MinifyMe》跨PC/MAC平台CSS壓縮軟體
安裝完成後，啟用MinifyMe應用程式，接著將要壓縮的css檔，直接拖拉到MinifyMe的工作視窗中。
梅問題-《MinifyMe》跨PC/MAC平台CSS壓縮軟體
壓縮完畢後，在同一目錄下，會看到pack.css的檔案，與之前的相比少了7K，真是簡單又方便。
梅問題-《MinifyMe》跨PC/MAC平台CSS壓縮軟體
↧
↧

CSS教學－「CSS3動畫」Ceaser線上動畫產生器

May 28, 2013, 6:30 pm
$
0
0
梅問題－《Ceaser》CSS3動畫產生器-即見即所得
　　有經驗的朋友都知道，若不透過Flash，想讓網頁產生互動的效果，就得透過jQuery來產生動畫，其實現在只要透過CSS3也可作到相同的效果，無論是區塊的移動、變形、淡入淡出，雖然說透過CSS3來產生動畫可以不用再寫任何的程式碼，但要透過手動key那些動畫的碼，那還真是要命的，最近梅干發現一個好站，直接透過線上拖拉的方式，就可產生出各種的不同的動畫效果，同時還可線上即時預覽，真是簡單又方便，身為網頁設計的你，怎能錯過這個好東西，現在就趕快來看看吧!
CSS3動畫產生器：
網站名稱：Ceaser - CSS Easing Animation Tool
網站網址：http://matthewlein.com/ceaser/
Step1
一進入網站，左邊會看到一個，長的跟PS很像的曲線圖，以及右邊有些控制項目，可即時預覽左邊調整後的數值，所產生的動畫效果。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得
Step2
從右邊的下拉選單中，可選擇內建的動畫範本。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得
Step3
選完後，左邊就會產生出範本的動畫曲線，接著點右邊的Left、Width、Height、Opacity等鈕，就可預覽動畫效果。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得
Step4
若覺得內建效果不喜歡，也可自行調整曲線。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得
Step5
當喜歡此效果時，將頁面向下拉，把下方的語法全部複製起來。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得
Step6
接著把那語法貼到網頁的區塊中，再設定區塊的大小、位置，以及當滑入時所要移動的數值，這樣就大功告成囉!
梅問題－《Ceaser》CSS3動畫產生器-即見即所得
Step7
這時將滑鼠移到梅干身上，區塊就會向右移動囉!可直接點下方的範例預覽，直接預覽結果。
梅問題－《Ceaser》CSS3動畫產生器-即見即所得
[範例預覽]
↧

CSS教學－CSS3 線上漸層語法產生器

June 16, 2013, 6:30 pm
$
0
0
梅問題－CSS3工具－CSS3漸層線上語法產生器
　　先前曾分享過，CSS3漸層按鈕線上產生器，利用CSS3來製作漸層效果，是再簡單不過的，但若要將CSS3漸層語法背下來，那可不是一件容易的事，好在目前線上有許多CSS3語法的產生器，今天梅干要來分享個CSS3的漸層產生器，它與漸層按鈕比較不同的是，這個漸層產生器，可製造出線性漸層與放射狀漸層，同時還可設定漸層的方式與方向，完成後再將漸層的語法，複製下來就可應用到各個區塊中，相當方便好用喔！現在就一塊來看看，這個CSS3的線上漸層產生器要如何使用吧！
CSS3線上漸層產生器：
網站名稱：
網站網址：http://www.visualcsstools.com/
中間可設定漸層的方式，與漸層的方向。
梅問題－CSS3工具－CSS3漸層線上語法產生器
接著右邊只要有三角箭頭，點一下就進行漸層設定。
梅問題－CSS3工具－CSS3漸層線上語法產生器
點下方的頁籤，就可切換成線性漸層。
梅問題－CSS3工具－CSS3漸層線上語法產生器
設定好漸層方式後，接著透過左邊的色相環，設定漸層的顏色。
梅問題－CSS3工具－CSS3漸層線上語法產生器
都設定好後，點一下上方的文件圖示。
梅問題－CSS3工具－CSS3漸層線上語法產生器
將輸入框的CSS語法複製出來。
梅問題－CSS3工具－CSS3漸層線上語法產生器
再貼到指定的區塊中，這樣就大功告成囉!
梅問題－CSS3工具－CSS3漸層線上語法產生器
[範例預覽]
↧

CSS教學－仿Photoshop CC圖層樣式CSS3線上產生器

June 27, 2013, 6:30 pm
$
0
0
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器
　　前幾天各位應該有發現到，新版的Photoshop CC，也可產生CSS3語法，同時只要利用Photoshop CC中的幾和工具，以及圖層樣式所繪製出來的圖形，就可將它轉成CSS3的語法，真的相當方便，但若沒有安裝Photoshop CC的朋友，那就只好自已純手工打造啦！ 　　最近梅干發現一個超棒的CSS3線上產生器，不但操控面板和Photoshop的圖層樣式極為相似外，同時還可輕易的產生像漸層、內光暈、邊框、圓角....等，因此相當適合網頁設計人員使用，同時可降低製作時間，提升工作效率，因此有這麼好的工具，怎能不好好的利用一下呢?
CSS3圖角、漸層、光暈線上產生器：
網站名稱：Layer Styles
網站網址：http://www.layerstyles.org/builder.html
一進到網站後，中間會有一個方塊，以及一個操控面板，跟Photoshop圖層樣式，有沒有像呀!無論UI還是操控都一樣。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器
反藍狀態，表示在該選項下，這時就可透過控制列，來設定CSS的樣式，由於是即見即所得，所以中間的區塊會即時顯示效果。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器
若要更改背景，點一下背景選項後，再點中間的漸層條。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器
是不是跟Photoshop一模模又一樣樣呢?除了可選擇上方內建的漸層樣式外，也可自行設定。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器
都設定好後，點一下畫面的左下角的CSS Code，下方就會秀出剛所設定的CSS3原始碼。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器
接著剛的CSS原始碼，貼到網頁的樣式中。
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器
鏘~鏘~成果預覽，是不是快又方便呀!
梅問題-CSS3工具-仿Photoshop圖層樣式CSS3樣式產生器
↧

CSS按鈕模組－輕鬆套用五彩繽紛的特色按鈕

July 28, 2013, 6:30 pm
$
0
0
梅問題－CSS按鈕模組－輕鬆套用五彩繽紛的特色按鈕
　　上星期曾分享過Bootstrap套件，讓程式設計師或視覺設計師，都能輕易上手的網頁模式，而Bootstrap這個網頁模組，使用上相當的簡單，只要依照它規範，指定CSS樣式類別，或是依照它的所指定的，安插html碼與js的控制碼，就能快速的產生各種的互動網頁效果，最近梅干在網路上，又發現另一套好用的模組，而這個網頁模組，主要是針對CSS按鈕部分，除了有各式各樣的按鈕外，還有五彩繽紛的色彩，讓你的網頁更有特色，同時這個CSS按鈕模組，也有提供一組的下拉選單效果可使用，只要在網頁插入相關的html碼就可以囉！現在就一塊來看看，這模組要如何使用吧！
Buttons：
套件名稱：Buttons
下載網址：http://alexwolfe.github.io/Buttons/
Buttons－下載與載入：
Step1
將Buttons模組下載回來，解壓縮後分別會看到，css、font、js三個資料夾。
梅問題－CSS按鈕模組－輕鬆套用五彩繽紛的特色按鈕
Step2
開啟網頁在<head>~</head>之間，將css與js載入至網頁。
梅問題－CSS按鈕模組－輕鬆套用五彩繽紛的特色按鈕
Buttons－套用樣式：
Step3
回到Buttons網頁中，每組按鈕下方的黑色塊，就是該組按鈕的示範語法。
梅問題－CSS按鈕模組－輕鬆套用五彩繽紛的特色按鈕
Step4
接著將它的css類別名稱，加到網頁的標籤語法中。
梅問題－CSS按鈕模組－輕鬆套用五彩繽紛的特色按鈕
Step5
鏘~鏘~立即套用。
梅問題－CSS按鈕模組－輕鬆套用五彩繽紛的特色按鈕
Step6
再來試試它的下拉選單，比Bootstrap來的更簡單，只要插入html的原始碼，就OK囉!
梅問題－CSS按鈕模組－輕鬆套用五彩繽紛的特色按鈕
Step7
馬上來預覽一下，哈~超EZ的就可產生下拉選單啦!
梅問題－CSS按鈕模組－輕鬆套用五彩繽紛的特色按鈕
　　這一個CSS按鈕的模組還蠻方便的，且按鈕的配色還蠻陽光的，同時按鈕的變化也蠻多樣化，從方角到圓角甚至到圓形都有，更重要的是完全不用任何圖片，更加速網頁的載入速度，其實像Buttons的CSS模組，製作上並不困難，因此有興趣的視覺設計師們，平常也可自行定義屬於自已的CSS樣式模組，以便於之後專案的使用喔！
↧
↧

CSS教學－純CSS打造箭頭對話框效果

August 28, 2013, 6:30 pm
$
0
0
梅問題－CSS教學-CSS製作箭頭對話框效果
　　有在使用Facebook的朋友，應該會發現到，自從Facebook將條列式改成時間軸的架構後，每當發表新訊息時，每個訊息都會像對框話的形式來呈現，雖然說這不是什麼新技術，但先前梅干都是將那對話框的，三角形製作成圖檔，再將它定位顯示到該顯示的任置，雖然說沒什麼問題，但若中間突然修改的顏色或邊框時，這下就得重新再繪製一次，因此梅干便在想，或許可用Html5來繪製那三角形，如此一來就可省去，每當色彩改變時，重製的麻煩，但就目前Html5的部分，使用上還是相當的受限，因此梅干爬了一些文章，找到一個相當棒的作法，竟然直接用CSS的語法就可實作出來，這還真是讓梅干想都沒想到，竟然可以這樣子用，而梅干也花了點時間，將對話框四個上向箭頭的CSS給設定好了，因此各位可以直接套用喔！
箭頭對話框效果：
使用語法：CSS2
支援平台：IE8.0+、Chrome、Firefox、Safari、Oprea
首先，先定義一個邊框的樣式與色彩。
梅問題－CSS教學-CSS製作箭頭對話框效果
由於邊框是由內向外畫，且會看到個邊的接角，正好都是45度角。
梅問題－CSS教學-CSS製作箭頭對話框效果
接著再將寬、高設成0。
梅問題－CSS教學-CSS製作箭頭對話框效果
有沒有點感覺啦!
梅問題－CSS教學-CSS製作箭頭對話框效果
這時再把其它邊的顏色改成透明。
梅問題－CSS教學-CSS製作箭頭對話框效果
鏘~鏘~三角形出現啦!而有了這概念後，就可以開始來製作對話框了。
梅問題－CSS教學-CSS製作箭頭對話框效果
CSS樣式設定：
放在<head>.....</head>之間：
?View Code CSS
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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 
<style type="text/css">
.mwt_border{
	width:250px;
	height:90px;
	text-align:center;
	background:#fff;
	position:relative;
	border: solid 1px #333;
	margin:30px;
	padding:30px;
}
/*箭頭右*/
.mwt_border .arrow_r_int{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent transparent #333;
	position:absolute;
	top:20%;
	right:-30px;
}
/*箭頭右-邊框*/
.mwt_border .arrow_r_out{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent transparent #fff;
	position:absolute;
	top:20%;
	right:-29px;
}
 
/*箭頭左*/
.mwt_border .arrow_l_int{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent #333 transparent  transparent ;
	position:absolute;
	top:20%;
	left:-30px;
}
/*箭頭左-邊框*/
.mwt_border .arrow_l_out{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent #fff transparent transparent ;
	position:absolute;
	top:20%;
	left:-29px;
}
 
/*箭頭上*/
.mwt_border .arrow_t_int{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent #333 transparent ;
	position:absolute;
	top:-30px;
	left:40px;
}
/*箭頭上-邊框*/
.mwt_border .arrow_t_out{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:transparent transparent #fff transparent ;
	position:absolute;
	top:-29px;
	left:40px;
}
 
/*箭頭下*/
.mwt_border .arrow_b_int{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:#333 transparent transparent transparent ;
	position:absolute;
	bottom:-30px;
	right:50px;
}
/*箭頭下-邊框*/
.mwt_border .arrow_b_out{
	width:0px;
	height:0px;
	border-width:15px;
	border-style:solid;
	border-color:#fff transparent transparent transparent ;
	position:absolute;
	bottom:-29px;
	right:50px;
}
 
</style>
HTML：
放在<body>.....</body>之間：
?View Code CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 
<div class="mwt_border">
	<span class="arrow_t_int"></span>
    <span class="arrow_t_out"></span>
	CSS製作對話框效果-箭頭上
</div>
 
<div class="mwt_border">
	<span class="arrow_r_int"></span>
    <span class="arrow_r_out"></span>
	CSS製作對話框效果-箭頭右
</div>
 
<div class="mwt_border">
	<span class="arrow_b_int"></span>
    <span class="arrow_b_out"></span>
	CSS製作對話框效果-箭頭下
</div>
 
 
<div class="mwt_border">
	<span class="arrow_l_int"></span>
    <span class="arrow_l_out"></span>
	CSS製作對話框效果-箭頭左
</div>
完成就會看到，分別有上、右、下、左四個方向的對話框喔！
梅問題－CSS教學-CSS製作箭頭對話框效果
[範例預覽]
↧

CSS教學－【Responsive 網頁自適版型】Media Screen 一覽表

September 15, 2013, 6:30 pm
$
0
0
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
　　由於現在行動裝置愈來愈普及，人手已經好幾隻，一個人可能同時擁有手機與平板，同時也改變了整個生活形態，慢慢的習慣直接透過，智慧型手機或平板來找資料，因此這也提高了手機版網頁的需求，而一般在製作手機版網頁，大至有二種方式，一種用導網頁的方式，當偵測到手機瀏覽時，頁面就自動切換成手機模式，而另一種模式，則是會隨著解晰度的不同，來調整網頁的版型，以符合該解晰下瀏覽，而這種模式就叫作Responsive，也就是大家常說的自適版型，由於現在行動裝置這麼多，要如何知道各裝置的解晰呢？這時不妨可到nmsdvid.com網站中查看，在該網站直接提供各裝置的media screen code，因此只要直接複製就可使用囉！
行動裝置Media Screen：
網站名稱：Media Query Snippets
網站網址：http://nmsdvid.com/snippets/
進到網站中，從右上角的頁籤中，可切換各裝置類型，像是手機、平板、螢幕...等。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
只要點一下裝置名稱，下方就會出現media screen的code，再將框框中的code給複製起來。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
接著插入的方式有二種，一種是用連結外部檔案的方式，另一種是直接寫在網頁中。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
由於梅干是iPhone3Gs，所以複製iPhone 3Gs的Code，簡單的來作個示範，當使用桌機時，會看到藍色背景，手機則會出現紅色背景。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
馬上來瀏覽看看，哈~可看到當用桌機時，背景會呈現藍色，並出現電腦版的文字，由於該網站是用裝置的長寬來作判斷，因此即便將桌機的視窗縮小，也不會切換成行動裝置的頁面。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
當用手機瀏覽時，背景則會變成紅的，並出現手機版的文字，是不是超ez的呀。
梅問題－Responsive Web Design網頁自適版型Media Queries參考一覽表
　　其實無論是用導網頁，還是用自適版型，唯一的目地就是讓使用行動裝置的朋友，可以不用再用二指來縮放版面，直接就可瀏覽網頁，而自適版型與導網頁，最大的不同點就在於，自適版型在製作時，需要花點時間，好好的規畫網站架構，以及css的code會比較多，而最大好處就是，不用再透過任何程式來作判斷，直接用CSS就可即時改變瀏覽的版型，來符合各行動裝置的螢幕解析來瀏覽。
↧
Search

CSS教學－免寫程式透過CSS當字數超出範圍時，自動出現….

March 25, 2014, 6:30 pm
$
0
0
梅問題－CSS教學－免寫程式透過CSS就可截取文字
　　先前在設計Wordpress版型時，為了讓網頁的版型看起來更整齊，梅干則透過php的方式來計算出字數，當超過多少字數後，就自動出現....，但礙於文字有全形、半形與中英文，因此在計算字數時，時常會出現不是過長就是過短，所以除了可透過程式的方式來處理外，還有一個更簡單的方法，那就是使用CSS的文字屬性就可實現，當文字超過多少寬度時，就自動出現....，如此一來使用者就知道，後面還有文字啦!至於怎麼設定，其實方法很簡單，現在就一塊來看看吧!!
首先，先設定區塊的寬度大小，接著在文字的區塊的樣式中，輸入text-overflow : ellipsis; 屬性，之後只要文字超過300像素時，就會自動出現.....。
梅問題－CSS教學－免寫程式透過CSS就可截取文字
一旦只要文字超過300像素，文字就會自動被截斷，並出現....了，是不是超ez的呀!
梅問題－CSS教學－免寫程式透過CSS就可截取文字
[範例預覽]
↧

《Simplest CSS3 Generator》CSS3線上特效產生器

May 20, 2014, 6:30 pm
$
0
0
梅問題－《Simplest CSS3 Generator》CSS3線上特效產生器
　　CSS3目前已發展的愈來愈成熟了，而各家的瀏覽器支援度也愈來愈高的，就連IE也逐漸的跟進了，雖然說CSS3可產生出各種特效，像是光暈、陰影、漸層、圓角....等，相當的方便，完全不用任何一張圖檔，如此一來更可加快網頁的載入速度，但有用過的朋友都知道，CSS3雖然很方便，但語法一個比一個長，且還要針對各個瀏覽器，前面加入前綴詞，所以一個特效，就要寫五、六次，相當的麻煩，若是自己Key還真累人，所以梅干最近找到一個相當好用的CSS3特效產生器，裡面將CSS3的所有特效整合在一起，就不會一個特效用一個網站，相當的方便好用，且操控也相當的直覺，因此從事網頁設計的朋友，絕不容錯過啦!
Simplest CSS3 Generator：
網站名稱：Simplest CSS3 Generator
支援特效：CSS3圓角、文字陰影、區塊陰影、漸層、變形
連結網址：http://www.css3generator.in/
連入網站後，左右二側是特效的類型，左邊是基本版，右邊是進階版。
梅問題－《Simplest CSS3 Generator》CSS3線上特效產生器
點一下圖示，中間就會出現編輯模式，直接拖拉控制列的按鈕，就可立即設定所要的樣式，同時中間的區塊也可立即預覽結果，而區塊中就會產生CSS3的語法。
梅問題－《Simplest CSS3 Generator》CSS3線上特效產生器
文字陰影也很直覺，拖拉右邊的控制鈕，就可調整影子上下位置，下方就是左右，最右邊就可 控制影子的顏色與模糊。
梅問題－《Simplest CSS3 Generator》CSS3線上特效產生器
接下來，右邊就是進階模式，一樣是圓角框，但在右邊的進階模式下，可讓框變得更特別。
梅問題－《Simplest CSS3 Generator》CSS3線上特效產生器
漸層可設定的也變更多，這個網站真的很不錯用，打開瀏覽器，立即就可使用啦!
梅問題－《Simplest CSS3 Generator》CSS3線上特效產生器
↧
↧

《border-image-generator》CSS3邊框圖線上產生器

June 3, 2014, 6:30 pm
$
0
0
梅問題－《border-image-generator》CSS3邊框圖線上產生器
　　雖然說目前CSS3的語法還沒標準化，但CSS3裡所新增的新樣式，也為網頁增添了許多的便利與特色，讓以往用CSS2只能透過圖片的方式來呈現，現在只需用語法就可完成，甚至也突破了以往CSS2所沒有的功能，像是框邊圖，以前只能畫線框，但CSS3已支援邊框圖，讓邊框不再只是死板板的線框與圓角框，裡面已可加入圖片。 　　而這說語法並不困難，但比較麻煩的是圖片的切割，因此在製作邊框圖時，要自行先把圖框給分割好，再透過CSS3的語法將它組合起來，實在有點小麻煩，但現在網路出現一個好工具，只要將邊框圖載入後，就可用控制把的方式，來分割出邊框圖的區域範圍，同時下方還會即時的顯示分割好的重覆畫面會長怎樣，當確定沒問題後，再把語法複製並貼到自己的網頁中，就大功告成囉!相當的方便好用喔!
CSS3邊框圖產生器：
網站名稱：border-image-generator
網站網址：http://border-image.com/
Step1
進入網站後，點上方的Browser的按鈕，載入已製作好的邊框圖。
梅問題－《border-image-generator》CSS3邊框圖線上產生器
Step2
接著從下方的控制把後，可將載入的邊框圖進行分割，同時右邊是分割的區塊示意圖，下方是分割後的結果畫面。
梅問題－《border-image-generator》CSS3邊框圖線上產生器
Step3
當一切都完成後，將下方邊框圖中的語法複製出來。
梅問題－《border-image-generator》CSS3邊框圖線上產生器
Step4
再貼到自已的網頁中，但圖片路徑要自行修改一下喔!
梅問題－《border-image-generator》CSS3邊框圖線上產生器
Step5
鏘~鏘~這不是底圖喔!而是邊框圖，是不是既方便又好用呀!
梅問題－《border-image-generator》CSS3邊框圖線上產生器
[範例預覽] | [範例下載]
↧

CSS教學－常用CSS簡寫大集合

June 23, 2014, 6:30 pm
$
0
0
梅問題－CSS教學－常用CSS簡寫總整理
　　現在製作網頁已少不了CSS，且有時網頁的CSS碼都比程式碼還長，因此為了縮減CSS的行數，就會將相同的屬性寫在一塊，如此一來除了可減簡少CSS的碼外，二來也可加快網頁的讀取速度，因此會發現到，許多在國外購買的佈景主題，裡面的CSS幾乎都採用簡寫，但沒在使用CSS簡寫的朋友，當看到一長串的樣式設定後，就跟天書一樣，雖然都是CSS碼但卻有看沒有懂。 　　而坊間的CSS書中，較少提到關於簡寫的部分，所以梅干最近就整理了一下，平常較常用的CSS的簡寫屬性，以及將簡寫後與原來的相對應，讓各位更可快速的了解它的用法，與寫作的技巧，其實當習慣CSS簡寫後，則會覺得CSS的簡碼，看起來更容易閱讀與修改，就不用背一大堆的屬性名稱啦!而還不熟悉CSS簡寫的朋友，就一塊來看看吧!
color顏色簡寫：
以顏色來說，正常情況下是六碼，但很常看到有些只寫三碼，其實以色碼來說，前二碼是紅，中間二碼是綠，最未二碼是藍，因此當二個碼相同時，只需寫一個來作標示就可以。
梅問題－CSS教學－常用CSS簡寫總整理
background背景簡寫：
背景這屬性也是常會使用到的，當要簡寫時，只要直接寫background後，就可將所有背景的相關屬性寫在一塊，像是背景圖片、顏色、位置、重覆....等。
梅問題－CSS教學－常用CSS簡寫總整理
font文字簡寫：
文字與背景一樣，只要寫font後，就可將文字的樣式、粗體、字級、行高和字體寫在一塊，比較特別的是，當字級與行高合併寫時，中間要用/隔開來。
梅問題－CSS教學－常用CSS簡寫總整理
border邊框簡寫：
一樣的只需寫border屬性後，後面就可加入邊框的樣式、寬度與顏色。
梅問題－CSS教學－常用CSS簡寫總整理
padding、margin內距間距簡寫：
在padding與margin中，最常看到的是，後面加二、四個參數，但有時也會看到三個的，若是三個的話，第一個代表上，中間代表左右，最後一個代碼下。
梅問題－CSS教學－常用CSS簡寫總整理
　　以上這些是CSS中，較常看到的簡寫方法，也是最常使用的，因此若各位下回遇到時，就不會再天書啦!若各位也有看到其它特殊的寫法，也都歡留言討論囉!
↧

CSS3選擇器「:nth-child()」與「:nth-of-type()」用法大不同

July 16, 2014, 5:30 pm
$
0
0
梅問題－CSS教學－CSS3選擇器「nth-child與nth-of-type」大不同
　　雖然說目前CSS3還沒正式的標準化，但新的屬性已為網頁帶來許多的便利，像是大家所熟悉的圓角框、陰影、漸層、多欄位....，甚至目前正夯的RWD自適應，這些都是需要使用到CSS3，除此之外CSS3還提供了許多的選擇器可使用，如此一來就可大量的減少一些類別的設定，直接透過HTML的標籤就可直接進行選擇與樣式的設定，雖然說很方便，但在CSS3有二個選擇器長的很像nth-child與nth-of-type，在正常情況下，二個用起來很像，但若HTML的結構改變時，二個就大不同啦!!!因此梅干作了一個小範例，來幫大家解惑，這二個屬性的最大差別什麼地方。
CSS3－:nth-child()
當網頁中有4個p標籤時，可用nth-child的方式，來進行選擇，當下odd表示，只要是單數列背景就會套用成淺灰色。
梅問題－CSS教學－CSS3選擇器「nth-child與nth-of-type」大不同
這時候只要是奇數列的p標籤，背景就會變成淺灰色，在這種情況下，即便使用nth-of-type也會得到一樣的效果。
梅問題－CSS教學－CSS3選擇器「nth-child與nth-of-type」大不同
改變一下網頁的架構，把p標籤下方，加入<hr>來將區塊與區塊間來畫一條。
梅問題－CSS教學－CSS3選擇器「nth-child與nth-of-type」大不同
這時就會看到，全有p標籤的背景都變成淺灰色的了。
梅問題－CSS教學－CSS3選擇器「nth-child與nth-of-type」大不同
原因就出在，當使用nth-child時，它並不是只篩選p標籤，而是網頁中的所有標籤都會一起計算，所以可看到，這時所有的p就變成奇數列了。
梅問題－CSS教學－CSS3選擇器「nth-child與nth-of-type」大不同
CSS3－:nth-of-type()
這時只要把原本的nth-child改成nth-of-type，就只會針對網頁中的p標籤進行篩選。
梅問題－CSS教學－CSS3選擇器「nth-child與nth-of-type」大不同
鏘~鏘~這時候就只有在奇數列的p標籤的背景才會套用淺灰色 。
梅問題－CSS教學－CSS3選擇器「nth-child與nth-of-type」大不同
↧
Viewing all 68 articles
Browse latest View live
Search