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

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

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

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

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

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

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