帶頁眉部分主頁和頁腳標籤的頁面佈局

-1

我在報頭中添加一個水平菜單和我將它設置有滑塊我的部分上面菜單。但問題是我想設置垂直菜單時，頁面寬度小於1136像素，菜單涵蓋了我的滑塊的部分，我不希望這一點。我想要的是該部分下面的菜單，以便用戶可以看到菜單和滑塊。我把我的網站網址理解的很好。

/*Header Tag*/ 
 
.cd-header { 
 
    position: absolute; 
 
    z-index: 5; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: rgba(0,1,1,0.4); 
 
} 
 
    /*section Tag*/ 
 
.cd-hero{ 
 
    position: relative; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 
    /*main Tag*/ 
 
.cd-main-content { 
 
    width: 90%; 
 
    max-width: 768px; 
 
    margin: 0 auto; 
 
    padding: 2em 0; 
 
}

來源

2017-08-08 Abbas Ekh

請閱讀我的網站上不起作用[東西。我可以只粘貼一個鏈接嗎？]（http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link -to-IT）。當外部資源消失或者固定時，依賴於外部資源被理解的問題變得毫無用處。創建一個[MCVE]並將其置於**問題本身**中。 – Quentin

你所做的只是儘量減少你的瀏覽器，並告訴我爲什麼我的滑塊落在我的菜單後面。我認爲答案很簡單，我很困惑找到它。所以相反評論我這樣，請回答我，如果你能找到問題。非常感謝。 –

我把你介紹給我以前的評論。 – Quentin

更快的方式通過僅僅使用顯示：無

添加另一個菜單下方的部分其中滑塊，並只顯示它時，它達到的寬度1136px 。

另一種方法是使用柔性

藉助Flex，您可以設置項目的順序;這裏有一個flexbox的指南。參考以及here

示例使用Flex：

<header> 
    <div class="wrapper"> 
     <nav>...links...</nav> 
     <div class="slider"></div> 
    </div> 
</header> 
<section></section> 

/** CSS **/ 
header .wrapper { 
    display:flex; 
    flex-direction:column; 
} 

@media only screen and (max-width:1136px){ 
    nav { 
     order:2; 
    } 
    .slider { 
     order:1; 
    } 
}

來源

2017-08-08 10:22:14 Softmaven

帶頁眉部分主頁和頁腳標籤的頁面佈局

回答

相關問題