晚上好, 我正在網站上使用「單頁佈局」。而且我對移動響應性有很大的問題。特別是在菜單和背景圖片部分。我會發布我的代碼,請給我一些建議,編輯什麼? 非常感謝!如何設置背景圖像響應
HTML:
<div id="menu">
<div id="content">
<div id="logo">
<a href="#uvod"><img src="style/img/logo.png" border="0"></a>
</div>
<div id="nabidka">
<ul>
<li href="about"><a href='#about'>O nás</a></li>
<li href="cenik"><a href='#cenik'>Ceník</a></li>
<li href="sluzby"><a href='#sluzby'>Služby</a></li>
<li href="kontakt"><a href='#kontakt'>Kontakt</a></li>
</ul>
</div>
<div id="socsite">
<table style="width: 210px; height: 80px;" border="0">
<tr><td width="70"><a class="fb" href=""></a> </td>
<td width="70"><a class="twitter" href=""></a> </td>
<td width="70"><a class="youtube" href=""></a> </td></tr>
</table>
</div>
</div>
</div>
<div id="uvod" class="section">
<div id="content">
...text text text...
</div>
</div>
和CSS:
#uvod {
background:url('img/bg-uvod.png') top no-repeat fixed;
float:left;
width: 100%;
min-height: 100%;
z-index: 1;
}
#menu {
background-color: #535353;
width: 100%;
height: 90px;
padding: 0;
margin: 0 auto;
position: fixed;
top: 0;
z-index: 100;
}
#logo {
width: 200px;
height: 90px;
margin-left: 1em;
padding-top: 5px;
float: left;
}
#nabidka {
width:550px;
height: 90px;
margin-left: 1.5em;
padding-top: 5px;
float:left;
}
#socsite {
width:240px;
height: 90px;
padding-top: 5px;
margin-left: 7em;
float: left;
}
#content {
width: 1200px;
margin: 0 auto;
}
謝謝,它確實有幫助,但僅限於身高。當我在手機上打開它時,我使用背景圖片的部分沒有100%的寬度。菜單有1200px,也有白色背景的部分,但圖像背景有75%的寬度...第二個問題,當我縮小菜單pannel,按鈕下來,在灰色的面板菜單和社交網絡的圖標...什麼我應該這樣做嗎?我把它固定,我給它固定寬度(1200px)... –
我建議在你的內容的背景中放置一個位置:絕對div並使其成爲你需要的大小。然後將上述背景應用到這個新的背景div。 – Kelsey