返回
頂部
頂部
最終效果圖如下：
1.1600分辨率下的：
其余的尺寸圖我就不一一上傳了。
代碼如下：1、html：
logo和導航欄兩部分，logo用div容器logo包裹左浮動，導航欄用div容器nav包裹右浮動，在這里記得父元素要清除浮動。
2、CSS
在父容器div（header-wrap）給定一個寬度左右居中，logo容器可以給個固定寬度，或者不給寬度，或者百分比寬度基本上都不影響右邊導航欄的布局；
在這里從CCS上可以看出logo我給了個固定寬度，其他另外兩種你們可以自己氣嘗試，在這里我就不多說了；導航欄我給了個百分比寬度，在設計圖上導航欄的寬度占比是百分之多少在這里你就設置多少，導航欄下面標簽li我沒有設置浮動，設置了行內塊級元素，記得父元素（nav-wrap）要設置font-size為0，不然會出現錯位，不懂的可以百度了解下，因為我只有5個欄目，所以這里的寬度我設置了20%；靠右對齊。
這樣一個百分比布局的網頁頭部就出來了。
