Tag: front-end

0

CSS 認識 Float

Float浮動屬性 float的使用,通常是想在版面上做出文繞圖的效果,但也可以應用在元素的左右對齊。float屬性有下列定位特性: 讓元素脫離normal flow,浮動到父容器的上內緣(top),並往右right或往左left貼齊父容器的左內緣或右內緣。 它會改變line box的寬度,相鄰在float元素後面元素的line box會呈現圍繞著浮動元素的效果。 float元素的定位是out

0

CSS 手刻漢堡選單 Pure CSS hamburger menu

平常逛網站時,很常遇到漢堡選單,這個自適應螢幕的選單效果,大家一定不陌生,如果使用 Bootstrap 可以輕鬆做到, Bootstrap 是用 CSS 跟 Javascript 寫出來的。 而這篇就要來介紹純 CSS 刻的漢堡選單,主要重點有: 善用 checkbox 來作為選單開關 善用 display 來隱藏選單 善用 max-height + transition 製造選單下拉效果

0

CSS 認識 background (下)

background-position background-position是用來定位背景的位置,可以以方位名稱(top、left、center、right、bottom)為參數,也可以用單位與數值來當作參數。 用小張的圖來表現background-position的實用性可能會沒感覺,我們可以拿背景圖片超過元素範圍來看。 當我們把背景圖片放大到超過元素的可見範圍,我們要想辦法讓圖片照我們想要

0

CSS 認識 background (上)

background 屬性是用來聲明元素的背景,它可以大到網頁整個背景,也可以設定一個一個區塊的背景,或是小到像<button>、<a>都可以使用background屬性來聲明背景樣式。背景可以填單色,也可以做漸層色,或是引入一張圖片來當背景。它們各自有其相應的屬性及屬性值(參數): background-color 單色的背景,可以用各種色碼(Hex、RGB、HSL)作為