Question

以下是我的CSS。我不知道为什么当我在dekstop视图上打开我的网站时，我的#wrapDesktopNavBar没有显示。请帮我看一下谢谢：）

@media screen and (min-width: 800px) {  
/* Navigation bar (blank) settings */
#wrapDesktopNavBar  {       

    visibility: visible;                
    width: 100%;                                    /*Sets the width*/
    height: 70px;                                   /*Sets the height*/
    top: 0%;                                        /*Sets the distance from the top*/
    position: relative;                             /*Fixes the bar at the designated position*/
    background-color: #ffffff;                      /*Sets the background color to white*/
    font-family: Helvetica, Arial, sans-serif;      /*Sets the font of the headers*/
    z-index: 1;                                     /*Sets as 1 to be the top layer, bottom layers should use small index number, vice versa*/
}}

#wrapDesktopNavBar  {
    height: 100%;
    background-color: #315AA9;
    position: fixed;
    width:80%;
    top:0%;
    overflow-y:auto;
    overflow-x: hidden;
    visibility: hidden;
    z-index: 100;
}

Answer 1

您在CSS中使用@media查询，因此上面的代码有两个相同id的声明，因此您需要关闭媒体查询块，以便它排除一般样式块

@media screen and (min-width: 800px) {  
/* Navigation bar (blank) settings */
#wrapDesktopNavBar  {       
    visibility: visible;                
    width: 100%; 
    height: 70px;
    top: 0%;
    position: relative;
    background-color: #ffffff;
    font-family: Helvetica, Arial, sans-serif;
    z-index: 1;
    } 
} /* Close this here */

/* Other styles goes out of the box */

你的声明顺序很重要，即使满足第一个条件，一般的CSS属性块也会覆盖媒体查询块，为了防止这种情况，只需将媒体查询放在CSS文件的末尾。 / p>

此外，您正在使用visibility: hidden;，因此，即使您关闭了@media查询框，并且如果视口宽度超过800px;，则您的ID为wrapDesktopNavBar的元素也不会可见。

Demo（调整小提示窗口大小以查看效果，为演示目的修改媒体查询宽度和颜色）

为什么我的#wrapDesktopNavBar在桌面视图中消失了？

1 个答案: