其實(shí)就是你得寫(xiě)2套或更多樣式除了pc手機(jī)還有平板，相關(guān)知識(shí)自行百度，網(wǎng)上有很多現(xiàn)成教程和代碼用js或服務(wù)器端語(yǔ)言判斷UA屏幕尺寸等，當(dāng)為pc時(shí)，載入樣式表A，當(dāng)為手機(jī)時(shí)載入樣式表B 用css媒體查詢根據(jù)屏幕寬度調(diào)用不同樣式 比如導(dǎo)航欄 導(dǎo)航1 導(dǎo)航2 導(dǎo)航3 *這是pc上的樣式* nav w。

看下這個(gè)吧，把代碼復(fù)制到一個(gè)文本文檔，然后改成html就可以了 無(wú)標(biāo)題頁(yè)#navigatorDemoheight230pxwidth500pxbackgroundwhitemargin0 auto *導(dǎo)航欄CSS* *導(dǎo)航1* ulblue padding 5pxliststyle backgroundcolor #fffborderbottom 1px solid #e7e7e7float leftclear。

HTMLCSS制作導(dǎo)航欄 導(dǎo)航欄是一個(gè)網(wǎng)站中必不可少的元素，那么如何用HTML和CSS制作一個(gè)導(dǎo)航欄呢我來(lái)和大家分享一下工具材料崇高的文本 01首先打開(kāi)SublimeText軟件，新建一個(gè)html頁(yè)面，在html頁(yè)面中準(zhǔn)備好html結(jié)構(gòu)，如下圖所示02接下來(lái)，我們?cè)趆tml的body結(jié)構(gòu)中添加導(dǎo)航欄的內(nèi)容，如下圖所示03然后。

導(dǎo)航一 導(dǎo)航二 導(dǎo)航三 導(dǎo)航四 導(dǎo)航五 代碼這里發(fā)不全，好在這樣也是可以的幾個(gè)鏈接都要以，只要放得下如果還有背景圖，可以在樣式里加上，通過(guò)background就可以，很簡(jiǎn)單的。

css中導(dǎo)航條設(shè)置1二個(gè)簡(jiǎn)單的菜單導(dǎo)航條示例代碼 這篇文章主要介紹了二個(gè)簡(jiǎn)單的菜單導(dǎo)航條示例，需要的朋友可以參考下，使用代碼案例詳解導(dǎo)航條設(shè)置，簡(jiǎn)單明了的代碼可以做到舉一反三效果2CSS實(shí)現(xiàn)導(dǎo)航條Tab切換的三種方法 根據(jù)上圖所示，先規(guī)定幾個(gè)定義，上圖的模塊整體叫做導(dǎo)航，由導(dǎo)航標(biāo)題和導(dǎo)航。

網(wǎng)站上一般都是利用css來(lái)做的具體的做法1將導(dǎo)航欄里面的幾個(gè)條目都做成無(wú)序列表里面的項(xiàng) 2利用css將列表項(xiàng)的liststyle，float等等屬性設(shè)置，使列表項(xiàng)橫排排列3設(shè)置鏈接的屬性就可以了一般都是這樣做的，利用圖片或者flash的話，網(wǎng)頁(yè)會(huì)變大一點(diǎn)，對(duì)于網(wǎng)速慢的人來(lái)說(shuō)，不方便訪問(wèn)所以在。

樣式代碼為navlibackgroundcolorredpadding8px15pxfloatleftliststylecolor#fff 6引用樣式類在ul標(biāo)簽內(nèi)添加，就可以讓nav下的li標(biāo)簽引用到設(shè)置好的樣式類如圖7查看效果把html文件保存后，使用瀏覽器打開(kāi)即可看到橫向?qū)Ш讲藛涡Ч鐖Dhtml導(dǎo)航欄怎么能一直懸浮。