国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > 解決iframe中的二級(jí)菜單被遮蓋的問(wèn)題

解決iframe中的二級(jí)菜單被遮蓋的問(wèn)題

來(lái)源:千鋒教育
發(fā)布人:wjy
時(shí)間: 2022-06-02 11:13:00 1654139580

### **問(wèn)題背景及描述**

在我們開發(fā)的時(shí)候,經(jīng)常會(huì)遇得到一些網(wǎng)站,頭部和尾部一毛一樣,這樣頭部尾部相同的網(wǎng)站,怎么都不可能把頭部和尾部重新書寫一遍吧,不僅浪費(fèi)時(shí)間還顯示的是自己的網(wǎng)站代碼重復(fù)率比較多,顯示自己沒有水平。

解決iframe中的二級(jí)菜單被遮蓋的問(wèn)題

所以需要我們經(jīng)常會(huì)把這樣重復(fù)的頭部和尾部都單獨(dú)提出來(lái),制作成一個(gè)獨(dú)立的網(wǎng)頁(yè),然后通過(guò)**iframe框架**進(jìn)行引入。如果公共頭部中有對(duì)應(yīng)的一級(jí)導(dǎo)航和二級(jí)菜單導(dǎo)航的胡被遮住這可怎么解決呢?

各種網(wǎng)站和各種公眾號(hào)上面方法使用了js,但是js比較麻煩,并且代碼粘貼下來(lái)使用的時(shí)候會(huì)出現(xiàn)問(wèn)題,跑不起來(lái),接下來(lái)由我提供給你們一個(gè)簡(jiǎn)單快速高效的解決問(wèn)題辦法。那叫一個(gè)so easy;并且關(guān)鍵代碼也給出了注釋喲,值得你來(lái)查看。

### **問(wèn)題代碼**

### (一)公共頭部----帶有二級(jí)菜單

### HTML源碼

```html
<!-- 這里是頭部logo區(qū)域 -->
    <div class="box">這里是logo</div>
    <!-- 通欄和導(dǎo)航 -->
    <div class="layout">
        <ul>
            <li>你好
                <ul>
                    <li>你好1</li>
                    <li>你好2</li>
                    <li>你好3</li>
                </ul>
            </li>
            <li>我好
                <ul>
                    <li>我好1</li>
                    <li>我好2</li>
                    <li>我好3</li>
                    <li>我好4</li>
                </ul>
            </li>
            <li>大家好
                <ul>
                    <li>大家好1</li>
                    <li>大家好2</li>
                </ul>
            </li>
            <li>勇哥
                <ul>
                    <li>勇哥1</li>
                    <li>勇哥2</li>
                    <li>勇哥3</li>
                </ul>
            </li>
            <li>真的
                <ul>
                    <li>真的1</li>
                    <li>真的2</li>
                    <li>真的3</li>
                    <li>真的4</li>
                    <li>真的5</li>
                </ul>
            </li>
            <li>很帥
                <ul>
                    <li>真的1</li>
                    <li>真的2</li>
                    <li>真的3</li>
                    <li>真的4</li>
                    <li>真的5</li>
                </ul>
            </li>
            <li>好帥啊
                <ul>
                    <li>真的1</li>
                    <li>真的2</li>
                    <li>真的3</li>
                    <li>真的4</li>
                    <li>真的5</li>
                </ul>
            </li>
            <li>太帥了
                <ul>
                    <li>真的1</li>
                    <li>真的2</li>
                    <li>真的3</li>
                    <li>真的4</li>
                    <li>真的5</li>
                </ul>
            </li>
            <li>真的哦
                <ul>
                    <li>真的1</li>
                    <li>真的2</li>
                    <li>真的3</li>
                    <li>真的4</li>
                    <li>真的5</li>
                </ul>
            </li>
            <li>結(jié)束了
                <ul>
                    <li>真的1</li>
                    <li>真的2</li>
                    <li>真的3</li>
                    <li>真的4</li>
                    <li>真的5</li>
                </ul>
            </li>
        </ul>
    </div>
```

### CSS源碼

```css
<style>
        *{margin:0;padding:0}
        ul{list-style:none}
        a{text-decoration: none;}
        img{vertical-align: middle;}
        .box{
            width:1000px;
            height:100px;
            background-color: pink;
            margin:0 auto;
            font-size:50px;
            font-weight: bold;
            text-align: center;
            line-height: 100px;
        }
        .layout{
            height:60px;
            background-color:cornflowerblue;
        }
        .layout>ul{
            width: 1000px;
            margin: 0 auto;
            height:60px;
        }
        .layout>ul>li{
            font-size:14px;
            float: left;
            width:100px;
            text-align: center;
            line-height: 60px;
            border-right:1px dashed white;
            box-sizing: border-box;
            color:white
        }
        .layout>ul>li:last-child{
            border-right:0px
        }
        .layout>ul>li>ul{
            background-color: pink;
            color:white;display: none;
        }
        .layout>ul>li:hover>ul{
            display: block;
            position: relative;
        }
        /* 取消滾動(dòng)條 */
        ::-webkit-scrollbar{
            display: none;
        }
    </style>
```

效果:

