網頁設計相關文章

CSS Lint是線上CSS檢測工具，能夠線上分析你所寫的網站CSS有無潛在問題，會清楚列出出錯行數與問題所在，方便進行修改。 步驟如下： 1.進入CSS Lint網站http://csslint.net/ 2.在大白框裡複製貼上寫好的CSS碼，按LINT!鍵     3.會列出有多少錯誤與警告(如下圖的CSS列出了0個錯誤與43個警告   下方會列出警告的清單，包含行數與問題敘述，之後便可針對一個個警告進行CSS修改了唷！   網頁設計師不妨在寫完後貼上檢測看看，有助於讓你的CSS樣式表更精簡唷！  

之前的文章曾介紹過CSS3:nth-child(n)選取器的功能，這次來介紹功能看似很像的:nth-of-type(n)。 :nth-of-type(n)跟:nth-child(n)一樣都是CSS3的偽類選取器，在寫法上和選取順序沒有太大的不同。   :first-of-type選取第一個元素 ex: ul li{background:#4D90BB; } ul li:first-of-type{ background: #E16F6F;}   :last-of-type選取最後一個元素 ul li: last-of-type{ background: #E16F6F;}   :nth-of-type(n)選取第n個元素 ul li:nth-of-type(3){ background: #E16F6F;}  選取的為第三項   :nth-of-type(odd)選取奇數 ul li:nth-of-type(odd){ background: #E16F6F;}   :nth-of-type(even)選取偶數 ul li:nth-of-type(even){ background: #E16F6F;}   :nth-of-type (an+b)自訂數列 ul li:nth-of-type(2n+1){ background: #E16F6F;} n的值從0算起，因此第一與第三項會被選取   乍看之下跟nth-child(n)沒什麼不同，但參照以下範例便可理解兩者的不同之處。 範例：   CSS分別設定: ul li:nth-of-type(3){ background: #E16F6F;} ul li:nth-child(3){ background: #E16F6F;} 結果兩者相同        但若在每個li之間加上同層級的hr時         :nth-of-type能如實選取到指定的第三項li，而:nth-child卻選取到了第二項，這是為甚麼呢？因為以範例來說，:nth-child是選取了ul裡的第三個子元素，而這元素是li，所以同層級的hr也算進去了。 由以上實例可顯示，:nth-of-type比起:nth-child在選取上更精確、更不易出錯，所以建議若要指定某元素裡的第幾個標籤，可以多多使用:nth-of-type唷！          

想要讓你的圖片隨著螢幕放大縮小嗎？想要讓你的圖片放滿版嗎？不妨來試試CSS3的新單位vh、vw吧！ vh、vw在使用上與百分比%很相似，vh代表view height，指的是螢幕可視範圍高度的百分比，而vw則代表view width，是指螢幕可視範圍寬度的百分比。 vmin：寬度或高度較小值的百分比 vmax：寬度或高度較大值的百分比   像素px、百分比%、vw vh的比較 像素px：最基本易懂的單位，不會跟著視窗縮放尺寸。 例 : width:200px; height:100px;   百分比%：由於沒有任何內容物，所以跟vh vw不同，即使設定了數值也不會顯示，除了這點以外，百分比是以父元素為基準做百分比縮放，而vh vw則是以裝置(螢幕視窗)大小為基準。   vh vw : 會隨著網頁縮放而改變尺寸。比如說設定一個div為width:50vw;height:30vh（為了方便顯示，另設定一個div為width:100vw;height:100vh來包整塊可視範圍）。 意思就是說這塊div會占可視範圍寬度的50%、高度的30%   這個新單位會隨著網頁縮放而改變，因此在RWD網頁設計的應用上是相當實用。

在撰寫上透過css的簡寫可以讓文件變更小，更易讀，以下為幾項常用的CSS簡寫：   margin padding間距的設定 可縮寫成四個數字， 如：margin:10px 30px 20px 10px 填寫順序依序為上右下左，想成從上方順時針數下來就對了。 margin:10px 30px第一數為上下的值，第二數為左右的。 margin:10px表示四邊的值。   邊框border的設定 border: 1px #c00 solid 依序為 border-width邊框寬度、border-color邊框顏色、border-style邊框樣式   background背景設定 background:url(001.jpg) #000 center no-repeat 依序為background-image背景圖片、background-color背景顏色、background-position背景定位、background-repeat背景重複   font文字設定 font: oblique bold 30px 24px 新細明體 依序為font-style文字樣式、font-weight文字粗細、font-size文字大小 、line-height行距、font-family文字字型 透過css的簡寫可以讓文件變更小，更易讀。如果能多加利用的話，便可有效節省css的撰寫量唷。 

 上回介紹了flex-container(容器)可使用的屬性，這次來介紹flex-items(子項目)可操作的屬性。 一樣先來張flexbox盒子模型圖複習一下(來源:MDN)   關於flex-items可操作的屬性，有以下幾項： order可以決定項目的排列順序。   例：下面兩圖僅差在是否加入了order，若未加order指定順序的話會如右圖所示。左圖則是已加入order。   flex-grow可設定項目們在容器內的比例。 例：每個項目在容器內的比例是2:1:3:2   flex-shrink與flex-grow相反，當項目將容器擠爆時，flex-shrink會把項目們縮小設定的比例。會根據flex-shrink設定的值來決定縮小的倍數。   下圖的縮小倍數比：1:2:3:4:5   flex-basis項目的基本大小，有點類似min-width，算是代替width用的，優先權比width高，但若兩者其中之一為auto，會以沒設auto的為優先。 關於flex-grow、flex-shrink、flex-basis此三項屬性，這邊有更詳細的解釋     flex由flex-grow、flex-shrink、flex-basis三個屬性組成，例：.flex{flex:2 1 300px;}   align-self可以指定某個項目的行為，會覆蓋容器align-items的設定。 auto：預設值，繼承容器的align-items屬性，若沒有則為stretch flex-start：對齊容器最上面的cross start flex-end：對齊容器最下面的cross end center：垂直置中 stretch：將flex項目撐開至容器的高度 baseline：以所有flex項目的基線作為對齊標準 例：下圖本來將容器設align-items: flex-start(靠齊最上方)。然而在第三項與第四項分別設了align-self: center(垂直置中)與align-self: flex-end(靠齊最下方)，覆蓋了容器align-items: flex-start的設定。

flexbox是CSS3裡較為特殊的排版方式，相較於一般常使用的float、position等屬性更為彈性，可以更有效率地做出一般方式所不易達成的效果。隨著響應式布局的興起，排版彈性大的flexbox使用率也頻繁了起來。 flexbox盒子模型如下圖(圖片來源:MDN)，不同於其他一般的CSS屬性，它有專屬於自己的一些屬性和概念，flexbox具有水平的起點與終點(main start、main end)、垂直的起點與終點(cross start、cross end)、水平軸與垂直軸(main axis、cross axis)。   總體來說分為flex container(容器)與flex item(子項目)兩大類。 如何使用flexbox的功能呢？ 只要在容器內加上display:flex或是display:inline-flex，容器和其內的項目就會直接套用flexbox的設定喔！ display:flex與display:inline-flex的差別 就跟display:block與display:inline-block差不多   此章先介紹flex container(容器)可用的屬性，有以下幾項： flex-direction為容器內項目的排列方向 可用的值有: row (從左到右，再從上到下) row-reverse(row的顛倒順序) column(從上到下，再從左到右) column-reverse(column的顛倒順序)   flex-wrap決定flex項目是否換行 可用的值有: nowrap：不換行(預設值)，不管有多少項目都會放在同一行內(寬度會自動調整) wrap：換行，會依照內容或寬度自動換行。 wrap-reverse：換行，但順序相反   flex-flow是  flex-direction與  flex-wrap屬性的縮寫，就跟 「border-width:1px;border-style:solid; border-color:#000」等於「 border:1px solid #000」是一樣的道理 flex-direction | flex-wrap 例：.box{flex-flow: row wrap}   justify-content決定flex項目與容器的水平對齊設定 flex-start：預設值，flex項目對齊最左邊的main start(水平起點) flex-end：flex項目對齊容器最左邊的main end(水平終點) center：水平置中 space-between：平均分配  flex項目，最左與最右的flex項目會與main start及main end貼齊。 space-around：平均分配  flex項目，間距也是平均分配。   align-items與justify-content相反，決定的是flex項目與容器的垂直對齊設定。 flex-start：預設值，對齊容器最上面的cross start(垂直起點) flex-end：對齊容器最下面的cross end(垂直終點) center：垂直置中 stretch：將flex項目撐開至容器的高度 baseline：以所有flex項目的基線作為對齊標準   align-content align-items是針對內容為單行的項目進行處理，但若是多行的項目，就要使用align-content此屬性。 flex-start：預設值，對齊容器最上面的cross start(垂直起點) flex-end：對齊容器最下面的cross end(垂直終點) center：垂直置中 space-between：第一行與最後一行分別貼齊最上方與最下方 space-around：行距平均分配 stretch：將flex項目撐開至容器的高度   以上便是flex container(容器)可用的屬性，下次將介紹flex item(子項目)。

Font Awesome網站提供許多好看的icon可以免費下載使用，原理為將icon以文字型式(fonts)表現，在應用上比起將設計的icon切成圖片使用來得更加便利。 首先進入Font Awesome的網站http://fontawesome.io/ 下載套件   解壓縮後，若只是需要css的話只需將css與font的資料夾複製到目的地。   在<head>與</head>之間加入css語法 例如: <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> 若要使用只需在html裡加入欲選擇的icon語法即可 例：<i class="fa fa-camera" aria-hidden="true"></i>   若要更改大小的話可以依自己需求在原始碼裡加上fa-lg、fa-2x、fa-3x等。 例： <i class="fa fa-camera fa-lg" aria-hidden="true"></i> <i class="fa fa-camera fa-2x" aria-hidden="true"></i> <i class="fa fa-camera fa-3x" aria-hidden="true"></i> <i class="fa fa-camera fa-4x" aria-hidden="true"></i>   <i class="fa fa-camera fa-5x" aria-hidden="true"></i>   另外因為Font Awesome的icon是文字型式，所以也可用文字設定的css來改變大小 例：font-size:14px   Font Awesome提供的icon可減少特地設計icon和切版所需花費的時間，設計上又簡單實用，為網頁設計師可善加利用的好工具。

CSS的背景屬性background-position，主要用來定位背景圖片的位置。 background-position的數值分成三種表示方式：關鍵字、像素、百分比 關鍵字：background-position:top left;　值有top、bottom、left、right、center 像素：background-position:0px 0px; 百分比：background-position:0% 0%; 前兩者指定的是背景圖片左上角相對於容器左上角的位置。（百分比的情況較特殊，後面會解釋。）   EX: background-position: 10px 20px; 第一個數值(10px)指的是水平位置；第二個數值(20px)指的是垂直位置 也就是說從左上角算起，將背景圖往右移10px、往下移20px   background-position: top center; 背景圖設定在從容器左上角算起最上方並中間的位置   百分比表示： background-position: 背景圖本身(x% y%)的那個點會與容器(x% y%)的那個點重合 例： background-position: 20% 40%; 背景圖本身(20% 40%)的那個點會與容器(20% 40%)的那個點重合   若以px或%表示時，數值可以用負的。 如: background-position: -10px -30px; 從左上角算起，背景圖會往左移10px、往上移30px 註:因為背景圖片只能在容器內顯示，所以超出的部分會被切掉。   1. 數值與百分比是可以一起用的。(如:background-position:15px 60%;) 2. 數值/百分比與關鍵字是無法混用的。(如:background-position:center 20%;) 3. 若只輸入一個數值，會隨數值改變的只有水平位置。

在作網頁設計時常常需要嵌入youtube影片，但一碰到RWD網頁時，影片就會遇上無法隨著螢幕縮放的問題！這是因為youtube供嵌入用的iframe原始碼已經是固定尺寸了，因此我們需要修改以讓影片能跟著RWD一同縮放。 步驟相當簡單： 1.首先在CSS列表中新增以下CSS .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0;left: 0; width: 100%; height: 100%;} padding-bottom: 56.25%為影片高度與寬度的比例16:9計算得來，9除以16=0.5625換算高度比0.5625=56.25% padding-top: 30px:用於修正的高度，可用25px或30px 2.在youtube提供的iframe原始碼加入 EX:   影片實例： 可以縮放視窗看看實際效果唷！ 以上，就可以使youtube影片100%自動縮放瞜！這是在RWD設計裡相當實用的基本技巧。

html提供許多特殊符號可使用，像是星星、金錢、箭頭.....等等，在作網頁設計時，這樣的話就不用切成圖片，而是能直接寫成html碼了！ 而Mausr是個能直接透過手畫找到你想要的符號的搜尋器，十分便利。   1.Draw a symbol - Mausr：http://www.mausr.com/ 進入網頁後，左邊的框框內為繪製區，可以自由地繪出你需要的符號大致輪廓。   2.繪出圖案後網站會自動幫你搜尋類似的符號，其上會提供html碼，只要複製即可運用。   只要畫出大致形狀就會跳出相似圖形的搜尋結果。     除了用繪製區尋找外，還提供了符號列表可供查找。   Mausr辨識效果相當強大，對於網頁設計師來說是不可多得的好工具。