Question

我想格式化我的listview项目，如下图所示，但我对CSS很恐怖。正如您在下面的代码中看到的，我有一个标题为“menu_icon”的图像，但我不希望这样，每当我尝试删除它时，格式化就会变得疯狂。如您所见，我还想将齿轮颜色更改为绿色，并将两侧的文本区域保持为白色。提前谢谢=）

enter image description here

<html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <div data-role="page" id="page1">
        <div data-role="header" data-position="fixed" data-tap-toggle="false">
             <h1>My page</h1> 
        </div>

        <div role="main"  class="ui-content">
           <ul data-role="listview" data-inset="true">
              <li>
                 <a href="./menu_icon.png"></a>
                 <a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
              </li>
              <li>
                 <a href="#"></a>
                 <a href="#download" data-transition="pop" data-icon="gear">Download Browser</a>
              </li>
           </ul>
        </div>

        <div data-role="footer" data-position="fixed" data-tap-toggle="false">
           <h1>My page footer</h1>
        </div>
   </div>
</html>

Answer 1

尝试这样的事情：

<style>
.ui-header, .ui-footer,
.ui-btn-icon-notext:after {
    background-color: #23B14D !important;
    color: #fff !important;
    text-shadow: none !important;
}
.ui-btn {
    background-color: #fff !important;
}
.ui-li-has-alt a:first-child {
    border-top: #FFC90F 8px solid !important;
}
.ui-li-has-alt a:last-child {
    border-top: #00A3E8 8px solid !important;
}
</style>

enter image description here

使用CSS格式化listview项目颜色和文本

1 个答案: