響應式網站制作頭部布局(南京響應式網站制作)

2024-04-30 分類：網站建設

在簡單的響應式網站中頭部部分大多數為兩部分logo和導航欄，一般情況下是左右分布，在要適配不同的屏幕尺下，logo還好，可以固定寬度，導航欄因為欄目數的不同間距的大小，就需要css媒體查詢進行處理；而今天我們不使用css媒體查詢的情況下進行適配不同的屏幕尺寸，使用到的是css寬度的百分比布局。

最終效果圖如下：

1.1600分辨率下的：

2.1440分辨率下的：
其余的尺寸圖我就不一一上傳了。

代碼如下：1、html：

logo和導航欄兩部分，logo用div容器logo包裹左浮動，導航欄用div容器nav包裹右浮動，在這里記得父元素要清除浮動。

2、CSS

在父容器div（header-wrap）給定一個寬度左右居中，logo容器可以給個固定寬度，或者不給寬度，或者百分比寬度基本上都不影響右邊導航欄的布局；

在這里從CCS上可以看出logo我給了個固定寬度，其他另外兩種你們可以自己氣嘗試，在這里我就不多說了；導航欄我給了個百分比寬度，在設計圖上導航欄的寬度占比是百分之多少在這里你就設置多少，導航欄下面標簽li我沒有設置浮動，設置了行內塊級元素，記得父元素（nav-wrap）要設置font-size為0，不然會出現錯位，不懂的可以百度了解下，因為我只有5個欄目，所以這里的寬度我設置了20%；靠右對齊。
這樣一個百分比布局的網頁頭部就出來了。

以上就是關于響應式網站制作頭部布局(南京響應式網站制作)，希望對你有幫助，更多內容關注創新互聯。

分享題目：響應式網站制作頭部布局(南京響應式網站制作)
當前網址：http://www.js-pz168.com/news17/327067.html

成都網站建設公司_創新互聯，為您提供品牌網站設計、企業網站制作、商城網站、服務器托管、靜態網站、云服務器

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

網站建設制作五個步驟內容部分很重要 2024-04-30
成都短視頻運營商教你如何制作抖音短視頻 2024-04-30
網站制作公司的核心技術是什么？(網站制作公司怎么找) 2024-04-30
我是如何做到讓網站被百度秒收錄的 2024-04-30
企業建站不得不關注到的三大元素 2024-04-30
網站策劃如何快速簡單畫原型圖(如何有效的進行網站策劃) 2024-04-30
虛擬服務器和存儲服務器的區別，使用虛擬服務器進行存儲的好處 2024-04-30

久久99久久人婷婷精品综合_超碰aⅴ人人做人人爽欧美_亚洲电影第三页_日韩欧美一中文字暮专区_波多野结衣的一区二区三区_婷婷在线播放_人人视频精品_国产精品日韩精品欧美精品_亚洲免费黄色_欧美性猛交xxxxxxxx

響應式網站制作頭部布局(南京響應式網站制作)