其实就是你得写2套或更多样式除了pc手机还有平板，相关知识自行百度，网上有很多现成教程和代码用js或服务器端语言判断UA屏幕尺寸等，当为pc时，载入样式表A，当为手机时载入样式表B 用css媒体查询根据屏幕宽度调用不同样式 比如导航栏 导航1 导航2 导航3 *这是pc上的样式* nav w。

看下这个吧，把代码复制到一个文本文档，然后改成html就可以了 无标题页#navigatorDemoheight230pxwidth500pxbackgroundwhitemargin0 auto *导航栏CSS* *导航1* ulblue padding 5pxliststyle backgroundcolor #fffborderbottom 1px solid #e7e7e7float leftclear。

HTMLCSS制作导航栏 导航栏是一个网站中必不可少的元素，那么如何用HTML和CSS制作一个导航栏呢我来和大家分享一下工具材料崇高的文本 01首先打开SublimeText软件，新建一个html页面，在html页面中准备好html结构，如下图所示02接下来，我们在html的body结构中添加导航栏的内容，如下图所示03然后。

导航一 导航二 导航三 导航四 导航五 代码这里发不全，好在这样也是可以的几个链接都要以，只要放得下如果还有背景图，可以在样式里加上，通过background就可以，很简单的。

css中导航条设置1二个简单的菜单导航条示例代码 这篇文章主要介绍了二个简单的菜单导航条示例，需要的朋友可以参考下，使用代码案例详解导航条设置，简单明了的代码可以做到举一反三效果2CSS实现导航条Tab切换的三种方法 根据上图所示，先规定几个定义，上图的模块整体叫做导航，由导航标题和导航。

网站上一般都是利用css来做的具体的做法1将导航栏里面的几个条目都做成无序列表里面的项 2利用css将列表项的liststyle，float等等属性设置，使列表项横排排列3设置链接的属性就可以了一般都是这样做的，利用图片或者flash的话，网页会变大一点，对于网速慢的人来说，不方便访问所以在。

样式代码为navlibackgroundcolorredpadding8px15pxfloatleftliststylecolor#fff 6引用样式类在ul标签内添加，就可以让nav下的li标签引用到设置好的样式类如图7查看效果把html文件保存后，使用浏览器打开即可看到横向导航菜单效果如图html导航栏怎么能一直悬浮。