Question

我正在使用wordpress网站，并希望使用自定义CSS，在我的菜单后添加背景图片？并想知道如何在菜单中添加分隔符，以便在菜单上的每个链接项后自动生成分隔符？

我做的是

.menu{
  background-image: url("abolutepath/header-navigation-bar-bg.png"); 
 }

它的工作原理，菜单和背景显示，但问题是。当菜单中途结束时，菜单背景的弯曲端不会显示在右侧，我想在菜单b下显示整个背景图像。在移动设备上重复菜单并显示所有错误，所以有没有办法可以在一个css代码块中从菜单/网站的响应版本中排除这个背景图像和分隔符？

请帮忙，谢谢

Answer 1

REgarding，如何在菜单中添加分隔符您可以在li

中添加锚标记

border-right: 1px solid #ccc;

并从上一个菜单中移除边框，如下所示： -

li:last-child a {border-right: none;}

要添加图片，请尝试以下操作： -

#nav li + li {
    background:url('seperator.gif') no-repeat top left;
    padding-left: 10px
}

Answer 2

您可以使用媒体查询根据设备屏幕大小自定义css

@media screen and (max-device-width: 480px) {
    .menu{
        // CSS for mobile device or small screen size
        background-image: url("abolutepath/header-navigation-bar-bg.png"); 
    }
}

@media screen and (min-device-width: 480px) and (max-device-width: 960px) {
    .menu{
        // CSS for other device
    }
}

排除响应版本上的菜单背景图像

2 个答案: