極其簡單的導航列表

列表樣子：

第一部分字型

全部商品分類 和下面的內容字型不一樣是因為加了css樣式。

一般常用的字型樣式如下所述：

font-style：字型樣式；italic斜體 oblique傾斜，實際上可以只使用italic。
font-weight：字型粗細；常用的bold。
font-size：字型大小；可以是指定數值比如12px，也可以是特定值（比如xx-small，x-small，small，medium，large，x-larger，xx-larger，每一個都比前一個大20%），也可以是百分比120%，或者倍數1.2em，也可以用比較級smaller，larger。
font-family

字型樣式可以進行簡寫。
簡寫的順序為：
font：
1. font-style
2. （font-variant（不常用）其中small-caps屬性會顯示小型大寫字母的字型）
3. font-weight
4. font-size/（font-line-height（不常用，行高，可以自行設定或者百分比））
5. font-family
比如font:italic bold 20px "shuimo";
中間使用空格隔開。

一個好方法：可以將body的font-size設定成small或者medium，然後其他的字型屬性使用百分比或者倍數標識，這樣的話比較容易協調。

CSS樣式中處理字型的常見問題

1.css檔案中設定的中文字型型別不起作用，怎麼解決？
css檔案編碼重新設定為utf-8即可，總之要與HTML檔案相一致。

2.如果頁面中既有中文又有英文，怎麼修飾字體型別？
font-family:cursive,"微軟雅黑";

3.如果把中文字型型別寫在英文字型型別之前，會出現怎麼樣的效果？
會導致英文字型使用中文字型樣式

4.如果一些電腦上沒有設計的字型，比如沒有“微軟雅黑”，怎麼辦？
可以增加字型樣式型別，如果瀏覽器發現沒有“微軟雅黑”這個字型，會自動往下一個字型型別，如“黑體”，如果都沒有則使用預設字型來顯示。
font-family:"微軟雅黑" "黑體" "隸書";

5.如何增加自己的字型？

1. 找到一個自己想要的字型；
2. 確保有所需字型的所有格式，格式有：.ttf .eot .otf .svg .woff .woff2； 一般網上可能只有ttf格式的字型，需要通過轉換，轉換網站（我目前使用的）：https://www.fontke.com/tool/convfont/；
3. 將你的字型檔案放到web上（web伺服器上）；
4. 在css中增加@font-face屬性：

@font-face{
    font-family: "shuimo";
    src: url("../../字型/我字酷默陌寫意水墨體.ttf"),
         url("../../字型/zhongwenshuimo.eot"),
         url("../../字型/zhongwenshuimo.otf"),
         url("../../字型/zhongwenshuimo.svg"),
         url("../../字型/zhongwenshuimo.woff"),
         url("../../字型/zhongwenshuimo.woff2");
}

      5.用這個字型

p{
 font-family: "shuimo";
}

第二部分文字

一般常用的字型樣式如下所述：

color不多說了
顏色使用方式：
1.直接表達：red；
2.使用16進位制：#ff0000；
3.使用rgb：rgba（255,0,0,1） 範圍0-255，a為透明度，範圍0-1；

上面透明度為1，下面透明度為0.5；

text-align：left左對齊 center居中 right右居中
text-indent：首行縮排 可以說具體數值，可以說%（對於父元素來說）可以說使用em，如1em，一個字高的長度。
text-decoration：是對文字進行修飾，比如下劃線underline 文字中穿了一條線line-through 上劃線overline 什麼都沒有none
letter-spacing：字元間距，使用具體數值
word-spacing：詞間距，使用具體數值（對中文無效）

第三部分背景

css中對背景的美化一般常用的如下：

background-color：隨第二部分顏色所述。
background-image:url(“圖片路徑地址”)。
background-repeat:repeat 重複平鋪（為預設值） no-repeat沒有重複平鋪 repeat-x在水平方向平鋪 repeat-y在垂直方向平鋪。一般在設定背景圖片的時候設定。
background-position:定位，一般有兩個值，左右，上下。
簡寫：
background後面的樣式型別可以隨意順序。

第四部分列表

css中對列表的美化一般常用的如下：

list-style-type:列表序號型別
list-style-image:序號改成影象
list-style-position：inside outside 序號位置
簡化的話也是直接list-style：type position image；

 <ol id="inside">
       <li>列表項1</li>
       <li>列表項2</li>
 </ol>
 <ol id="outside">
       <li>列表項1</li>
       <li>列表項2</li>
 </ol>

ol{
    list-style-type: lower-alpha;
    list-style-image: url("../images/arrow-right.gif")
} 
li
{
     border: 1px solid black; 
}
#inside{
    list-style-position: inside;
}
#outside{
    list-style-position: outside;
}

效果如下：

通過上述的CSS 樣式可以做出最上面的簡易導航列表。

2017年06月24日更新以下內容：

在平常製作網頁是，常使用列表來導航和展示，其中有一些常用的CSS樣式。
首先是最常用來排列元素的順序的屬性，
float：浮動,使元素像船一樣浮動在底下的元素上。

說到float屬性就不得不說clear屬性了，如果元素上面不想有浮動的元素怎麼辦，這時候使用clear屬性。
clear：指定段落的左側或右側不允許浮動的元素

這裡有個問題：使用浮動後，子容器超出父容器的範圍，或者說全部子元素都浮動後，底下的父元素沒有子元素後，不被擴充，導致只有一點本身的大小，怎麼辦？

第一種方法：在子元素下面增加一個<div>，加樣式clear：both；，清除浮動，就可以吧父元素的高度拉下來。
第二種方法：在父容器加入樣式overflow：hidden；。

注意：當子元素有定位的時候，只能使用第一種方法來使父容器自適應子容器的寬高。

上面提到了overflow屬性。
overflow：指定如果內容溢位一個元素的框，會發生什麼

上面還提到了position屬性。
position：定位，一旦定位後會生成一個塊級框，不論該元素本身是什麼型別。

其中元素的位置通過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

如果兩個元素疊在一起，想讓後面的顯示在前面，一般輪播圖基本都會使用z-index這個屬性。
z-index：調整元素定位時重疊層的上下位置
–z-index屬性值：整數，預設值為0
–設定了position屬性時，z-index屬性可以設定各元素之間的重疊高低關係
–z-index值大的層位於值小的層上方

本部落格僅用於記錄web前端學習情況