一、自定義bootstrap按鈕
將生成對應(yīng)的樣式拷貝到對應(yīng)樣式表中，即可以使用；例如btn-login，使用時為: <a class='btn btn-login' role='button' href='#'></a>
二、字體圖標
-
使用普通圖片圖標問題
- 位圖圖片不能很好地進行縮放，當(dāng)圖片進行放大時會失真（即變模糊），當(dāng)圖片進行縮小時就會浪費掉像素;
- 加載每一張圖片都需要進行網(wǎng)絡(luò)請求(可以用精靈圖解決);
- 圖片如果需要修改樣式，需要圖片編輯器(例如PS)對圖片進行編輯、處理等操作;
-
字體圖標
圖標當(dāng)成文字來使用時，會有意想不到的效果，它們只是一種形狀而已，好處:- 很容易任意地縮放;
- 很容易地改變顏色；
- 很容易地產(chǎn)生陰影；
- 可以擁有透明效果；
- 可以使用CSS來裝飾；
- 可以快速轉(zhuǎn)化形態(tài)(如 :hover等)；
- 可以做出跟圖片一樣可以做的事情(改變透明度、旋轉(zhuǎn)度..)；
- 本身體積更小，但攜帶的信息并沒有削減;
- 引入自己的字體
@font-face {
/* 定義字體名稱(必須)*/
font-family: 'zyz';
/* 字體文件的 URL(必須)*/
src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), url('../fonts/MiFie-Web-Font.ttf') format('truetype'), url('../fonts/MiFie-Web-Font.woff') format('woff'), url('../fonts/MiFie-Web-Font.svg') format('svg');
/* 定義字體的樣,默認是 "normal" (可選)*/
font-weight: normal;
/* 定義字體的粗細。默認是 "normal"(可選)*/
font-style: normal;
}
- 使用字體圖標
/* 字體圖標類名以icon-開頭*/
[class^='icon-'],
[class*=' icon-'] {
font-family: 'zyz' !important;
font-style: normal;
}
/* 設(shè)置對應(yīng)的圖標*/
.icon-mobile:before {
content: "\e908";
font-size: 13px;
}
為什么要用":before"形式？
因為直接寫HTML時要記住對應(yīng)的字符編碼；而使用CSS時，將對應(yīng)字符編碼寫好，需要用時直接用類名即可； (使用比較便捷)
三、谷歌瀏覽器開發(fā)工具
直接在瀏覽器中修改樣式，會更為快捷，但修改的內(nèi)容和原文件時不同步的，所以就可以通過以下操作，將文件作一個關(guān)聯(lián)：
-
創(chuàng)建文件夾到工作空間
創(chuàng)建文件夾到工作空間 -
選擇對應(yīng)的工程目錄(瀏覽器會提示，選擇允許此操作)
選擇對應(yīng)的工程目錄
已添加到工作空間 -
添加映射(即文件關(guān)聯(lián))
工程目錄描述
添加映射映射操作只需要做一次，其他文件是會自動對應(yīng)上。添加完成之后，在瀏覽器中修改樣式，就會同步到本地文件中。
四、輪播圖
- 在較小的屏幕下顯示一張超寬大圖，圖片居中方式
- 背景圖方式
background-position: center center；
- padding
left: 50%
margin: width/2
background-size: length|percentage|cover|contain;
- length(具體數(shù)值)
設(shè)置背景圖像的高度和寬度;
第一個值設(shè)置寬度，第二個值設(shè)置高度;
如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto";
例如 background-size: 200px 200px；
- percentage(百分比)
以父元素的百分比來設(shè)置背景圖像的寬度和高度；
第一個值設(shè)置寬度，第二個值設(shè)置高度；
如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"；
例如 background-size: 100% 100%；
- cover
把背景圖像擴展至足夠大(以圖片最小邊為準，拉到和盒子一樣)，以使背景圖像完全覆蓋背景區(qū)域；
背景圖像的某些部分也許無法顯示在背景定位區(qū)域中；
例如 background-size: cover；
- contain
把圖像擴展至最大尺寸(以圖片最大邊為準，縮放到和盒子一樣)，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域；
例如 background-size: contain；
<div class="item active" data-img-lg='img/slide_01_2000x410.jpg' data-img-xs='img/slide_01_640x340.jpg'></div>
// 獲取到自定義屬性
$item.data('img-lg');
// 當(dāng)窗口大小發(fā)生改變時觸發(fā)
$(window).on('resize', function(){ });
// 注冊完事件后，如果想要立即觸發(fā)某個事件，可以通過trigger
$(window).on('resize', resize).trigger('resize');
相同樣式的，寫到css文件中，如果不同的一般直接是行內(nèi)樣式；
