網頁設計相關文章

我們在使用網路上的字型時，在粗細上並不是只有正常和粗體兩種而已，Font-weight屬性可以設定字體的粗細變化，除了normal是預設值、bold是粗體、inherit是繼承父元素之外，數字設定是從100、200~900，一共有九種，此外bold粗體是700，normal是400，設定值是純數字時，不需要在後面加上任何單位唷。 下面以網頁常使用的繁中字型－微軟正黑體做示範： See the Pen MErNBE by Ya (@bok770) on CodePen. font-weight屬性相當容易使用，不妨善用這個屬性讓網頁上的字體更有變化性唷！

 之前曾介紹一個大家較熟悉的icon素材網－Font-Awesome，這次介紹的雖然也是提供icon下載使用，但是比較特別的是，Devicon提供的圖示是較偏向於技術性相關的，我們有時需要在網站放一些這種icon，以告訴客戶支援了哪些技術、瀏覽器(Google Chrome、Firefox、Safari)、使用何種設計軟體(photoshop、illustrator)製作等等，這種常見的技術相關標誌，在這個網站都找得到。 Devicon：https://konpa.github.io/devicon/ 圖示提供了SVG和字型版本(Font version)。最上方可以輸入關鍵字搜尋你要的icon名稱。   首先選擇一個圖示，這邊選擇Google Chrome的icon作示範，點了之後右列會顯示字型版本與SVG版本，各版本又有好幾種不同的外型，如示範中的Chrome，字型版本和SVG版本各有四種，不同點是加入英文字或是改了顏色之類的，可以依據自己的需求來使用。下有原始碼可直接複製到自己的檔案中使用。要注意的是字型版本需要多加一行在裡。   若要下載原檔的話可以滑到下方下載。 Devicon提供各種技術開發者會用到的icon和logo，只要複製貼上即可快速使用！

網頁設計師在寫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/有更多進階的輪播效果可以選擇，皆有詳細的使用步驟，相當方便使用唷！