内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

響應式網(wǎng)站制作頭部布局

2023-03-08    分類: 響應式網(wǎng)站

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


1.1600分辨率下的:

2.1440分辨率下的:
其余的尺寸圖我就不一一上傳了。
代碼如下:

代碼1

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

CSS代碼
2、CSS
在父容器div(header-wrap)給定一個寬度左右居中,logo容器可以給個固定寬度,或者不給寬度,或者百分比寬度基本上都不影響右邊導航欄的布局;
在這里從CCS上可以看出logo我給了個固定寬度,其他另外兩種你們可以自己氣嘗試,在這里我就不多說了;導航欄我給了個百分比寬度,在設計圖上導航欄的寬度占比是百分之多少在這里你就設置多少,導航欄下面標簽li我沒有設置浮動,設置了行內(nèi)塊級元素,記得父元素(nav-wrap)要設置font-size為0,不然會出現(xiàn)錯位,不懂的可以百度了解下,因為我只有5個欄目,所以這里的寬度我設置了20%;靠右對齊。
這樣一個百分比布局的網(wǎng)頁頭部就出來了。

網(wǎng)站題目:響應式網(wǎng)站制作頭部布局
瀏覽地址:http://www.rwnh.cn/news/242503.html

網(wǎng)站建設、網(wǎng)絡推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡營銷seo公司;服務項目有響應式網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

小程序開發(fā)
鄄城县| 彭泽县| 金塔县| 日土县| 将乐县| 定西市| 桐梓县| 盱眙县| 榆中县| 平阴县| 廉江市| 封丘县| 嘉鱼县| 奉节县| 瑞金市| 中江县| 鹤壁市| 罗江县| 友谊县| 武强县| 庆云县| 博乐市| 威海市| 泰来县| 奈曼旗| 九龙县| 台中县| 神木县| 英超| 巧家县| 灵璧县| 大宁县| 黎平县| 葫芦岛市| 大城县| 荥经县| 万载县| 新兴县| 阜南县| 滁州市| 子长县|