其他分享
首页 > 其他分享> > 07HUI - 普通列表（hui-list）

07HUI - 普通列表（hui-list）

作者：互联网

效果图

在这里插入图片描述

代码

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>HUI 列表</title>
<link rel="stylesheet" type="text/css" href="../css/hui.css" />
</head>
<body>
<header class="hui-header">
    <div id="hui-back"></div>
    <h1>HUI - 列表</h1>
</header>
<div class="hui-wrap">
    <div class="hui-common-title" style="margin-top:15px;">
        <div class="hui-common-title-line"></div>
        <div class="hui-common-title-txt">普通文字列表</div>
        <div class="hui-common-title-line"></div>
    </div>
    <div class="hui-list" style="margin-top:22px;">
        <ul>
            <li>
                <a href="javascript:hui.toast('Hello Hcoder UI !');">
                    <div class="hui-list-text">普通文字列表</div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('Hello Hcoder UI !');">
                    <div class="hui-list-text">
                        <div class="hui-list-text-content">
                        文本很长并想保持右侧箭头的例子：HUI 更轻、更好的移动端UI框架！
                        </div>
                        <div class="hui-list-info">
                            查看 <span class="hui-icons hui-icons-right"></span>
                        </div>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="hui-common-title" style="margin-top:28px;">
        <div class="hui-common-title-line"></div>
        <div class="hui-common-title-txt">带有图标的列表</div>
        <div class="hui-common-title-line"></div>
    </div>
    <div class="hui-list" style="margin-top:22px;">
        <a href="javascript:hui.toast('Hello Hcoder UI !');">
            <div class="hui-list-icons">
                <img src="../img/list/home.png" />
            </div>
            <div class="hui-list-text">
                主页
                <div class="hui-list-info">
                    查看 <span class="hui-icons hui-icons-right"></span>
                </div>
            </div>
        </a>
        <a href="javascript:hui.toast('Hello Hcoder UI !');">
            <div class="hui-list-icons">
                <img src="../img/list/sc.png" />
            </div>
            <div class="hui-list-text">
                收藏
            </div>
        </a>
    </div>
    <div class="hui-common-title" style="margin-top:28px;">
        <div class="hui-common-title-line"></div>
        <div class="hui-common-title-txt">组合列表</div>
        <div class="hui-common-title-line"></div>
    </div>
    <div class="hui-list" style="margin-top:22px;">
        <a href="javascript:hui.toast('Hello Hcoder UI !');" style="height:auto; height:80px; padding-bottom:8px;">
            <div class="hui-list-icons" style="width:110px; height:80px;">
                <img src="../img/list/home.png" style="width:66px; margin:0px; border-radius:50%;" />
            </div>
            <div class="hui-list-text" style="height:79px; line-height:79px;">
                Hcoder.net
                <div class="hui-list-info">
                    <span class="hui-icons hui-icons-right"></span>
                </div>
            </div>
        </a>
        <a href="javascript:hui.toast('Hello Hcoder UI !');">
            <div class="hui-list-text">
                账户余额 : 1000元 | 积分 : 2000
            </div>
        </a>
    </div>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

 

标签：文字,查看,Hcoder,07HUI,list,HUI,hui,普通,列表
来源： https://blog.51cto.com/u_15294985/3006306