H5學習之22 CSS-導航欄的建立

阿新 • • 發佈：2019-01-29

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
ul {
            list-style-type: none; /* 標記項型別*/
margin: 0px;
padding: 0;
}

        .chuizhi a:link, .chuizhi a:visited {
            display: block;
font-weight 
: bold;
color: #FFFFFF;
background-color: #bebebe;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}

        /*設定a標籤的樣式，將a標籤設定成塊元素，這樣滑鼠放到沒有文字的地方也能點選。        a標籤作為li標籤的內層元素，決定了li標籤顯示，a標籤會填充li標籤的 元素部分，也就是border範圍減去padding，裡頭最核心的內容。        li標籤就是塊級元素，不設定大小樣式的話，他會根據內部元素的大小來決定大小，內部元素顯示什麼，他就顯示什麼。 
        */
.chuizhi a:hover, .chuizhi a:active {
            background-color: #cc0000;
}

        /*------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.shuiping li {
            display: inline;
 
}

        .shuiping a:link, .shuiping a:visited {
            /*float:left;*/
width: 60px; /*行內元素，給他設定寬度也沒有意義*/
text-decoration: none;
background-color: #98bf21;
padding: 6px;
color: white;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

        .shuiping a:hover, .shuiping a:active {
            background-color: #7A991A;
}

        /*
這裡只設置了 li  為 行內元素，這樣，li就會水平排列了。
        這就是通過設定行內元素來 做導航欄。        li水平排列，a作為li裡的元素，自然也就會水平排列。
        這裡的text align 加的有一點沒有意義，因為a是一個行內元素，他的長寬由文字定義，外加上 padding，這樣textalign影響不了文字的排列。
        只有塊級元素 手動設定了長寬之類的，textalign才有意義。
        此外，在這個例子裡，我無法再通過更改 li和a的padding 和 margin值來使那幾個綠色的按鈕沒有間隔。以後用到的話再說吧。
        可能是行內元素之間的莫名空白是去除不掉的。        */
        /*------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.shuiping2 li {
            float: left;
}

        .shuiping2 a:link, .shuiping2 a:visited {
            display: block;
/*float：left也可以，只不過比上面的多了一些內容*/
width: 100px;
text-decoration: none;
background-color: #bebebe;
padding: 6px;
color: white;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

        .shuiping2 a:hover, .shuiping2 a:active {
            background-color: #cc0000;
}

        /*給li設定了folat:left 漂浮屬性，因為li本身就是塊級元素，設定左浮動，li就變成水平排列的元素了。
        之後a標籤的內容也會水平排列。
        但是因為a標籤是內聯元素，所以會水平排列，不能夠設定長度，所以需要把 a標籤設定成塊級元素，display:block。
        此外，直接float：left也能將a標籤設定成塊級元素。
        還有position:absolute，與position:fixed 也會讓一個元素從 行內 轉變成 塊級        */
div {
            background-color: red;
height: 50px;
}

        /*------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.shuiping3 {
            clear: left;
}
        /*因為shuiping2浮動，所以清除一下*/
.shuiping3 li {
            display:inline;
}
        .shuiping3 a {
            text-align: center;
float: left;
/*如果換成這一句換成display:block就垂直了*/
width: 7em;
text-decoration: none;
color: white;
background-color: purple;
padding: 0.2em 0.6em;
border-right: 1px solid white;
}

        a:hover {
            background-color: #ff3300
}
    </style>
</head>
<body>
<h1>可以設定某元素不可見，這一句新增到CSS裡，h1就沒有了。h1.visible {visibility:visible}</h1>
<!--
內聯元素（行內元素）不能夠巢狀塊級元素，塊級元素不會繼承外層的內聯元素的一些屬性，造成常識性錯誤。
    一般情況下，內層元素的位置是根據外層元素來的。不能說因為內層更改了位置資訊，外層也變了。
    比如 2個塊級元素 ，每一個內都巢狀1個內聯元素，這樣顯示的效果是 2個塊級元素垂直排列。有換行。
    但是2個內聯元素，每一個內都巢狀1個塊級元素，這樣顯示的效果仍然是2個垂直排列的元素。有換行。而不是繼承自外層的屬性進行同行的排列。
    應該是必須按外層元素來看錶現。內層再將外層當做一個容器來決定他的位置。而不能因為內層的一些設定就改變了外層所在的位置。這是不合乎設定的。
    內層元素填充的是外層元素。這句話可能有錯誤.
外層位置，形式可能會根據內層變化而變化。ul因為li浮動變成了浮動(shuiping2)。 div內巢狀div，內層設定浮動，外層也浮動了。    shuiping1 中，如果我給a加上float，ul就變成了浮動 紅色背景div是實驗品得出來的結論.行內元素巢狀浮動元素，行內元素也變成了浮動元素
    如果行內元素內巢狀 塊級元素 或者 浮動元素，那麼  外層的行內元素的 位置 浮動 是否仍然是行內 會受到相應的變化。
    塊級元素內 巢狀 浮動 元素，外層塊級元素也會受到影響。  巢狀行內元素，外層的塊級不會受影響。
    外層是行內，巢狀浮動，塊級，外層都守影響
    外層是塊級， 巢狀浮動。會受影響
     塊級會被 塊級浮動改變，不會被行內改變。
     行內會別 塊級 浮動改變
-->
<ul class="chuizhi">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>
<ul class="shuiping">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>
<div>aa</div>
<ul class="shuiping2">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>
<ul class="shuiping3">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>
</body>
</html>

具體效果如下：

程式碼解釋：

第一行就是一個可以設定不見的屬性。 visibility:visible

其次是4個導航欄。

導航欄都是用無序列表做出來的。

第一個導航欄是一個垂直導航欄。

<ul class="chuizhi">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

ul {
    list-style-type: none; /* 標記項型別*/
margin: 0px;
padding: 0;
}

.chuizhi a:link, .chuizhi a:visited {
    display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #bebebe;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}

/*設定a標籤的樣式，將a標籤設定成塊元素，這樣滑鼠放到沒有文字的地方也能點選。a標籤作為li標籤的內層元素，決定了li標籤顯示，a標籤會填充li標籤的 元素部分，也就是border範圍減去padding，裡頭最核心的內容。li標籤就是塊級元素，不設定大小樣式的話，他會根據內部元素的大小來決定大小，內部元素顯示什麼，他就顯示什麼。*/
.chuizhi a:hover, .chuizhi a:active {
    background-color: #cc0000;
}

因為做的是垂直導航欄，而li的排列本身就是垂直的，所以不用更改什麼，直接把a設定成塊級元素，以此能夠獲得固定長度就好。而且a變成塊級之後，滑鼠即使移動到按鈕非文字處也可以點選，如果不設定成塊級，那麼只能是在文字上的時候可以點選。

第二個導航欄是水平導航欄

<ul class="shuiping">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

.shuiping li {
    display: inline;
}

.shuiping a:link, .shuiping a:visited {
    /*float:left;*/
width: 60px; /*行內元素，給他設定寬度也沒有意義*/
text-decoration: none;
background-color: #98bf21;
padding: 6px;
color: white;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

.shuiping a:hover, .shuiping a:active {
    background-color: #7A991A;
}

/*
這裡只設置了 li  為 行內元素，這樣，li就會水平排列了。
這就是通過設定行內元素來 做導航欄。li水平排列，a作為li裡的元素，自然也就會水平排列。
這裡的text align 加的有一點沒有意義，因為a是一個行內元素，他的長寬由文字定義，外加上 padding，這樣textalign影響不了文字的排列。
只有塊級元素 手動設定了長寬之類的，textalign才有意義。
此外，在這個例子裡，我無法再通過更改 li和a的padding 和 margin值來使那幾個綠色的按鈕沒有間隔。以後用到的話再說吧。
可能是行內元素之間的莫名空白是去除不掉的。*/

可以看到，效果為幾個有間隔的長度不一樣的矩形。

這裡做的操作是給li加上了一個 display:inline; 將li變成了行內元素，這樣li的元素就變成了橫向排列。於是，幾個a標籤就橫向排列了。再設定樣式就OK。

如果給a加上一個float，那麼li也變成了浮動元素，ul也變成了浮動元素。

水平導航欄2

<ul class="shuiping2">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

.shuiping2 li {
    float: left;
}

.shuiping2 a:link, .shuiping2 a:visited {
    display: block;
/*float：left也可以，只不過比上面的多了一些內容*/
width: 100px;
text-decoration: none;
background-color: #bebebe;
padding: 6px;
color: white;
font-weight: bold;
text-align: center;
text-transform: uppercase;
}

.shuiping2 a:hover, .shuiping2 a:active {
    background-color: #cc0000;
}

/*給li設定了folat:left 漂浮屬性，因為li本身就是塊級元素，設定左浮動，li就變成水平排列的元素了。
之後a標籤的內容也會水平排列。
但是因為a標籤是內聯元素，所以會水平排列，不能夠設定長度，所以需要把 a標籤設定成塊級元素，display:block。
此外，直接float：left也能將a標籤設定成塊級元素。
還有position:absolute，與position:fixed 也會讓一個元素從 行內 轉變成 塊級*/
div {
    background-color: red;
height: 50px;
}

仍然是水平導航欄，但是與1不同的是，1用的是給把本來是塊級元素的li設定成行內元素，這個用的是把li 設定成左漂浮，然後把a設定成塊級元素。這樣形成的效果是a作為塊級元素也是橫向排列的，因為li是向左漂浮的。外層是float，內層是塊級。整體效果是左漂浮的塊級。如果外層是塊級不漂浮，內層是塊級漂浮，形成的效果也會是漂浮。

在這個例子中，整個ul因為li的浮動，ul也浮動起來了.

水平導航欄3

<ul class="shuiping3">
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
</ul>

.shuiping3 {
    clear: left;
}
/*因為shuiping2的整個ul是左浮動，所以清除一下*/
.shuiping3 li {
    display:inline;
}
.shuiping3 a {
    text-align: center;
float: left;
/*如果換成這一句換成display:block就垂直了*/
width: 7em;
text-decoration: none;
color: white;
background-color: purple;
padding: 0.2em 0.6em;
border-right: 1px solid white;
}

a:hover {
    background-color: #ff3300
}

在這裡，其實與1類似，但是在1的基礎上，也就是在把li設定成inline的基礎上，為了讓a變成具有長度的塊級元素，而且也為了水平排列，這裡，將a設定成左浮動。所以a也變成了塊級元素左浮動。

還有一種設定水平導航欄的辦法，把li設定成block（其實本來就是塊級，不用設定也可以），然後把a設定成float。也能形成水平的導航欄。

這一次做的東西使用了非常多的時間，因為有很多自己不明白的地方。最終通過一些規律的實驗，弄懂了。

這一次的重點是：

內聯元素（行內元素）不能夠巢狀塊級元素（規則）

2個塊級元素 ，每一個內都巢狀1個內聯元素，這樣顯示的效果是 2個塊級元素垂直排列。有換行。
但是2個內聯元素，每一個內都巢狀1個塊級元素，這樣顯示的效果仍然是2個垂直排列的元素。有換行。而不是繼承自外層的屬性進行同行的排列

外層有時候會根據內層表現來決定 是否漂浮，是否塊級。

外層位置，形式可能會根據內層變化而變化。ul因為li浮動變成了浮動(shuiping2)。 div內巢狀div，內層設定浮動，外層也浮動了。shuiping1 中，如果我給a加上float，ul就變成了浮動 紅色背景div是實驗品得出來的結論.行內元素巢狀浮動元素，行內元素也變成了浮動元素

外層是行內，巢狀浮動，變成浮動。 巢狀塊級，變成塊級。
外層是塊級， 巢狀浮動。變成浮動。 巢狀塊級，仍然是塊級。
外層是浮動，巢狀行內，仍然是浮動。 巢狀塊級，仍然是浮動。

外層行內會被除內層行內的影響狀態。
外層塊級會被內層漂浮影響狀態。
外層浮動不會被任何影響。

其實就是一些巢狀發生時會形成的效果是怎樣的。

H5學習之22 CSS-導航欄的建立

H5學習之22 CSS-導航欄的建立

Html學習之十三（導航欄的制作）

CSS導航欄

css導航欄鼠標hover的時候就出現下拉菜單

我的web前端學習之路-CSS-引入

我的web前端學習之路-CSS-選擇器

我的web前端學習之路-CSS-字體和文本

我的web前端學習之路-CSS-列表和表格

phpcms之調用導航欄

Python第五周前端學習之HTML5/ CSS / JS

[HTML/CSS]導航欄的下劃線跟隨效果

PHP全棧開發（八）：CSS Ⅹ 導航欄制作

純CSS導航欄下劃線跟隨效果

CSS導航欄圖示

H5學習之-----local storage

Elasticsearch 學習之Field Collapsing（欄位摺疊）

css導航欄二級選單寫法

前段學習之路---CSS

Flutter學習之路由與導航

Vue學習之旅----vue-cli及建立專案，初步執行

H5學習之22 CSS-導航欄的建立

相關推薦