先上效果图

mui开发记录（三） 列表组件 样式修改 导航条_自定义

一、头部bar及样式改变

<header class="mui-bar mui-bar-nav" id="back">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">藏乐阁</h1>
    </header>

通过id=“back”来改变样式。当然首先得在首部引入自定义的样式表

<link href="css/music_lib.css" rel="stylesheet" />

css改变如下

#back {
  background-color: #FF0000;
}
#back h1 {
  color: #FAFAFA;
  
}
#back a {
  color: #FAFAFA;
}

二、例表

ml激活，得到基本例表框架，然后自定义修改

如其中之一的代码

<a href="javascript:;">
              <img class="mui-media-object mui-pull-left" src="img/zheng1.jpg">
              <div class="mui-media-body">
                古筝
                <p class="mui-ellipsis">佳人当窗弄白日，弦将手语弹鸣筝。</p>
              </div>
            </a>
          </li>

 mui框架