Html 切换导航条的问题

好的，现在我有两个导航条，一个用于桌面/大型平板电脑，一个用于移动视图。当我达到一定尺寸时，我不知道如何使它切换。这是我的尝试，但不起作用

body，html{
保证金：0；
字体系列：无衬线，arial；
}
.内容{
填充：30px；
}
.导航主手机{
显示：无；
}
.导航干线{
宽度：100%；
背景色：#222；
高度：70像素；
颜色：#fff；
}
.nav主标志{
浮动：左；
高度：40px；
填充：15px 30px；
字号：1.4em；
线高：40px；
}
.nav main>ul{
保证金：0；
填充：0；
浮动：左；
列表样式类型：无；
}
.nav main>ul>li{
浮动：左；
}
.导航项目{
显示：内联块；
填充：15px 20px；
高度：40px；
线高：40px；
颜色：白色；
文字装饰：无；
}
.导航项目：悬停{
背景色：#444；
}
.导航内容{
位置：绝对位置；
顶部：70像素；
溢出：隐藏；
背景色：#222；
最大高度：0；
}
.导航内容a{
颜色：#fff；
文字装饰：无；
}
.nav内容a：悬停{
文字装饰：下划线；
}
.导航潜艇{
填充：20px；
}
.导航分机{
填充：0px；
边际0px；
列表样式：无；
}
.nav sub ul li a{
显示：内联块；
填充：5px0px；
}
.导航项目：焦点{
背景色：#444；
}
.nav项目：焦点~.nav内容{
最大高度：400px；
-webkit过渡：最大高度0.4s缓进；
-moz过渡：最大高度0.4s缓进；
过渡：最大高度0.4s缓进；
}
@媒体屏幕和屏幕（最大宽度：580像素）{
.导航干线{
显示：无；
}
.导航主手机{
显示：全部；
}
}

学习HTML和CSS



































Lorem ipsum dolor sit amet，是一位杰出的献身者。整数nec odio。自由女神。这是一个直径较大的曲线。塞德·尼西。nibh elementum的Nullaquis sem。同侧矢状肌。普拉森特·莫里斯。他告诉我们，这是奥古斯特·森佩尔·波尔塔。毛里斯·马萨。前庭短弧。
根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。libero的Curabitur sodales ligula。拉齐尼亚·努克阁下。库拉比图侵权人。佩伦茨克笔尖。埃尼安·夸姆。在多洛的权杖扫描电镜中。梅塞纳斯·马蒂斯。Sed convallis tristique sem。在门的舌苔上。摩比·莱索斯、艾库利斯·维尔、苏西皮特·奎斯、卢克图斯·农、马萨。长舌苔。
同侧毛里斯。我的朋友们，我的朋友们，我的朋友们，我的朋友们，我的朋友们。奎斯克·沃里帕特调味品维利特。根据康努比亚·诺斯特拉（conubia nostra）和希梅纳奥斯（inceptos himenaeos）的规定，社会责任和责任等级为：。Nam nec ante。拉齐尼亚，马蒂斯，托托·内克·阿迪皮斯，一个前脚印。无便利。弗林利亚大学。潜力悬钩子。我的食物太多了。前庭智人。
普罗因奎姆。艾蒂亚姆乌尔特里斯酒店。Suspendisse位于justo eu magna luctus suscipit。塞德·莱克托斯。整数euismod lacus luctus magna。奎斯克·库苏斯（Quisque cursus）、法雷特拉拍卖行（metus vitae pharetra auctor）、马萨·马蒂斯拍卖行（sem massa mattis sem）在奥古斯特钻石国际拍卖行（interdum magna augue eget diam）。虎口浮雕和肘部浮雕同侧前庭；莫比·拉齐尼亚·莫莱斯蒂酒后驾车。普拉森特·布兰迪特·多洛。我不知道。在我的世界里，有一种元素。同侧的Morbi坐在amet pede facilisis laoreet。Donec lacus nunc，viverra nec，blandit vel，egestas et，augue。马蹄莲前庭。Ut ultrices ultrices enim。

它是

显示：block

，而不是

显示：all

您必须使用它来告诉浏览器您希望它对每个特定实例应用什么CSS规则

这里是一个非常简单的摆弄，用于最大宽度为500px的设备的媒体查询，其中我将导航背景颜色从原来的黑色覆盖为红色

/* original class */
nav{
  height:50px;
  width:100%;
  background:#000;
}

/* when the window size is max 500px apply this rules */
@media (max-width:500px){
  nav{
    background:red;
  }
}

---

希望这会有所帮助。

正确，但对于您的参考，像这样的“打字错误”问题应该关闭，而不是回答。我知道你还没有你的投票锤，但请记住，当你这么做的时候^^^^^嗯-我的理解是，当有人在键盘上按错键时，比如写“nlock”而不是“block”

display:all

是错的<代码>显示：块是您需要的。差一点被认为是打字错误。