HTML+CSS：css元素浮動(dòng)詳解，使用浮動(dòng)制作導(dǎo)航欄菜單

天這篇文章我們來說一下css的浮動(dòng)屬性（float），給塊狀元素添加float屬性可以使其轉(zhuǎn)變?yōu)樾袃?nèi)元素，也就是我們所說標(biāo)簽對象浮動(dòng)居左靠左（float:left）和浮動(dòng)居右靠右(float:right)。

（1）float使用語法

css的float主要有3個(gè)屬性值none、left、right，默認(rèn)為none；具體的使用如下所示：

float:none; （不使用浮動(dòng)）

float:left; （靠左浮動(dòng)）

float:right; （靠右浮動(dòng)）

（2）float使用案例

我們通過案例來實(shí)際演練一下float元素的使用技巧。

1、float:left的使用練習(xí)

我們這里創(chuàng)建一個(gè)導(dǎo)航條，導(dǎo)航條包含首頁、關(guān)于我們、新聞中心、案例展示等欄目名稱。具體的網(wǎng)頁代碼以及顯示效果就如下圖所示：

由上圖可以看出默認(rèn)的樣式是豎排顯示的，但是我們常見的網(wǎng)頁導(dǎo)航條都是橫排顯示的，這時(shí)候我們就可以使用float屬性來使塊狀元素轉(zhuǎn)變?yōu)樾袃?nèi)元素，并讓居左顯示。

這里我們創(chuàng)建一個(gè)寬度為980px的導(dǎo)航條，給子元素（li）添加float的屬性并對齊進(jìn)行填充（padding）以及外間距（margin）的潤色。具體的網(wǎng)頁代碼以及顯示效果就如下圖所示：

網(wǎng)頁中的顯示效果：

2、float:right的使用練習(xí)

float:right顧名思義用于元素靠右對齊，我們來看下面的一個(gè)例子，我們隨意寫一篇文字，然后文字中插入一張圖片并使圖片右對齊。

我們再網(wǎng)頁中可以看到圖片已經(jīng)浮動(dòng)到網(wǎng)頁的右側(cè)中去了。

好了，本篇文章就給大家說到這里，大家可以注意看下我們使用float之后會(huì)出現(xiàn)什么問題，下邊文章我們會(huì)給大家講解如何清除float帶來的負(fù)面影響。

每日金句：你不能拼爹的時(shí)候，你就只能去拼命！喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識。

行準(zhǔn)備工作

這邊對基本的樣式進(jìn)行了設(shè)置，首先在html部分設(shè)置了一個(gè)名為nav的div，隨后進(jìn)行基本的默認(rèn)樣式的清除，并且設(shè)置盒子為ie盒子方便后續(xù)的計(jì)算，整體都設(shè)置為彈性盒，方便后續(xù)矢量文字的操作，對導(dǎo)航欄nav進(jìn)行定位，方便后續(xù)位置上的操作


<body>
    <!-- 目前就一個(gè)簡單的nav，推薦大家語義化來寫 -->
    <div class="nav"></div>
</body>

<style>
    /* 清除一些默認(rèn)樣式 */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
    a{
         text-decoration: none;/*確保在瀏覽器中顯示鏈接時(shí)，沒有任何文本裝飾，如下劃線。 */
    }
    /* 對整體進(jìn)行設(shè)置，并且都設(shè)置為彈性盒，方便進(jìn)行操作 */
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #222327;
    }
    /* 設(shè)置導(dǎo)航欄樣式 */
    .nav{
        /* 對導(dǎo)航欄位置進(jìn)行定位處理，方便后續(xù)的圖標(biāo)位置的設(shè)置 */
        position: relative; 
        width: 400px;
        height: 70px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }
</style>

引入矢量文字

這里面呢引用了阿里巴巴的矢量文字效果，具體如何使用請見www.iconfont.cn/manage/inde… 里面的教程，這邊我挑了五個(gè)字體圖標(biāo)加入到了網(wǎng)頁中，并且用ul和lil加入到了導(dǎo)航欄中，目前是豎著排列的，后續(xù)加入css樣式之后會(huì)好起來，并且在第一個(gè)li上加入了active的css樣式，用于設(shè)置選中效果

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4173165_2g4t5a6pg9v.css">
    <div class="nav">
        <ul>
            <li class="active"> <span><i class="iconfont icon-shouye"></i></span></li>
            <li > <span><i class="iconfont icon-liuyan"></i></span></li>
            <li > <span><i class="iconfont icon-code"></i></span></li>
            <li > <span><i class="iconfont icon-box-empty"></i></span></li>
            <li > <span><i class="iconfont icon-gitee-fill-round"></i></span></li>
        </ul>
    </div>

對導(dǎo)航欄和ui li字體圖標(biāo)進(jìn)行設(shè)置

這里面呢針對ul和li進(jìn)行了設(shè)置，使之達(dá)到了圖下的效果，對ul 和li進(jìn)行了彈性盒的設(shè)置，li中的使用flex：1讓這些矢量文字按等份劃分容器寬度，使之達(dá)到了一個(gè)距離平均的樣式，并且設(shè)置了這個(gè)zindex的疊加級別

    .nav{
        /* 對導(dǎo)航欄位置進(jìn)行定位處理，方便后續(xù)的圖標(biāo)位置的設(shè)置 */
        position: relative; 
        width: 400px;
        height: 70px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }
    .nav ul{
        display: flex;
        width: 350px;
    }
    .nav ul li{
        height: 60px;
        /* flex:1是讓所有的li平均分nav這個(gè)容器 */
        flex: 1;
        position: relative;
       z-index: 2;
       display: flex;
       justify-content: center;
    }

繼續(xù)設(shè)置i元素和span元素

這里呢針對了span元素和i元素進(jìn)行了設(shè)置，通過span元素蔣i元素中的矢量圖標(biāo)設(shè)置到水平垂直都居中的位置，并且設(shè)置了圓角，加入了動(dòng)畫和動(dòng)畫延遲，針對i元素將文字大小設(shè)置了，并且在html中加入了對應(yīng)圖標(biāo)的文字效果，并且為例美觀在每個(gè)li元素中都添加了一個(gè)選中時(shí)候的不同的顏色，使用了變量--clr用于獲取選中效果行內(nèi)樣式是一種直接在HTML元素上指定樣式的方法，在這種情況下，你使用 style 屬性將 --clr 變量設(shè)為不同色

  .nav ul li span{
        /* 進(jìn)行定位，使之通過span元素帶動(dòng)矢量圖標(biāo)進(jìn)行水平垂直到中心位置 */
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        /* 設(shè)置鼠標(biāo)移入的樣式 */
        cursor: pointer;
        /* 設(shè)置動(dòng)畫過度事件以及延遲 */
        transition: 0.5s;
        transition-delay: 0s;
    }
    .nav ul li span i{
        color: #222327;
        font-size: 1.5em;
    }

<body>
    <!-- 目前就一個(gè)簡單的nav，推薦大家語義化來寫 -->
    <div class="nav">
        <ul>
            <!-- 設(shè)置active效果，用于獲取選中效果 用于獲取選中效果 行內(nèi)樣式是一種直接在HTML元素上指定樣式的方法，在這種情況下，你使用 style 屬性將 --clr 變量設(shè)為不同色 -->
            <li class="active" style="--clr:#f44336"><span><i class="iconfont icon-shouye"></i>首頁</span></li>
            <li style="--clr:#0fc70f"> <span><i class="iconfont icon-liuyan"></i>留言</span></li>
            <li style="--clr:#2196f3"> <span><i class="iconfont icon-code"></i>代碼</span></li>
            <li style="--clr:#b145e9"> <span><i class="iconfont icon-box-empty"></i>盒子</span></li>
            <li style="--clr:#ffa111"> <span><i class="iconfont icon-gitee-fill-round"></i>gitee</span></li>
            <div class="indicator"></div>
        </ul>
    </div>
</body>

下面設(shè)置選中時(shí)候的樣式，在這里呢針對span元素設(shè)置了選中的時(shí)候會(huì)向上位移到這個(gè)地方，并且在矢量圖標(biāo)的地方設(shè)置了開始選中的時(shí)候?qū)⑽淖诸伾臑楹捅尘邦伾粯拥念伾@樣當(dāng)點(diǎn)擊的那一刻，圖標(biāo)會(huì)出現(xiàn)消失的情況，當(dāng)超出導(dǎo)航欄到黑色部分的時(shí)候，文字就會(huì)顯示出來，在后面，設(shè)置了一個(gè)半圓的背景圖，當(dāng)背景圖位移到文字的位置的時(shí)候，矢量文字就會(huì)顯示出來

/* 下面是針對選中效果做的樣式處理 */
    .nav ul li.active span {
        /* 設(shè)置了一開始的背景顏色，后面會(huì)被取代，設(shè)置了點(diǎn)擊的時(shí)候會(huì)向上移動(dòng) */
        background: orange;
        transform: translateY(-27px);
        transition-delay: 0.25s;
    }

    .nav ul li.active span i {
        /* 設(shè)置了點(diǎn)擊時(shí)候矢量圖標(biāo)的文字顏色 */
        color: #fff;
    }

設(shè)置模糊效果

這里呢加入了一個(gè)模糊的效果，配合后面的選中的時(shí)候圖標(biāo)顏色顯示會(huì)形成一個(gè)類似于色彩過度的效果，并且將i元素上面設(shè)置的顏色顯示出來

    .nav ul li span::before {
        content: '';
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        height: 100%;
        background: orange;
        border-radius: 50%;
        filter: blur(40px);
        opacity: 0;
        transition: 0.5s;
        transition-delay: 0s;
    }
    .nav ul li span::before {
        opacity: 0.5;
        transition-delay: 0.25s;
    }
        /* 這里將i元素設(shè)置的顏色顯示出來 這兩個(gè)樣式塊中都使用了 background: var(--clr); 屬性，可以將背景顏色設(shè)置為clr 變量所表示的值。這種使用自定義變量的方式，可以在代碼中統(tǒng)一定義顏色值，以便在需要時(shí)進(jìn)行統(tǒng)一更改。*/
       .nav ul li.active span {
        background: var(--clr);
    }

    .nav ul li span::before {
        background: var(--clr);
    }

接下來設(shè)置背景圓

這里呢設(shè)置了背后的那個(gè)向下突兀的圓，其原理是通過位置的調(diào)整和顏色的與背景顏色的一致加上zindex的圖冊優(yōu)先級的顯示，構(gòu)成了這么一個(gè)背景半圓形圖

.indicator {
        /* 這里進(jìn)行了定位，并且設(shè)置了背景園的位置，同時(shí)將圓的背景顏色與背景顏色設(shè)為一致，會(huì)形成那種向下突兀的圓形，并且加入了動(dòng)畫 ps：這個(gè)過度的小圓弧我是真設(shè)置不好，湊合看吧，大佬們有能力的可以試試設(shè)置一下*/
        position: absolute;
        top: -35px;
        width: 70.5px;
        height: 70px;
        background: #222327;
        border-radius: 50%;
        z-index: 1;
        transition: 0.5s;
    }
    /* 設(shè)置左邊半弧 */
    .indicator::before {
        content: '';
        position: absolute;
        top: 16px;
        left: -34px;
        width: 10px;
        height: 5px;
        background: transparent;
        border-radius: 50%;
        box-shadow: 20.5px 19px 0 4px #fff;
    }
/* 設(shè)置右邊半弧 */
    .indicator::after {
        content: '';
        position: absolute;
        top: 16px;
        left: 54px;
        width: 10px;
        height: 5px;
        background: transparent;
        border-radius: 50%;
        box-shadow: 20px 19px 0 4px #fff;
    }

****動(dòng)畫設(shè)置，配合js形成點(diǎn)擊的時(shí)候，active會(huì)移動(dòng)到點(diǎn)擊的目標(biāo)身上

這里呢使用了nth-child選擇器選中對應(yīng)的i元素，注意，這里設(shè)置的平移效果是由clac函數(shù)計(jì)算而來，選中其中一個(gè)i元素，并且當(dāng)且僅當(dāng)具有active類之后的所有兄弟中的.indicator類元素，有一個(gè)指示器元素（.indicator）。指示器的位置會(huì)根據(jù)活動(dòng)項(xiàng)目（具有active類的<li>元素）的位置進(jìn)行調(diào)整。根據(jù)活動(dòng)項(xiàng)目的位置設(shè)置指示器的水平平移距離，實(shí)現(xiàn)一個(gè)在導(dǎo)航菜單中顯示當(dāng)前選中項(xiàng)目的效果。指示器的位置和平移距離是根據(jù)活動(dòng)項(xiàng)目的索引和固定的長度單位（70px）進(jìn)行計(jì)算的

/*/* nth-child()選中低某個(gè)i元素，然后配合js完成背景圓的移動(dòng) 
在CSS中，calc() 是一個(gè)用于執(zhí)行計(jì)算的函數(shù)。它允許在CSS屬性值中使用數(shù)學(xué)表達(dá)式。
這種計(jì)算函數(shù)通常用于允許動(dòng)態(tài)計(jì)算和調(diào)整元素的尺寸、間距或位置。在 calc() 函數(shù)中，可以使用不同的運(yùn)算符（如加號 +、減號 -、乘號 *、除號 /）來結(jié)合數(shù)值和單位進(jìn)行計(jì)算。
它可以包含其他長度單位（如像素 px、百分比 % 等），并且可以與其他CSS屬性值和變量一起使用。

當(dāng)一個(gè) `<li>` 元素具有 `active` 類時(shí)，對應(yīng)的 `.indicator` 元素會(huì)相對于活動(dòng)項(xiàng)目的位置水平平移一個(gè)特定的距離。每個(gè) `.indicator` 元素的平移距離相對于其前面的活動(dòng)項(xiàng)目索引和一個(gè)固定的長度單位（`70px`）計(jì)算得出。

*/ */
   
   .nav li:nth-child(1).active~.indicator{
        transform: translateX(calc(70px*0));
    }

    .nav li:nth-child(2).active~.indicator {
        transform: translateX(calc(70px*1));
    }

    .nav li:nth-child(3).active~.indicator {
        transform: translateX(calc(70px*2));
    }

    .nav li:nth-child(4).active~.indicator {
        transform: translateX(calc(70px*3));
    }

    .nav li:nth-child(5).active~.indicator {
        transform: translateX(calc(70px*4));
    }

這里配合js代碼，通過foreach為點(diǎn)擊的li或者為所有的li進(jìn)行添加或者移入active樣式

<script>
//通過 `lis.forEach(li => li.addEventListener('click', function () {...}))` 遍歷 `lis` 數(shù)組中的每個(gè)元素，并為每個(gè)元素都添加一個(gè) ‘click’ 事件監(jiān)聽器。
//在每次點(diǎn)擊事件中，使用 `lis.forEach(item => {...})` 遍歷 `lis` 數(shù)組中的每個(gè)元素，將它們的 `active` 類都移除，然后在當(dāng)前被點(diǎn)擊的元素上添加 `active` 類，
    const lis = document.querySelectorAll('.nav li')
    lis.forEach(li => li.addEventListener('click', function () {
        lis.forEach(item => {
            item.classList.remove('active');
            this.classList.add('active');
        })
    }))
</script>

效果展示

總結(jié)

這里配合js使用的動(dòng)畫是值得我學(xué)習(xí)的，通過js點(diǎn)擊賦予不同的liactive樣式，又根據(jù)active所在的li元素經(jīng)過計(jì)算對.indicator元素進(jìn)行平移，使之完成這個(gè)動(dòng)畫效果

基于css3寫出的底部導(dǎo)航欄效果（詳細(xì)注釋
原文鏈接：https://juejin.cn/post/7262334378759405605

篇文章，小海老師帶領(lǐng)大家一同做一個(gè)利用CSS技術(shù)實(shí)現(xiàn)的導(dǎo)航欄。通過這個(gè)導(dǎo)航欄的制作，希望大家能夠?qū)η皫灼恼轮袑W(xué)習(xí)到的CSS屬性能有一個(gè)整體的認(rèn)識，并能夠達(dá)到靈活運(yùn)用的程度。

承接文章：靈活控制塊級元素在一行內(nèi)顯示，CSS浮動(dòng)屬性，知道原理就很簡單

技術(shù)等級：初級 | 適合前端開發(fā)的初學(xué)者閱讀學(xué)習(xí)。

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會(huì)學(xué)到對你有用的知識。

如果你是初學(xué)前端開發(fā)，強(qiáng)烈建議跟著文章中講的步驟自己做一做。步驟不多，思路簡單，占用不了大家太多的時(shí)間，自己做一遍，一定會(huì)收獲不少。

一、導(dǎo)航欄效果圖展示：

