網頁上的橫幅廣告

我該如何製作橫幅廣告，以便頁面頂部和底部的橫幅（http://i.imgur.com/SxjbCJV.jpg）位於頁面的兩側？網頁上的橫幅廣告

目前，我有他們兩個固定在頁面的頂部和底部：

#header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 66px; 
    z-index: 999; 
} 

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 66px; 
    z-index: 999; 
}

和HTML：

<body> 

<div id="wrapper"> 

    <a href="project.html"> 
     <div id="header"> 
      <button id="next-button" href="project.html"><i class="fa fa-arrow-circle-right fa-4x"></i> 
      </button> 
     </div> 
    </a> 

    <div id="main"> 

     <div id="splash"> 
      <div id="name"> 
       <h1 class="wow animated flipInX">Max Wilson</h1> 
      </div> 

      <div id="profile"> 
       <img src="img/Logo.png" class="wow animated rollIn" data-wow-delay="1s"> 
      </div> 

      <div id="subtext"> 
       <h2 class="wow animated fadeInUp" data-wow-delay="2s">Aspiring Developer </h2> 
      </div> 
     </div> 

    </div> 
</div> 

<a href="project.html"> 
    <div id="footer"> 
     <button id="prev-button" href="project.html"><i class="fa fa-arrow-circle-left fa-4x"></i> 
     </button> 
    </div> 
</a>

提前感謝！最大

來源

2015-04-22 Max Wilson

您是否嘗試將頁眉和頁腳浮動到左側？

例如：

#header { 
    position: relative; 
    float: left; 
    width: 50px; 
    height: 500px; 
    background-color: #44f; 
} 

#footer { 
    position: relative; 
    float: left; 
    width: 50px; 
    height: 500px; 
    background-color: #44f; 
} 

#wrapper{ text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
} 

#main{ width: 800px; 
    float:left; 
}

enter image description here

來源

2015-04-22 19:49:52

這工作，謝謝！你是否也有辦法將箭頭置於兩側？ –

你應該可以應用'text-align;中心「到#header和#footer ... –

似乎並不想要居中，主要內容或文本在旁邊：http://i.imgur.com/NFPU6Nr.jpg –

下面是一個簡單而有趣的方法：給bodydisplay: flex和內容flex-grow: 1所以它佔據所有可用空間和引腳的其他元素兩側。

<div class="side"> 
    <h3>asdf</h3> 
    <h3>asdf</h3> 
    <h3>asdf</h3> 
    <h3>asdf</h3> 
</div> 

<div id="content"> 
    <p>asdfasdf</p> 
</div> 

<div class="side"> 
    <h3>asdf</h3> 
    <h3>asdf</h3> 
    <h3>asdf</h3> 
    <h3>asdf</h3> 
</div>

body { 
    display: flex; 
} 

.side, #content { 
    padding: 10px; 
} 

.side { 
    background: blue; 
} 

#content { 
    flex-grow: 1; 
    background: grey; 
}

https://jsfiddle.net/JackHasaKeyboard/rz86xwxh/2/

來源

2016-06-16 07:14:11 JackHasaKeyboard

網頁上的橫幅廣告

回答

相關問題