mui框架中的九宫格的背景颜色怎么在自己的css中改变?改了没有效果呀?

mui框架中的九宫格的背景颜色怎么在自己的css中改变?改了没有效果呀?还有就是新人礼券的部分有一个100元怎么才能显示出来

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <link href="../css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="../初始化css.css"/>
        <link rel="stylesheet" type="text/css" href="1首页.css"/>

        <script type="text/javascript" src="../jquery-ui-1.12.1.custom/jquery-3.1.1.min.js" ></script>
        <script src="1首页.js" type="text/javascript"></script>
    </head>

    <body>
        <!--头部标题栏-->
        <header class="mui-bar mui-bar-nav bg">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">订蛋糕</h1>
            <a class="mui-icon mui-icon-more shezhi"></a>

        </header>
        <!--内容-->
        <div class="mui-content bg">
            <!--轮播图-->
            <div id="slider" class="mui-slider" >
                <div class="mui-slider-group mui-slider-loop">
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../img/banner4.png">
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../img/banner1.png">
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../img/banner3.png">
                        </a>
                    </div>
                    <div class="mui-slider-item">
                        <a href="#">
                            <img src="../img/banner4.png">
                        </a>
                    </div>
                    <div class="mui-slider-item mui-slider-item-duplicate">
                        <a href="#">
                            <img src="../img/banner1.png">
                        </a>
                    </div>
                </div>
            </div>

            <!--搜索-->
                <div class="mui-row">
                    <div class="mui-col-sm-3 sousuo-size3">
                            <button class="mui-btn btn">
                            <span class="mui-icon mui-icon-location"></span>
                                北京
                            </button>
                    </div>
                    <div class="mui-col-sm-9 sousuo-size9">
                        <div class="mui-content-padded">
                            <div class="mui-input-row mui-search sousuo">
                                <input type="search" class="mui-input-clear mui-icon mui-icon-search" placeholder="输入搜索">
                            </div>
                        </div>
                    </div>
                </div>  
            <!--导航-->
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon"><img class="img" src="../img/限时抢购.png"/></span>
                        <div class="mui-media-body ">限时抢购</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon"><img class="img" src="../img/当天可达.png"/></span>
                        <div class="mui-media-body">当天可达</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon"><span class="mui-badge">100元</span><img class="img" src="../img/新人礼券.png"/></span>
                        <div class="mui-media-body">新人礼券</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon"><img class="img" src="../img/全部商品.png"/></span>
                        <div class="mui-media-body">全部商品</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon"><img class="img" src="../img/水果蛋糕.png"/></span>
                        <div class="mui-media-body">水果蛋糕</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon"><img class="img" src="../img/奶油蛋糕.png"/></span>
                        <div class="mui-media-body">奶油蛋糕</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon"><img class="img" src="../img/创意蛋糕.png"/></span>
                        <div class="mui-media-body">创意蛋糕</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                    <a href="#">
                        <span class="mui-icon"><img class="img" src="../img/新品推荐.png"/></span>
                        <div class="mui-media-body">新品推荐</div>
                    </a>
                </li>
            </ul>
            <!--分隔行-->
            <div class="hang"></div>
            <!--品牌街-->
            <div class="brands">
                <span class="text">品牌街</span>
                <span class="mui-icon mui-icon-arrowright tu"></span>
            </div>
            <!--横向滚动-->
            <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                <div class="mui-scroll">
                    <a class="mui-active">
                        <img class="img-size" src="../img/E时三客.png"/>
                    </a>
                    <a class="a-size">
                       <img class="" src="../img/pinkme.png"/>
                    </a>
                    <a class="a-size">
                       <img class="" src="../img/七彩蛋糕.png"/>
                    </a>
                    <a class="a-size">
                       <img class="" src="../img/wink cake.png"/>
                    </a>

                </div>
            </div>
            <!--行-->
            <div class="hang"></div>
            <!--商品-->       
            <ul class="mui-table-view mui-grid-view">
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <div class="brands-border"> 
                            <img class="mui-media-object" src="../img/产品1.png">
                            <div class="mui-media-body brands-text">挚爱</div>
                            <p class="brand">黑天鹅</p>
                            <p class="price">¥999</p>
                            <span class="pingjia">309人评价</span>
                            <span class="songda">最快4小时送达</span>
                        </div>

                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <div class="brands-border"> 
                            <img class="mui-media-object" src="../img/产品 2.png">
                            <div class="mui-media-body brands-text">甜蜜如心鲜奶蛋糕</div>
                            <p class="brand">元祖食品</p>
                            <p class="price">¥158</p>
                            <span class="pingjia">3768人评价</span>
                            <span class="songda">最快5小时送达</span>
                        </div>  
                    </a>
                </li>
                 <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <div class="brands-border"> 
                            <img class="mui-media-object" src="../img/产品 3.png">
                            <div class="mui-media-body brands-text">花澜甜心</div>
                            <p class="brand">好利来</p>
                            <p class="price">¥199</p>
                            <span class="pingjia">578人评价</span>
                            <span class="songda">最快4小时送达</span>
                        </div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-6">
                    <a href="#">
                        <div class="brands-border"> 
                            <img class="mui-media-object" src="../img/产品 4.png">
                            <div class="mui-media-body brands-text">裸蛋糕</div>
                            <p class="brand">焙尔蒂</p>
                            <p class="price">¥148</p>
                            <span class="pingjia">新品上架</span>
                            <span class="songda">最快5小时送达</span>
                        </div>
                    </a>
                </li>
            </ul>


        </div>

        <script src="../js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init({swipeBack:true});//启动右滑关闭功能
        </script>
    </body>

