選擇器導航製做相關

時間 2019-11-10

標籤選擇器導航製做相關简体版

原文原文鏈接

基礎選擇器html

一、多類名選擇器：各個類名中間用空格隔開。瀏覽器

二、標籤選擇器：能夠選擇一個或者多個標籤；佈局

三、id選擇器字體

四、類選擇器：url

關於類名命名方面：不能純數字、不能數字開頭、儘可能英文字母+數字、不能相似於.div .span命名spa

id選擇器和類選擇器的區別：最大的區別在於可否使用次數上。code

五、通配符選擇器：匹配頁面全部元素。htm

字體相關blog

字體書寫的順序：input

選擇器（font：font-style font-weight font-size/line-height font-family）

一些相關技巧：

一、網頁廣泛使用14px；

二、儘可能使用偶數數字字號，IE6等老式瀏覽器支持奇數會有bug；

三、儘可能使用系統默認字體；

關於color文本顏色：

<關於16進制的一些說明>

相對應的關係：0-9 A-F；

三種顏色：red green blue;

#空格1 空格2 空格3 空格4 空格5 空格6; rrggbb;

【空格12對應red 空格34對應green 空格56對應blue】

按三原色進行配色。。兩兩相同的才能進行縮寫；

複合選擇器

後代選擇器：用來選擇元素或元素組的後代寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格。

b、子代選擇器

c、並集和交集選擇器

交集選擇器

並集選擇器

僞類選擇器

用於某些瀏覽器添加特殊效果，好比給連接添加特殊效果。

a、:link /*未訪問的連接*/

b、:visited /*已訪問的連接*/

c、:hover /*鼠標移動到連接上*/

d、:active /*選定的連接*/

注：

使用順序不能變

標籤的顯示模式

每一個塊狀元素（bock-level）一般會獨佔一行或者是多行，能夠對其設置寬度、高度、對齊等屬性，經常使用於網頁佈局和網頁結構的搭建。

常見的塊元素有<h1><h6><div><ul><ol><li>等、其中div是最典型的塊元素。

行內元素（內聯元素inline-level）不佔獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，通常不能夠設置寬度、高度、對其等屬性、經常使用於控制頁面文本中的樣式。

常見的行內元素有<a><strong><b><em><i><del><s><ins>等，其中<span>標籤是最典型的行內元素

塊級元素的特色：

a、老是重新行開始；

b、高度行高外邊距以及內邊距均可以控制；

c、寬度默認是容器的100%；

d、能夠容納內聯元素和其餘塊元素；

行內元素的特色：

a、和相鄰行內元素在一行上；

b、高、寬無效、但水平方向的padding和margin能夠設置，垂直方向無效；

c、默認的寬度就是它自己內容的寬度；

d、行內元素只能容納文本或其餘行內元素；

行內塊元素（inline-block）：

在行內元素中有幾個特殊的標籤—<img/>、<input/>、<td>、能夠對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。

行內塊元素的特色：

a、和相鄰（行內塊）在一行上，可是之間會有空白縫隙；

b、默認寬度就是它自己內容的寬度；

c、高度、行高、外邊距和內邊距均可以控制

標籤顯示模式轉換display

塊轉行內：display：inline；

行內轉塊：display：block；

塊、行內元素轉換爲行內塊：display：inline-block；

導航欄製做案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜單欄的製做</title>
    <style>
    .nav{
        text-align: center;
    }
    .nav a{
        width: 120px;
        height: 50px;
        display: inline-block;
        background-image: url(橙色.png);
        text-align: center;
        text-decoration: none;
        line-height: 50px;
        color: #fff;

    }
    .nav a:hover{
        background-image: url(藍色.png);
    }
    </style>
</head>
<body>
    <div class="nav"><!-- 導航欄開始了 -->
    <a href="#">一個大佬</a>
    <a href="#">兩個大佬</a>
    <a href="#">三個大佬</a>
    <a href="#">四個大佬</a>
    <a href="#">五個大佬</a>
    <a href="#">六個大佬</a>
    </div>
</body>
</html>