文章專區

網頁設計相關文章

網頁設計師在寫CSS時,是不是有時會發生明明已寫好屬性設定,但卻無法套用進頁面的情形呢?遇到這情況,不妨檢查看看CSS優先權的設定唷!CSS提供許多選擇器類型,當使用不同的選擇器時,套用樣式的優先權也會不同。 這邊整理優先順序的幾個原則,讓你在寫CSS時可以更容易掌握唷!   越左邊權限越高 元素內的樣式>頁面內的樣式>外部載入 元素內的樣式 例子:   頁面內的樣式 例子:   外部載入 例子: 以@import方式載入 在頁面內以 link 方式載入   後設定>前設定 最後設定的樣式將蓋過之前設定的樣式 例子:   最後會套用的屬性是 width:250px; height:50px; background:#fff;   Id>class 由於 id 具有不可重複性,而class則是可重複的,所以 id 在層級上大於 class, 如果一個元素同時有 id 跟 class 兩種屬性,且互有所衝突時,id 優先權大於 class。   !important 為最高優先 !important 的作用為強制提高優先權,照理說越後面設定的越優先,但若使用了 !important,會使得最前面的設定成了最優先,使用!important的 CSS 樣式幾乎等於無敵。 當出現二個!important時,優先權就是依先後順序,與其它的選擇器的原理相同,因此非必要的話,最好盡量少用!important。  
展開收合效果是常見的網頁技巧,不僅提高版面布局的美觀性,也能有效縮短文章的長度, 讓我們來看看如何使用jQuery達到這效果吧! HTML CSS JS   範例:https://codepen.io/bok770/pen/qXZyPN See the Pen <a href='https://codepen.io/bok770/pen/qXZyPN/' _fcksavedurl='https://codepen.io/bok770/pen/qXZyPN/'>qXZyPN</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a></div>
mmenu此套件位於側欄,可應用於RWD響應式網頁設計,選單以點擊滑動來作展開,也包括了階層式選單,相當方便套用。 首先到官網下載檔案解壓縮http://mmenu.frebsite.nl/ 接著到demo資料夾,找其中的一個範例來做,這裡找default.html來做示範   所需的css有jquery.mmenu.all.css js則需要jquery.mmenu.min.all.js  jquery.min.js可以直接從資料夾取得。 並加上   Html 首先建立個div    在page裡加入   在header裡加入   以及選單列表   範例: See the Pen &lt;a href='https://codepen.io/bok770/pen/mMPjgL/' _fcksavedurl='https://codepen.io/bok770/pen/mMPjgL/' _fcksavedurl='https://codepen.io/bok770/pen/mMPjgL/'&gt;mMPjgL&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.
平時我們在設計網頁時,常需要假圖來做預覽圖用。 這裡有個很好用的網站lorempixel ( http://lorempixel.com/ ),只要填入所需圖片的各項設定,例如像素尺寸,選擇橫向或直向,黑白或彩色、主題(EX:食物、動物、人物等等),如此就可以隨機產生網路假圖囉,而且圖片都相當精美。   可依圖片需求填入設定   如此就可產生符合尺寸需求又精美的圖片囉!    
之前介紹了:nth-child(n)和:nth-of-type(n)這兩項常見的選擇器,這次來介紹:not這個可能比較少見的選擇器。 not跟前兩者其實很像,只是選取的情況是「反過來」的,排除了指定的元素不被選取,也就是說,除了指定的元素以外的其他元素都會被選取。   寫法: div:not(:first-child){ color:red; }  div除了第一個以外其他都會變紅色 p:not(:nth-child(3n)){ display:none }  p除了3的倍數的以外其他皆不會顯示   泛用性很廣,比如要排div順序為由左到右時,可能每個div會設個margin-right:10px的間隔,而最後一個會設:last-child { margin-right: 0 } 然而你卻可以改用not來選取其他的元素,設成div:not(:last-child){ margin:10px }即可。 例子: CSS . div-list div:not(:last-child){ margin-right:10px;} 若你要設個導覽列的話,在每個標題右邊設框線(border-right),但是最後一個不用,可以這樣設:   CSS .not-list li:not(:last-child){ border-right:1px solid #fff;} 善加使用各項選擇器,對於 class選取元素的狀況,可以更靈活地應用掌握唷。  
大圖輪播已經是許多網站的常見功能了,除了在剛進入網站的時候能夠立即吸引使用者的目光以外,還可以搭配炫目的動畫達成一定的互動效果。 此套件必須包含flexslider.css、jquery.flexslider.js、jquery.min.js,可以到Flexslider官網下載資料夾。https://woocommerce.com/flexslider/   JS方面除了上述以外需加入以下   若要改項目參數可以看官網步驟四有詳細的項目列表 例:   HTML   CSS flexslider.css裡的設定可依據實際需要自由修改   範例:https://codepen.io/bok770/pen/zdvZVe  
有時我們會在CSS裡看到「>」、「+」、「~」這些符號的使用,它們到底有甚麼功用呢?各有甚麼不同呢?以下讓我們來簡單介紹一下。 大於符號(>) 大於(>)就是選取底下直接的子元素。 以大於符號(.box > p)和空格(.box p)來做比較,先看以下例子:   CSS 使用空格的情況 .box p{ font-size:20px; color:#216AAD;}   使用大於符號的情況下 .box > p{font-size:20px; color: #216AAD; } 由上可知.box p會影響到box這個div底下所有的p元素,而因為「>」只會影響到直接的子元素,所以例子中box底下直接接觸到的p元素只有001跟004,所以只有這兩者會改變。   加號符號(+)則是會影響到後方同層級的第一個元素 範例: html   CSS div + p{ font-size:20px; color:#216AAD;} 由於跟div同層級又直接位於div後方的只有003,所以只有003改變。   而取代符號(~)是影響到後方同層級的全部元素,因此除了003以外004也會改變。 div ~ p{ font-size:20px; color:#216AAD;}   雖然只是CSS撰寫上的小技巧,但是若能夠善加使用這些符號的話,將可以很好地規避每個CSS之間的影響,想必將更有利於撰寫CSS和減少class的數量唷!
如果只是需要圖片自動輪播,不需要手動點圖的功能的話,可以試試以下方法,不用太多原始碼,輕鬆做出有淡入淡出效果的圖片輪播唷!   外掛套件: 官網:http://malsup.com/jquery/cycle/ 網站上展示了六種特效的外掛,分別有:shuffle、zoom、fade、turnDown、curtainX、scrollRight (click),可以多嘗試不同特效。以下以「fade」淡入淡出之效果來示範,其餘效果只要將fade改為想要的特效名稱即可。   首先排列要輪播的圖片 HTML 長寬的設定可以依照圖片尺寸做調整   CSS   JS 需要三個JS檔,可以從官網下載。   範例:https://codepen.io/bok770/pen/VzvbbK See the Pen &lt;a href='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/' _fcksavedurl='https://codepen.io/bok770/pen/VzvbbK/'&gt;VzvbbK&lt;/a&gt; by Ya (&lt;a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'&gt;@bok770&lt;/a&gt;) on &lt;a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'&gt;CodePen&lt;/a&gt;.   另外在http://malsup.com/jquery/cycle2/有更多進階的輪播效果可以選擇,皆有詳細的使用步驟,相當方便使用唷!
上次我們介紹了jsFiddle,這次我們來介紹一樣是線上編輯器也很受歡迎的Codepen:https://codepen.io/。簡潔的黑底介面設計,與jsFiddle相比美觀許多,點進網頁就可以看到許多具有精湛效果的範例,讓人一點擊進來便足以被吸引目光,不像jsFiddle需要註冊登入才可分享,Codepen的首頁直接讓你看到來自世界各地的優秀作品!   可以註冊使用,也可以保持未登入的狀態,若是登入使用的話,在尋找過去所寫過的代碼時會比較方便,如果是未登入則必須記得系統生成的保存網址。    使用說明: 按右上角「Create」裡的New Pen可以新增檔案   開起來的頁面,分成HTML、CSS、JS和演示效果共四大區塊。   可以從上方Change View中,依照個人使用習慣改變排版方式。 效果可即時預覽,不像jsFiddle得按Run才會顯示。   點開CSS旁的齒輪圖示可做進階設定,像是CSS Preprocessor可以選SASS、SCSS、LESS等等。 CSS Base可直接載入reset.css,Add External CSS可以載入外部的CSS   JS也一樣可以做設定   完成之後按Save,上面的網址就是你這篇demo的保存網址囉! 但是若需要使用嵌入功能(Embed)的話,必須註冊登入後才可以唷!   範例:一樣以上次的下拉式選單做例子 See the Pen <a href='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/' _fcksavedurl='https://codepen.io/bok770/pen/brVqKq/'>brVqKq</a> by Ya (<a href='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770' _fcksavedurl='https://codepen.io/bok770'>@bok770</a>) on <a href='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io' _fcksavedurl='https://codepen.io'>CodePen</a>. https://codepen.io/bok770/pen/brVqKq
jsFiddle是相當實用且受歡迎的線上編輯器,能夠線上測試、檢查所撰寫的code,也可以分享自己寫的code範例,給其他人觀看、修改、學習等等,以達到交流的效果。 jsFiddle:https://jsfiddle.net/ 欄位有html、CSS、javascript、result四欄。 javascript欄位可以自由選擇版本,如jQuery、YUI、ExtJS等等。 一開始左上角有Run、Save、Tidy、Collaborate四個選項 Run:執行代碼並顯示在result Save:儲存 Tidy:將代碼排版弄整齊 Collaborate:可以將自己所寫的代碼拿給其他人討論,限登入使用 註冊步驟簡單,只要有帳密和電子信箱即可。 按Save儲存後,左上角的選項會多出Update、Fork、Set as base   Update:儲存更新版本,每儲存一次,網址上會多一個版本序號。如下圖:   Fork:另存新檔,會另開一個新網址。 Set as base:如果版本存到第二版以後,會將這一版設定為初版的範本。 若要在網頁中嵌入的話,只要點開Embed,將EMBED CODE中的碼複製貼到網頁中就好囉。   若是想用iframe也可選擇,只要按上方的prefer iframe就會產生iframe碼。     範例:在jsFiddle製作下拉式選單  https://jsfiddle.net/bok770/f07pgr91/