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>
目录
相关文章
|
23天前
|
存储 JavaScript
DOM 节点列表长度(Node List Length)
名为 &quot;title&quot; 的元素节点,并存储在节点列表 x 中。通过 &quot;length&quot; 属性确定 x 的长度(即 &quot;title&quot; 节点总数)。利用 for 循环遍历整个列表,访问每个 &quot;title&quot; 节点的第一个子节点的值,并将其写入文档。
|
5天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
4天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
3天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
20天前
|
JavaScript
Vue3列表(List)
这段代码介绍了一个基于 Vue3 的列表组件库 `Vue Amazing UI`。该库提供了丰富的自定义选项,如边框、垂直布局、分割线、尺寸、加载状态等,并支持分页、自定义样式及操作项。组件通过插槽和属性实现高度灵活的内容展示与交互。
Vue3列表(List)
|
7天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
9天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
11天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
14天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
13天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)