使用 CSS Reset
CSS Reset 可以幫你在不同的瀏覽器上維持一致的樣式風格。你可以使用像 Normalize 這類的 CSS Reset 套件,或使用更簡潔的 CSS Reset 方法:
* { box-sizing: border-box;
margin: 0;
padding: 0; }
現在元素的 margin 和 padding 已重設,且 box-sizing 可以讓你透過 CSS Box Model 管理版面配置。示範
注意:如果你接著套用 繼承 box-sizing 這個技巧, 你或許不需要在你的 CSS Reset 中加入 box-sizing 屬性。
繼承 box-sizing
讓 box-sizing 屬性自動從 html 元素繼承下來 :
html { box-sizing: border-box; }
*,
*::before,
*::after {
box-sizing: inherit; }
如此一來,你就很容易的在其他外掛或元件裡改變 box-sizing 的值。
使用 unset 而不是重置所有屬性
當重置元素的屬性時,並不需要重置元素中每個屬性:
button
{ background: none;
border: none;
color: inherit;
font: inherit;
outline: none;
padding: 0; }
你可以用 all 來代表元素中所有的樣式屬性。 將該值設定為 unset 意味著將元素中所有樣式屬性回復到預設值:
button {
all: unset;
}
注意: 目前 all 屬性在 IE11 並不支援,而目前 Edge 瀏覽器則正在考慮支援。IE11 不支援 unset 用法!
使用 :not() 選擇器來決定表單是否顯示邊框
假設你用以下樣式先替元素新增邊框
/* 新增邊框 */
.nav li { border-right: 1px solid #666;
}
然後在最後一個元素去除邊框
/* 去掉邊框 */
.nav li:last-child { border-right: none;
}
不過你可以改用 :not() 偽類別 (pseudo-class) 來做到完全相同的效果:
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
當然,你也可以用 .nav li + li,但是使用 :not() 可以使語句更加清晰,更具可讀性。示範
將 line-height 加入到 body 元素
你不必為分別為每一個 <p>、<h*> 元素加入 line-height 樣式,相反的,你應該直接新增到 body 元素:
body {
line-height: 1.5;
}
所有的文字元素預設就會繼承 body 的樣式。
將所有元素設定垂直居中
不!這絕不是黑魔法,這真的可以將所有元素設定垂直居中:
html, body {
height: 100%;
margin: 0;
}
body {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-flex;
display: flex;
}
還想居中排版其他的東西?垂直居中、水平居中、... 任何事、任何時間、任何地點?CSS-Tricks 有篇不錯的文章 提到了各種居中排版的技巧。
注意: IE11 的 flexbox 有些怪怪的行為 要注意。示範
想知道更多的技巧,就動動手指連到以下網址去看看吧!! Let's go!!
網頁設計.RWD響應式網站.行動版網站.企業形象網站 / 休閒餐飲類
網站技術:PHP . Javascript
可以透過網站選購美食產品,選擇寄送位置與付款方式且操作方式不複雜。首頁點選「產品介紹」利用下方分類選擇商品,針對自己想購買的商品加入購物車並完成訂購;也可登入會員確認商品運輸進度。
Line OA / 服務類
網站技術:PHP . Javascript/MySql
女生的好閨密蘇菲現在也有LINE OA官方網站喔!! 裡面不但有優惠資訊,也可以參加活動抽獎品。這樣好康多多的LINE聊天室,還不快把握機會加入!!
精選專案.企業形象網站.Line OA / 休閒餐飲類
網站技術:PHP/MySql
達日好胖卡推出點數及票劵LINE官方帳號喔,功能有點數集點/兌換/轉讓,甚至也有票劵功能,像是餐劵、遊戲劵等等。適用於公司、學校與社區活動,便利性極高的LINE OA 官方帳號。
電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:[email protected] | 臺北市信義區和平東路3段257號6樓map
© 2019 傑立資訊 All rights reserved.| 網站隱私政策