![img](https://pic1.zhimg.com/80/v2-ecce6a973acd557a9c6fbedda3db2308_720w.jpg)

### (二)公共主體----需要引入頭部

HTML源碼

```html
<!-- 引入頭部 -->
    <iframe id="one" src="01-header.html" frameborder="0" width="100%" height="160px"frameborder="0"></iframe>
    <!-- 獨(dú)立主體 -->
    <div class="tip" wmode="transparent">
        我是獨(dú)立的頁(yè)面主體部分
    </div>
    <!-- 引入尾部 -->
    <iframe src="03-footer.html" frameborder="0"  frameborder="0" width="100%" height="100px"frameborder="0"></iframe>
```

CSS源碼

```css
*{margin:0;padding:0}
 .tip{
     height:500px;
     background-color: yellowgreen;
     text-align: center;
     line-height: 500px;
     font-size:80px;
     font-weight:bold;
 }
 /*取消3像素間距*/
 iframe{vertical-align: middle;}
 /*取消滾動(dòng)條*/
 ::-webkit-scrollbar{
     display: none;
 }
```

效果:

![img](https://pic3.zhimg.com/80/v2-3f494717af9efa70e7317442f999f05e_720w.jpg)

### 問(wèn)題所在

描述:引入公共的頭部之后,二級(jí)菜單,被主體區(qū)域內(nèi)容給遮蓋住了,使用js實(shí)現(xiàn)起來(lái)也是非常的困難的;

解決問(wèn)題:描述如下

將在主體引入的頭部頁(yè)面中,引入的順序改變一下,放在主體的后面;放在主體后面的話加載順序就會(huì)出現(xiàn)問(wèn)題,主體就會(huì)顯示在主體后面。那如何調(diào)整順序問(wèn)題呢?使用固定定位,定位在引入頁(yè)面的最上面,但是定位后也會(huì)把布局遮蓋住,如何解決遮蓋主體的問(wèn)題呢,就是需要給主體添加margin-top;來(lái)解決問(wèn)題,這樣二級(jí)菜單就能顯示出來(lái)了

修改后的主體代碼:HTML

```html
<!-- 獨(dú)立主體 -->
<div class="tip" wmode="transparent">
   我是獨(dú)立的頁(yè)面主體部分
</div>
<!-- 引入頭部 -->
<iframe id="one" src="01-header.html" frameborder="0" width="100%" height="160px"frameborder="0"></iframe>
<!-- 引入尾部 -->
<iframe src="03-footer.html" frameborder="0"  frameborder="0" width="100%" height="100px"frameborder="0"></iframe>
```

效果:加載順序

![img](https://pic2.zhimg.com/80/v2-96ace2d13f0a476fb0f0ef9f3295b161_720w.jpg)

修改代碼:CSS

```css
<style>
        *{margin:0;padding:0}
        .tip{
            height:500px;
            background-color: yellowgreen;
            text-align: center;
            line-height: 500px;
            font-size:80px;
            font-weight:bold;
            /*修改的代碼*/
            margin-top:160px
        }
        iframe{vertical-align: middle;}
       ::-webkit-scrollbar{
           display: none;
       }
       /*修改的代碼*/
       #one{
            position:fixed;
            top:0px;
            width:100%;
            height:500px;
       }
    </style>
```

效果:

![img](https://pic2.zhimg.com/80/v2-4061834b7bd709784c2579584df0a2a1_720w.jpg)

以上就是:通過(guò)HTML和CSS來(lái)解決,iframe二級(jí)菜單被遮住的效果:關(guān)鍵代碼就是調(diào)整順序,和添加定位。

更多關(guān)于“web前端培訓(xùn)”的問(wèn)題,歡迎咨詢千鋒教育在線名師。千鋒已有十余年的培訓(xùn)經(jīng)驗(yàn),課程大綱更科學(xué)更專業(yè),有針對(duì)零基礎(chǔ)的就業(yè)班,有針對(duì)想提升技術(shù)的提升班,高品質(zhì)課程助理你實(shí)現(xiàn)夢(mèng)想。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
抖音小店運(yùn)營(yíng)做什么的

在當(dāng)前的電商市場(chǎng)中,抖音小店已經(jīng)逐漸成為一種新的電商模式,它集成了社交化、音視頻分享、直播銷售等多種功能,使得消費(fèi)者更加便捷地進(jìn)行商品...詳情>>

2023-10-08 16:36:41
抖音小店照片要求尺寸多大

在抖音平臺(tái)開設(shè)小店已經(jīng)成為了越來(lái)越多人的選擇,相信大家已經(jīng)在各大社交平臺(tái)上看到有不少小店的推廣。在抖音上,照片是展示產(chǎn)品的重要手段,因...詳情>>

2023-10-08 16:14:25
抖音招商團(tuán)長(zhǎng)托管服務(wù)費(fèi)怎么退回來(lái)

抖音招商團(tuán)長(zhǎng)托管服務(wù)是抖音為有意愿創(chuàng)作內(nèi)容并帶動(dòng)其他創(chuàng)作者成為團(tuán)隊(duì)成員的用戶提供的一種服務(wù)。通過(guò)該服務(wù),招商團(tuán)長(zhǎng)可以自主組建團(tuán)隊(duì)并得到...詳情>>

2023-10-08 16:08:53
抖音小店怎么做代銷

抖音已經(jīng)成為了一個(gè)非常受歡迎的短視頻應(yīng)用程序,在其中許多用戶都精心打造了自己的小店,用于銷售各種各樣的商品,獲取額外的收入。然而,要想...詳情>>

2023-10-08 15:28:41
怎樣開抖音小店帶貨賺錢

隨著直播帶貨的火熱,越來(lái)越多的人開始嘗試通過(guò)抖音小店來(lái)開展帶貨業(yè)務(wù)。抖音小店是抖音直播帶貨的配套,可以讓用戶在購(gòu)買直播中產(chǎn)品時(shí)就實(shí)現(xiàn)購(gòu)...詳情>>

2023-10-08 15:06:36
快速通道