溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

HTML手風(fēng)琴導(dǎo)航欄如何制作

發(fā)布時(shí)間：2022-03-25 11:20:51 來(lái)源：億速云 閱讀：154 作者：iii 欄目：web開(kāi)發(fā)

這篇“HTML手風(fēng)琴導(dǎo)航欄如何制作”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“HTML手風(fēng)琴導(dǎo)航欄如何制作”文章吧。

手風(fēng)琴導(dǎo)航欄制作代碼

<!DOCTYPE html>

<html lang="en">

       <head>

              <meta charset="UTF-8">

              <title>手風(fēng)琴類導(dǎo)航欄</title>

              <style type="text/css">

                     #indexText{

                            /*border: 1px red solid;*/

                            width: 1300px;

                            height: 400px;

                            position: absolute;

                            line-height: 40px;

                            font-size: 16px;

                            left: 50%;

                            top:50%;

                            margin-top: -200px;

                            transition: .5s linear;

                            -webkit-transition: .5s linear;

                            -moz-transition: .5s linear;

                            -ms-transition: .5s linear;

                            z-index: 100;

                            overflow: hidden;

                     }

                     #indexTextHeader{

                            width: 100%;

                            height: 10%;

                            font-size: 20px;

                            font-weight: 900;

                            text-align: center;

                     }

                     #indexTextWarp{

                            width: 80%;

                            height: 80%;

                            margin: 10px auto;

                            border: 3px #6f3a13 solid;

                            overflow: hidden;

                     }

                     .TextWarpHover{

                            height: 100%;

                            float: left;

                            width: 6.5%;

                            background-image: -webkit-linear-gradient(top,#e68239 0%,transparent  2%,transparent 98%,#e68239 100%);

                            background-size: 100% 100%;

                      transition:all 1s ease-in-out;

                      -moz-transition:all 1s ease-in-out;

                      -webkit-transition:all 1s ease-in-out;

                      -ms-transition:all 1s ease-in-out;

                      /*-o-transition:all 1s ease-in-out;*/

                     }

                     #indexTextWarp .TextWarpHover:hover{

                            width: 87%;

                     }

                     .indexTextWarp1_h{

                            width: 61px;

                            height: 100%;

                            background: #f07a24;

                            color: white;

                            border-right:2px #e87826 solid;

                            font-size: 50px;

                            line-height: 70px;

                            text-align: center;

                            float: left;

                            box-shadow: 2px 0px 10px gray,

                                                 2px 0px 20px black;

                     }

                     .indexTextWarp4{

                            line-height: 150px;

                            width: 80%;

                            height: 100%;

                            text-align: center;

                            float: right;

                            font-size: 50px;

                     }

              </style>

       </head>

       <body>

              <div id="indexText" style="margin-left: -650px;">

              <!-- 割一下 -->

              <div id="indexTextHeader">個(gè)人簡(jiǎn)介</div>

              <div id="indexTextWarp">

                     <div class="indexTextWarp1 TextWarpHover">

                            <div class="indexTextWarp1_h">基本介紹</div>

                            <div class="indexTextWarp1_t" style="padding-left: 30%;">

                                   姓名:XXX<br/>

                                   性別:X<br/>

                                   出生:XXXX-XX-XX<br/>

                                   血型:X;<br />

                            </div>

                     </div>

                     <!-- 割一下 -->

                     <div class="indexTextWarp2 TextWarpHover">

                            <div class="indexTextWarp1_h">學(xué)習(xí)經(jīng)歷</div>

                            <div class="indexTextWarp1_t" style="padding-left: 30%;">

                                   XXXXXXXXXXXXXXX<br/>

                                   XXXXXXXXXXXXXXX<br/>

                                   XXXXXXXXXXXXXXX<br/>

                                   XXXXXXXXXXXXXXX<br />

                            </div>

                     </div>

                     <!-- 割一下 -->

                     <div class="indexTextWarp3 TextWarpHover">

                            <div class="indexTextWarp1_h">工作經(jīng)歷</div>

                            <div class="indexTextWarp1_t" style="padding-left: 10%;width: 80%;">

                                   XXXXXXX/XXXXX/XXXXXX<br/>

                                   XXXXXX<br/>

                                   XXXXXXXXXXXXXXXXXXXXXXXXXXXX<br/>

                            </div>

                     </div>

                     <!-- 割一下 -->

                     <div class="indexTextWarp4">

                            我是毒雞湯<br/>

                            真的是毒雞湯<br />

                     </div>

              </div>

       </body>

</html>

以上就是關(guān)于“HTML手風(fēng)琴導(dǎo)航欄如何制作”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手