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;
}