</html> 

/*搜索部分*/
.btn{
    background-color: #f1f1f1;
    border-style:none ;
    margin-top: 10px;
    margin-left: 10px;
    border-radius:5px ;
    width: 100%;
    height: 34px;
}
.sousuo input{
    background-color: #FFFFFF;
    border: solid 1px #7d7d7d;
    border-radius: 5px;
    width: 96%;
    margin-left: 10px;
}
.sousuo-size3{
    width: 20%;
}
.sousuo-size9{
    width: 80%;
}
/*九宫格导航部分*/
.img{
    width: 100%;
}
/*品牌街部分*/
.text{
    display: inline-block;
    width: 92%;
    text-align: center;
    padding-left: 24px;
}
.tu{
    display: inline-block;
    width: 6%;
}
/*分隔行*/
.hang{
    width: 100%;
    height: 10px;
    background-color: #f9f9f9;
    margin-bottom: 20px;
}
/*横向滚动*/
.img-size{
    width: 25%;
}
/*商品*/
.brands-text{
    text-align: left;
    font-family: "微软雅黑";
    font-size: 26px;
    color: #333333;
}
.brands-border{
    border: solid 1px #e5e5e5;
}
.brand{
    font-size: 20px;
    font-family: "微软雅黑";
    color: #666666;
    text-align: left;
}
.price{
    font-family: "微软雅黑";
    font-size: 24px;
    color: #ff3939;
    text-align: left;
}
.pingjia,.songda{
    font-family: "微软雅黑";
    font-size: 20px;
    color: #cccccc;
    text-align: left;
}
![图片说明](https://img-ask.csdn.net/upload/201708/25/1503639179_671193.jpg)

1个回答

qq_35728177
Tsui丶 回复李开心lql: 类连着写的话代表的是引用了两个类,css文件中查看一下这几个类的设置,哪里有影响到li的边框颜色,去除掉就好了,如果是框架自带的话,可以自己写class进行覆盖
大约 2 年之前 回复
qq_37686918
李开心lql 已解决 非常感谢你,我还想问一下就是为什么那个类可以连着写呀? 颜色改好之后<li>标签有边框颜色,从审查元素中找到,然后把类复制,把边框去掉没有效果,我想问问您怎样才能写对类改出效果
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!