文章專區

網頁設計相關文章

當有兩個div重疊時,可以發現當滑鼠滑到重疊的區域時,會無法對下層的div進行點擊或hover的動作。 如下圖範例,藍色區塊(box01)設定了hover,只要滑入該div就會變色,但是當滑到重疊區塊時,壓在底下的box01設置的hover屬性會無法實現。 See the Pen KEeXqK by Ya (@bok770) on CodePen.   此時可以應用CSS的屬性「pointer-events」,它是針對滑鼠事件的屬性,預設值為auto,若設定值為none時,則可以穿越該元素。也就是說,原本滑鼠無法點擊的下層div,設定為pointer-event: none的話,可以讓鼠標直接穿越上層div,對下層div進行動作。 範例: See the Pen ywEzxO by Ya (@bok770) on CodePen.   我們可以發現,原本壓在底下的box01,就算鼠標滑到重疊區域內,也可以觸發hover了。
近來CSS有不少新增的屬性,然而各個兼容性不一,我們可以用@support標記來檢測該瀏覽器是否有支援。 基本用法: @supports (該CSS屬性規則) { div {該CSS屬性規則} } 範例: @supports (display: flex) { div { display: flex; } } 意思是當瀏覽器支援display: flex時,即套用該屬性。   我們可以用not來設定該屬性不支援時的替換CSS,來應付不支援時的情況。 範例: @supports not(display: flex) { div { display: inline-block; } } 意思是當瀏覽器不支援display: flex時,改為display: inline-block   你也可以使用or或and串接多個CSS設定 範例: @supports (display: -webkit-flex) or           (display: -moz-flex) or           (display: flex){     div{     display: -webkit-flex;             display: -moz-flex;             display: flex          } } @support可以針對舊型和新型瀏覽器設定不同的CSS規則,大多時候用來支援較舊式的瀏覽器,並在使用更新的瀏覽器時,套用新屬性,提升用戶體驗。
在網頁設計上,用float排版若不清除浮動,會造成父元素塌陷的問題,不然就是改用display:inline-block或flexbox解決。 而現在CSS有一個新屬性display:flow-root,可以讓你不用再特地清除浮動囉! 範例: See the Pen rozENw by Ya (@bok770) on CodePen.   display:flow-root 的生效條件 1. float的值不是none 2. overflow的使用值不是visible 3. display的值為table-cell、table-caption、inline-block或inline-table 4. position的值既不是static也不是relative 5. block-progression的值為lr或rl,其父框的block-progression 的值為tb 6. block-progression ' tb的值為' ',其父框的block-progression的值為 lr或 rl   由於是新屬性的關係,在瀏覽器的兼容性尚有待加強,只可支援firfox 53+、chrome58+、opera45+ 而可以使用@supports功能來進行增強漸進處理或是優雅降級處理 @supports(display:flow-root){} @supports not (display:flow-root){}   範例: @supports(display:flow-root){ display: flow-root; } 若瀏覽器支援display:flow-root,會啟用該屬性   @supports not (display:flow-root){ display: inline-block; clear:both; } 若瀏覽器不支援,則會啟用display: inline-block;  clear:both;
我們在瀏覽網站時,時常可以看到網頁的網址列上附有該品牌或是該公司企業的logo圖示,那麼該如何才能將icon加上去呢?   有兩個方法如下: 1.將圖片轉成ico格式,然後命名為favicon.ico,尺寸設16X16px,因為只是放在title上,占的範圍很小,所以圖檔不宜過大。 有不少將png、jpg等圖檔線上轉成ico的網站,可以直接將圖片上傳轉檔。 png轉ico:https://www.convertico.com/ 原始圖片支援jpg、png、gif:http://tw.faviconico.org/ 之後再將圖片放在網站的根目錄下即可。   第二個方法是在網頁的head裡放入 標題欄: < link rel="icon" href="/favicon.ico" type="image/x-icon" / > 收藏夾: < link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" / >   href裡可以放圖片的相對路徑或絕對路徑,所以不需放在網站的根目錄下,圖片名稱也不一定要取favicon.ico,可以自由命名。 例如: < link rel="icon" href="images/logo.ico" type="image/x-icon" / > < link rel="icon" href="https://www.webdesigns.com.tw/images/logo.ico" type="image/x-icon" / >  但還是建議使用ico檔案,因為相較於png、jpg等圖片,ico在瀏覽器的支援度更廣。
 在網頁設計中,若要將一張圖片作水平或是垂直翻轉,除了新製作一張翻轉過的圖片以外,還可以直接用CSS做到,這就要應用到CSS的transform屬性了。此屬性除了上次介紹的旋轉效果以外,也可以做翻轉,也就是鏡射效果。 寫法為以下: 水平翻轉: scale本為縮放效果,可以控制圖片的縮放倍率,如果設定值為scaleX(-1),便可以呈現出鏡射效果。 See the Pen pqEWbO by Ya (@bok770) on CodePen.   垂直翻轉: 水平為scale(X),反之垂直翻轉則是要設scale(Y) See the Pen ZVpXyP by Ya (@bok770) on CodePen.  
CSS的 transform 屬性可以讓網頁元素變形,呈現多種的特殊效果,其中之一便是旋轉效果,可以自由設定元素順時針或逆時針旋轉幾度。 寫法為rotate(θ) 指定元素以參考點為中心軸旋轉θ度。 θ 參數須有標示單位,例如: deg (角度)、rad (弧度) 、grad (梯度)  正數為順時針旋轉,負數反之為逆時針。   範例: transform:rotate(5deg)為指定元素以參考點為中心軸順時針旋轉5度。 See the Pen roNymy by Ya (@bok770) on CodePen. See the Pen yGLMza by Ya (@bok770) on CodePen.
 Html iframe為內嵌框架,用來在網頁內內置另一個網頁,像是常見的在部落格內嵌facebook專頁,可以直接在內嵌頁面上按讚或分享,是很常見的應用範例。 Iframe可以設定寬度、高度、外框參數、卷軸參數。 範例:   src便是輸入要嵌入的網頁,width 與 height 分別用來設定 iframe的寬度與高度,單位預設為px,所以若是px單位的話只寫數字即可,但如果是百分比%的話要明寫出來   frameborder用來設定 iframe 的邊框是否要顯示 frameborder="0" ──不顯示邊框 frameborder="1" ──要顯示邊框   scrolling 用來控制 iframe 的卷軸是否要顯示,有三種屬性可以設定:scrolling="yes" ──代表要顯示捲軸 scrolling="no" ──代表不顯示 scrolling="auto" ──則代表根據網頁大小自動顯示。 範例 :   See the Pen dQarxX by Ya (@bok770) on CodePen.
預設的div區塊為方形,CSS的border-radius屬性可以幫div添加圓角的效果, 設定值為圓角的半徑值,例如:border-radius:5px 意思為圓角半徑為5px 我們可以依據自身需求為div的四個邊分別設定不同數值, 四個數值對應的方向為 border-radius:  左上 右上 右下 左下 範例: See the Pen xQJbqB by Ya (@bok770) on CodePen.   以上範例僅設了兩個圓角10px,分別為右下角和左下角,其他兩邊設成0,所以會是直角。   若只設一個數值,則全部的角皆會設成該值 範例: See the Pen ZmjYpo by Ya (@bok770) on CodePen.     若要設計圓形可以設border-radius: 99em 範例: See the Pen KrBwNy by Ya (@bok770) on CodePen.    
在網頁設計上,icon設計與應用是相當常見的, 而使用上除了將icon存成圖片以外,還可以將之作成ICON Font。   那麼到底什麼是ICON Font呢? ICON Font是指將繪製好的向量圖檔轉存為文字檔, 並以css設定成字型來取代原有的圖片物件,在使用上只需輸入該icon對應的代碼或class, 就能夠輕鬆地產生一個小icon。     ICON Font的優缺點如下: 優點: 1.將小圖示(icon)轉為字體後,可減少原本輸出成圖片的檔案大小,降低圖片的使用率。 2.可透過css設定文字大小和文字顏色、陰影來達成效果。 3.修改時只需透過css修改樣式即可,不需再重複做修改圖片的工作。 4.因為是向量文字,相對在放大縮小時,解析度不受影響。   缺點: 1.由於文字形式只能設成單色,因此icon只能為單色或為css3的漸變色。 2.需借助專業的工具生成文字檔,製作方法可參考IcoMoon-將icon轉成Font的平台   綜合以上優缺點,使用ICON Font,不論是在檔案大小或修改的方便性來說,還是略佔優勢, 除了可自行設計以外,也可利用網路搜尋到不少免費的ICON Font資源,讓icon應用上更省力。   那麼該從哪裡下載免費的ICON Font呢? 除了上述的IcoMoon以外,這裡提供幾個主要的平台 Font Awesome:可參考Font-Awesome-簡單又好用的icon素材網 ,只要一行字即可直接使用! Fontello WE LOVE ICON FONTS 其實這些網站的ICON Font使用方式都差不多,首先都需先載入他們網站所提供的css, 然後輸入你要使用的icon所對應的代碼即可。   隨著扁平化設計逐漸普及,ICON Font在網頁設計上越來越常見, 而豐富的網路資源也能夠提高網站開發的速度,提升工作效率,不妨多加使用。  
 HTML button按鈕的應用相當廣泛, 設定值有以下: Type:按鈕的類型,有 button(單純按鈕)、reset(清空表單)、submit(送出表單) value:就是按鈕的値 name:按鈕的名稱 <input type="button" value="按鈕值" name="按鈕名稱" style="按鈕樣式"> 範例: See the Pen gQbbWR by Ya (@bok770) on CodePen.   樣式可以透過CSS做調整,按鈕如下   若要消除預設樣式,CSS可以設定border:0 (去除邊框) 和background-color:none (去除背景),或是將這兩個屬性另外設CSS。 範例: See the Pen vQEEjm by Ya (@bok770) on CodePen.    接下來便可以自由套用CSS設計按鈕,也可以活用:hover讓鼠標接觸按鈕時會有不同的樣式變化。 範例: See the Pen wQBBEX by Ya (@bok770) on CodePen.