今天我們要做的導(dǎo)航欄效果如下圖所示。

導(dǎo)航欄效果圖展示

這個(gè)效果主要使用的是<ul></ul>標(biāo)記對和<a></a>標(biāo)記對共同實(shí)現(xiàn)的。

整個(gè)實(shí)例涉及到的CSS屬性如下所示：

width
height
background-color
list-style-type
display
float
margin
line-height

二、實(shí)現(xiàn)頁面效果：

首先為導(dǎo)航欄設(shè)置一個(gè)<div>容器，并設(shè)置其id屬性的取值設(shè)置為nav。該容器用來控制導(dǎo)航欄的通欄位置。通欄的容器寬度應(yīng)該設(shè)置為100%，這里高度設(shè)置為40px，顏色為#a72f2e。實(shí)現(xiàn)代碼如下所示：

<div id=”nav”></div>
#nav{
width:100%; height:40px;
background-color:#a72f2e;
}

由于要在通欄的容器中顯示固定寬度為1000px的導(dǎo)航欄主體，因此在該容器內(nèi)部再制作一個(gè)<div>容器，用來盛放真正的導(dǎo)航欄代碼。我們將它的class屬性取值為navContent。這個(gè)容器的寬度設(shè)置為1000px，高度與#nav的高度等高，并且在#nav容器內(nèi)部水平居中。實(shí)現(xiàn)代碼如下所示：

<div class=”navContent”></div>
#nav .navContent{
width:1000px; height:40px;
margin:0 auto;
}

接下來在.navContent容器內(nèi)部書寫導(dǎo)航欄的各個(gè)條目。導(dǎo)航欄是使用<ul></ul>標(biāo)記對實(shí)現(xiàn)的，而它的導(dǎo)航欄條目是利用<li></li>標(biāo)記對書寫的。因?yàn)閷?dǎo)航欄需要單擊后跳轉(zhuǎn)頁面，所以在<li></li>內(nèi)部使用了<a></a>標(biāo)記對。

這里要說明一點(diǎn)，因?yàn)?lt;li></li>標(biāo)記對是塊級元素，<a></a>標(biāo)記對是內(nèi)聯(lián)元素，因此要讓<li></li>標(biāo)記對包裹<a></a>標(biāo)記對，不要用<a></a>標(biāo)記對包裹<li></li>標(biāo)記對。

這里以導(dǎo)航欄條目“首頁”和“網(wǎng)站介紹”為例，下列HTML代碼展示了導(dǎo)航欄的條目內(nèi)容。

<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="#">網(wǎng)站簡介</a></li>
…
</ul>

需要更多的導(dǎo)航欄條目，可以在<ul>標(biāo)記對內(nèi)部重復(fù)書寫<li></li>和<a></a>的代碼格式。

三、編寫整個(gè)導(dǎo)航欄的CSS樣式：

整個(gè)導(dǎo)航欄是使用<ul></ul>標(biāo)記對實(shí)現(xiàn)的，所以需要對<ul></ul>標(biāo)記對編寫CSS樣式。

由于無序列表的列表項(xiàng)左側(cè)帶有小圓點(diǎn)的項(xiàng)目符號，因此需要將該項(xiàng)目符號去掉。所以<ul></ul>標(biāo)記對的CSS代碼如下所示：

#nav .navContent ul{
list-style-type:none;
}

四、編寫導(dǎo)航欄條目的CSS樣式：

導(dǎo)航欄條目是使用<li></li>標(biāo)記對實(shí)現(xiàn)的，所以需要對<li></li>標(biāo)記對編寫CSS樣式。

由于<li></li>標(biāo)記對是塊級元素，因此即使去掉了左側(cè)的項(xiàng)目符號，所有的條目依然都各自獨(dú)占一行顯示，所以需要讓它們在一行內(nèi)顯示，這就需要讓所有的<li></li>標(biāo)記對左浮動(dòng)。CSS代碼如下所示：

#nav .navContent ul li{
float:left;
}

五、編寫導(dǎo)航欄條目中鏈接的CSS樣式：

導(dǎo)航欄條目中的鏈接是使用<a></a>標(biāo)記對實(shí)現(xiàn)的，所以需要對<a></a>標(biāo)記對編寫CSS樣式。

由于<a></a>標(biāo)記對是內(nèi)聯(lián)元素，因此無法設(shè)置寬度和高度，也就無法為每一個(gè)導(dǎo)航欄條目設(shè)置尺寸。因此需要將<a></a>標(biāo)記對轉(zhuǎn)換為塊級元素（display屬性），然后設(shè)置寬度和高度（width屬性和height屬性）。

有了寬度和高度，就需要讓鏈接的文本在容器中水平居中（text-align屬性）和垂直居中（line-height屬性）了。

最后去掉鏈接的下劃線（text-decoration屬性），并設(shè)置鏈接的文本顏色（color屬性）。

導(dǎo)航欄條目中鏈接的CSS代碼如下所示：

#nav .navContent ul li a{
display:block;
width:100px; height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
color:#dddddd;
}

六、編寫鼠標(biāo)經(jīng)過導(dǎo)航欄條目時(shí)的CSS樣式：

鼠標(biāo)經(jīng)過導(dǎo)航欄目時(shí)，即使沒有觸碰到鏈接的文本部分，也應(yīng)該能夠進(jìn)行跳轉(zhuǎn)。因此需要對<a></a>標(biāo)記對編寫鼠標(biāo)經(jīng)過時(shí)的CSS樣式。

鼠標(biāo)經(jīng)過時(shí)，希望背景顏色（background-color屬性）和文本顏色（color屬性）發(fā)生變化。

鼠標(biāo)經(jīng)過鏈接時(shí)的CSS代碼如下所示：

#nav .navContent ul li a:hover{
background-color:#ff5857;
color:#ffffff;
}

七、整體代碼：

至此，這個(gè)簡單的導(dǎo)航欄效果就完全實(shí)現(xiàn)了，CSS整體使用了約30行代碼。實(shí)現(xiàn)這個(gè)導(dǎo)航欄效果的HTML代碼如下圖所示。

HTML整體代碼

實(shí)現(xiàn)這個(gè)導(dǎo)航欄效果的CSS代碼如下圖所示。

CSS整體代碼

小海教材

如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開發(fā)的道路上闊步前行。

小海聲明

在頭條上發(fā)表的這些文章都是從前端開發(fā)的基礎(chǔ)開始一步一步講起的。我非常希望能有更多的前端開發(fā)初學(xué)者通過我寫的文章，逐步學(xué)到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學(xué)過程中的經(jīng)驗(yàn)，每寫一篇時(shí)我都盡量把握好措辭，用簡單易懂的語言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費(fèi)小海老師很久的時(shí)間。

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會(huì)學(xué)到對你有用的知識。

關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開發(fā)的路努力堅(jiān)持的走下去。

文章預(yù)告

下一次，小海老師開始為大家講解CSS的盒屬性。盒屬性是div布局的基礎(chǔ)，在實(shí)際的布局過程中有許多應(yīng)用技巧。下一篇文章我會(huì)為大家將盒屬性一個(gè)一個(gè)進(jìn)行詳細(xì)的分析。

在線咨詢

上一篇：HTML5企業(yè)級求職必備3D螺旋，旋轉(zhuǎn)，球形特效具體解析文章
下一篇：「測試開發(fā)全棧-HTML」(16)css字體的行間距l(xiāng)ine-height

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML+CSS：css元素浮動(dòng)詳解，使用浮動(dòng)制作導(dǎo)航欄菜單

（1）float使用語法

（2）float使用案例

行準(zhǔn)備工作

引入矢量文字

對導(dǎo)航欄和ui li字體圖標(biāo)進(jìn)行設(shè)置

繼續(xù)設(shè)置i元素和span元素

設(shè)置模糊效果

接下來設(shè)置背景圓

****動(dòng)畫設(shè)置，配合js形成點(diǎn)擊的時(shí)候，active會(huì)移動(dòng)到點(diǎn)擊的目標(biāo)身上

效果展示

總結(jié)

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會(huì)學(xué)到對你有用的知識。

小海教材

小海聲明

希望收藏了這篇文章的你同時(shí)也可以關(guān)注一下“小海前端”的頭條號，因?yàn)檫@些文章都是連載的，并且是經(jīng)過系統(tǒng)的歸納和總結(jié)的。塌下心來認(rèn)真閱讀，你一定會(huì)學(xué)到對你有用的知識。

文章預(yù)告

您的項(xiàng)目需求