Boootstarp 筆記 （一）

section:nth-child(2n+1){
    background-color: #fff;
}

基偶選擇器

body {
    font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
}

作爲Bootstarp字體初始化的一種補充

@font-face {
    font-family: 'itcast';
    src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'), url('../font/MiFie-Web-Font.svg') format('svg'), url('../font/MiFie-Web-Font.ttf') format('truetype'), url('../font/MiFie-Web-Font.woff') format('woff');
}

[class^="icon-"],[class*=" icon-"]{
    font-family: itcast;
    font-style:normal;
    /* 防止圖標斜體 */
}

.icon-mobilephone::before {
  content: "\e908";
  font-size: 13px;
}

.icon-telephone::before {
  content: "\e909";
  font-size: 15px;
}

.icon-logo::before {
  content: "\e93e";
}

.icon-icon::before {
  content: "\e920";
}

用font-face導入一些字體圖標 後面的URL做備用 formart指文件的格式
後面的選擇器分爲兩組 第一組表示class爲icon-開頭的元素 第二組爲 子字符串包含 icon-的元素 與之相近的選擇器還有 [class~="icon-"] 和
[class$="icon-"] 分別代表 classname 包含xx 和 以xx結束 這裏用上訴方式或者用~=都是可以的
字體的實際調用要考before僞類來完成 在後面插入

通過給父容器設置 text-center可以讓子元素居中 Bootstarp 預設樣式

#header .header-topbar-phone-link img{
    display: none;
}
#header .header-topbar-phone-link:hover img{
    display: block;
}

這是一種類似下拉框的效果 讓img默認none 然後在父元素 也就是a標籤hover 選擇子元素img block
但是有很多缺陷 第一是會撐開父元素 第二是這東西的所在位置經常不夠居中
所有我們需要修改他的樣式

#header .header-topbar-phone-link img{
    display: none;
    position: absolute;
    left: 50%;
    margin-left: -60px;
    top: 28px;
}
#header .header-topbar-phone-link:hover img{
    display: block;
}

注意 bootstarp幫我們設置了夫元素爲realtive 讓元素左邊距父元素左邊框爲父元素的50% 然後讓他往左邊偏移 自己像素的一半 這樣就達到了居中且不撐開容器的效果

出現了一個問題 bootstarp很多東西都做了一個浮動處理 你就很可能會出現其他元素被幹擾 別慌張 在干擾元素前寫個div.clearfix可以達到效果 但是又有問題爆發 就是會造成這個父容器的高度被撐開1個px 你的元素會被頂下去一個px 肉眼很容易就看出問題 我的最終解決方法是觸發浮動元素的父容器的BFC 
(更正 完全沒有float 被頂旁邊去的原因是上面的元素高度多了1px 下面的元素往旁邊被頂了)

第二個問題是 nav導航static top 默認是決定定位的 而且是z-index 1000 你要是想某些東西覆蓋在他上面呢 得設置他的z-index大於1000