CSS使用必知的20個(gè)小技巧
們?cè)诶肅SS控制樣式的時(shí)候，有些基本的技巧知識(shí)還是需要了解的。這樣不僅僅能夠幫助我們實(shí)現(xiàn)想要的效果，同時(shí)也能夠提高我們的工作效率。接下來看看鄭州清新教育鄭州網(wǎng)頁設(shè)計(jì)培訓(xùn)的老師為大家整理的這20個(gè)技巧吧!
1 . 黑白圖像
這段代碼會(huì)讓你的彩色照片顯示為黑白照片，是不是很酷?
CSS Code
1.img.desaturate {
2. filter: grayscale(100%);
3. -webkit-filter: grayscale(100%);
4. -moz-filter: grayscale(100%);
5. -ms-filter: grayscale(100%);
6. -o-filter: grayscale(100%);
7.}
8.
2. 使用 :not() 在菜單上應(yīng)用/取消應(yīng)用邊框
先給每一個(gè)菜單項(xiàng)添加邊框
CSS Code
1./* add border */
2..nav li {
3. border-right: 1px solid #666;
4.}
5.……然后再除去最后一個(gè)元素……
6.
7.// remove border /
8.
9..nav li:last-child {
10. border-right: none;
11.}
12.……可以直接使用 :not() 偽類來應(yīng)用元素：
13.
14..nav li:not(:last-child) {
15. border-right: 1px solid #666;
16.}
這樣代碼就干凈，易讀，易于理解了。
當(dāng)然，如果你的新元素有兄弟元素的話，也可以使用通用的兄弟選擇符(~)：
CSS Code
1...nav li:first-child ~ li {
2.
3. border-left: 1px solid #666;
4.}
5.
3. 頁面頂部陰影
下面這個(gè)簡單的 css3 代碼片段可以給網(wǎng)頁加上漂亮的頂部陰影效果：
CSS Code
1.body:before {
2. content: "";
3. position: fixed;
4. top: -10px;
5. left: 0;
6. width: 100%;
7. height: 10px;
8.
9. -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
10. -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
11. box-shadow: 0px 0px 10px rgba(0,0,0,.8);
12.
13. z-index: 100;
14.}
15.
4. 給 body 添加行高
你不需要分別添加 line-height 到每個(gè)p,h標(biāo)記等。只要添加到 body 即可：
CSS Code
1.body {
2. line-height: 1;
3.}
這樣文本元素就可以很容易地從 body 繼承。
5. 所有一切都垂直居中
要將所有元素垂直居中，太簡單了：
CSS Code
1, body {
2. height: 100%;
3. margin: 0;
4.}
5.
6.body {
7. -webkit-align-items: center;
8. -ms-flex-align: center;
9. align-items: center;
10. display: -webkit-flex;
11. display: flex;
12.}
13.
看，是不是很簡單。
注意：在IE11中要小心flexbox。
6. 逗號(hào)分隔的列表
讓html列表項(xiàng)看上去像一個(gè)真正的，用逗號(hào)分隔的列表：
CSS Code
1.ul > li:not(:last-child)::after {
2. content: ",";
3.}
4.
對(duì)最后一個(gè)列表項(xiàng)使用 :not() 偽類。
7. 使用負(fù)的 nth-child 選擇項(xiàng)目
在CSS中使用負(fù)的 nth-child 選擇項(xiàng)目1到項(xiàng)目n。
CSS Code
1.li {
2. display: none;
3.}
4.
5./* select items 1 through 3 and display them */
6.li:nth-child(-n+3) {
7. display: block;
8.}
9.
8. 對(duì)圖標(biāo)使用 SVG
我們沒有理由不對(duì)圖標(biāo)使用SVG：
CSS Code
1..logo {
2. background: url("logo.svg");
3.}
SVG對(duì)所有的分辨率類型都具有良好的擴(kuò)展性，并支持所有瀏覽器都回歸到IE9。這樣可以避開.png、.jpg或.gif文件了。
9. 優(yōu)化顯示文本
有時(shí)，字體并不能在所有設(shè)備上都達(dá)到最佳的顯示，所以可以讓設(shè)備瀏覽器來幫助你：
XML/HTML Code
1 {
2. -moz-osx-font-smoothing: grayscale;
3. -webkit-font-smoothing: antialiased;
4. text-rendering: optimizeLegibility;
5.}
6.
注：請(qǐng)負(fù)責(zé)任地使用 optimizeLegibility。此外，IE /Edge沒有 text-rendering 支持。
10. 對(duì)純 CSS 滑塊使用 max-height
使用 max-height 和溢出隱藏來實(shí)現(xiàn)只有CSS的滑塊：
CSS Code
1..slider ul {
2. max-height: 0;
3. overlow: hidden;
4.}
5.
6..slider:hover ul {
7. max-height: 1000px;
8. transition: .3s ease;
9.}
- 2015-10-24CorelDraw插件如何安裝和使用？
- 2015-09-21平面設(shè)計(jì)較高級(jí)使用什么軟件？
- 2015-09-09CSS瀏覽器兼容性解決方法
- 2015-09-09DIV+CSS兼容性的解決方法大全
- 2015-09-08Ai在平面設(shè)計(jì)中的應(yīng)用小技巧
- 2015-09-08平面設(shè)計(jì)中之PS使用的技巧有哪些？
- 2015-08-21室內(nèi)設(shè)計(jì)與使用功能
- 2015-08-17Photoshop使用必須知道的十個(gè)技巧
- 2014-08-12使用簡單的室內(nèi)設(shè)計(jì)技巧讓你的房間看起來更大
- 2014-07-18室內(nèi)設(shè)計(jì)中如何使用顏色來照亮你的家
- 2014-04-23使用網(wǎng)站內(nèi)容管理系統(tǒng)需要注意的問題
- 2013-05-09動(dòng)漫設(shè)計(jì)中如何使用maya maya在動(dòng)漫設(shè)計(jì)中的作用
- 2012-11-28學(xué)習(xí)網(wǎng)頁設(shè)計(jì)要先學(xué)HTML還是CSS
- 2012-10-16鄭州清新教育div+css培訓(xùn)課程
- 2012-04-09電影字體與“合理使用”原則
- 求學(xué)問答專業(yè)答復(fù)，快速響應(yīng)
- 電話：0371-63218905
- 手機(jī)：13613841515
-
QQ：
- 1 室內(nèi)設(shè)計(jì)培訓(xùn)課程 人咨詢中 19
- 2 平面設(shè)計(jì)培訓(xùn)課程 人咨詢中 18
- 3 網(wǎng)頁設(shè)計(jì)培訓(xùn)課程 人咨詢中 18
- 4 淘寶開店培訓(xùn)課程 人咨詢中 15
- 5 動(dòng)漫設(shè)計(jì)培訓(xùn)課程 人咨詢中 12
- 6 淘寶美工培訓(xùn)課程 人咨詢中 17
- 7 電腦辦公培訓(xùn)課程 人咨詢中 15
- 8 網(wǎng)絡(luò)營銷培訓(xùn)課程 人咨詢中 13
- 9 模具設(shè)計(jì)培訓(xùn)課程 人咨詢中 10
- 10 網(wǎng)站開發(fā)培訓(xùn)課程 人咨詢中 16
