内射老阿姨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ā)
嘉禾县| 德州市| 青川县| 嘉峪关市| 云安县| 隆子县| 大邑县| 北安市| 英山县| 宿迁市| 威宁| 久治县| 安乡县| 威信县| 伊川县| 河池市| 杭锦后旗| 得荣县| 十堰市| 遂川县| 汶川县| 怀远县| 瓮安县| 阜南县| 大名县| 甘肃省| 修武县| 东丽区| 婺源县| 新邵县| 南木林县| 桐庐县| 梓潼县| 蓬溪县| 南木林县| 西充县| 南充市| 华池县| 安平县| 乐安县| 棋牌|