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>
目录
相关文章
|
2月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
7天前
|
C语言 Python
[oeasy]python054_python有哪些关键字_keyword_list_列表_reserved_words
本文介绍了Python的关键字列表及其使用规则。通过回顾`hello world`示例,解释了Python中的标识符命名规则,并探讨了关键字如`if`、`for`、`in`等不能作为变量名的原因。最后,通过`import keyword`和`print(keyword.kwlist)`展示了Python的所有关键字,并总结了关键字不能用作标识符的规则。
25 9
|
15天前
|
数据挖掘 大数据 数据处理
python--列表list切分(超详细)
通过这些思维导图和分析说明表,您可以更直观地理解Python列表切分的概念、用法和实际应用。希望本文能帮助您更高效地使用Python进行数据处理和分析。
33 14
|
17天前
|
数据挖掘 大数据 数据处理
python--列表list切分(超详细)
通过这些思维导图和分析说明表,您可以更直观地理解Python列表切分的概念、用法和实际应用。希望本文能帮助您更高效地使用Python进行数据处理和分析。
31 10
|
1月前
|
索引 Python
List(列表)
List(列表)。
49 4
|
2月前
|
测试技术 开发者 Python
在 Python 中创建列表时,应该写 `[]` 还是 `list()`?
在 Python 中,创建列表有两种方法:使用方括号 `[]` 和调用 `list()` 函数。虽然两者都能创建空列表,但 `[]` 更简洁、高效。性能测试显示,`[]` 的创建速度比 `list()` 快约一倍。此外,`list()` 可以接受一个可迭代对象作为参数并将其转换为列表,而 `[]` 则需要逐一列举元素。综上,`[]` 适合创建空列表,`list()` 适合转换可迭代对象。
在 Python 中创建列表时,应该写 `[]` 还是 `list()`?
|
1月前
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础:掌握列表渲染与动态数据管理
在HarmonyOS应用开发中,ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础,包括数据展示、性能优化和用户交互,以及如何在实际开发中应用这些知识,提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理,结合虚拟化列表和条件渲染等技术,帮助开发者构建高效、响应式的用户界面。
210 2
|
2月前
|
NoSQL 关系型数据库 MySQL
Redis 列表(List)
10月更文挑战第16天
33 2
|
2月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
2月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)