AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

08HUI - 媒体列表（hui-media-list-img）

2023-10-24 25
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 08HUI - 媒体列表（hui-media-list-img）

dom结构

div class="hui-media-list" style="padding:10px;">
    <ul>
        <li>
            <a href="">
                <div class="hui-media-list-img"><img src="" /></div>
                <div class="hui-media-content">
                    <h1>标题.</h1>
                    <p>描述</p>
                </div>
            </a>
        </li>
        <li>......</li>
    </ul>
</div>

代码

<!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-center-title" style="margin-top:22px;"><h1>媒体列表</h1></div>
    <div class="hui-media-list" style="padding:10px;">
        <ul>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <div class="hui-media-list-img"><img src="../img/medialist/1.jpg" /></div>
                    <div class="hui-media-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <div class="hui-media-list-img"><img src="../img/medialist/2.jpg" /></div>
                    <div class="hui-media-content">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <div class="hui-media-list-img"><img src="../img/medialist/3.jpg" /></div>
                    <div class="hui-media-content">
                        <h1>标题内容....</h1>
                        <p>笑对人生，能穿透迷雾；笑对人生，能坚持到底；笑对人生，能化解危机；笑对人生，能照亮黑暗。</p>
                    </div>
                </a>
            </li>
        </ul>
    </div>
    <div class="hui-center-title"><h1>混合排列</h1></div>
    <div class="hui-media-list" style="padding:10px;">
        <ul>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <div class="hui-media-list-img hui-fr"><img src="../img/medialist/1.jpg" /></div>
                    <div class="hui-media-content hui-media-content-left">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:hui.toast('hi...');">
                    <div class="hui-media-content hui-media-content-left">
                        <h1>标题内容....</h1>
                        <p>power by hcoder.net</p>
                    </div>
                    <div class="hui-media-list-img"><img src="../img/medialist/2.jpg" /></div>
                </a>
            </li>
            <li>
                <div class="hui-media-list-img"><img src="../img/medialist/3.jpg" /></div>
                <div class="hui-media-content">
                    <h1>标题内容....</h1>
                    <p>笑对人生，能穿透迷雾；笑对人生，能坚持到底；笑对人生，能化解危机；笑对人生，能照亮黑暗。</p>
                </div>
            </li>
        </ul>
    </div>
</div>
<script src="../js/hui.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
</script>
</body>
</html>
文章标签：
JavaScript
关键词：
列表List
hui List
阿甘兄
目录
相关文章
游客44yag4ft7nckq
|
1月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
34 6
米果粒
|
8天前
|
索引 Python
List（列表）
List（列表）。
米果粒
17 4
互联网课堂
|
1月前
|
测试技术 开发者 Python
在 Python 中创建列表时，应该写 `[]` 还是 `list()`？
在 Python 中，创建列表有两种方法：使用方括号 `[]` 和调用 `list()` 函数。虽然两者都能创建空列表，但 `[]` 更简洁、高效。性能测试显示，`[]` 的创建速度比 `list()` 快约一倍。此外，`list()` 可以接受一个可迭代对象作为参数并将其转换为列表，而 `[]` 则需要逐一列举元素。综上，`[]` 适合创建空列表，`list()` 适合转换可迭代对象。
互联网课堂
22 1
在 Python 中创建列表时，应该写 `[]` 还是 `list()`？
lqj_本人
|
22天前
|
JavaScript 数据管理 虚拟化
ArkTS List组件基础：掌握列表渲染与动态数据管理
在HarmonyOS应用开发中，ArkTS的List组件是构建动态列表视图的核心。本文深入探讨了List组件的基础，包括数据展示、性能优化和用户交互，以及如何在实际开发中应用这些知识，提升开发效率和应用性能。通过定义数据源、渲染列表项和动态数据管理，结合虚拟化列表和条件渲染等技术，帮助开发者构建高效、响应式的用户界面。
lqj_本人
156 2
听白
|
1月前
|
NoSQL 关系型数据库 MySQL
Redis 列表(List)
10月更文挑战第16天
听白
18 2
游客44yag4ft7nckq
|
1月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
30 2
游客44yag4ft7nckq
|
1月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
19 4
六卿
|
2月前
|
数据可视化 前端开发 容器
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
本文介绍了如何在Twaver-HTML5中使用列表可视化视图组件（List），展示了如何创建列表、设置列表属性（如行高、间隔颜色等）、实现数据绑定和排序，以及如何通过React代码示例进行操作。
六卿
34 2
Twaver-HTML5基础学习(41)列表可视化视图组件(List)
游客44yag4ft7nckq
|
1月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
36 15
游客44yag4ft7nckq
|
1月前
|
JavaScript
DOM 节点列表长度（Node List Length）
DOM 节点列表长度（Node List Length）
游客44yag4ft7nckq
13 2

热门文章

最新文章

  • 1
    va_list,va_start,va_arg,va_en
  • 2
    list去重
  • 3
    List之根据某个字段在add的时候过滤掉重复的数据
  • 4
    Using a CheckBox control as a list item renderer in Flex
  • 5
    LeetCode 82 Remove Duplicates from Sorted List II（从已排序链表中移除重复元素）（Linked List）（*）
  • 6
    How to delete a large number of data in SharePoint for List when refreshing data?
  • 7
    [LeetCode] Rotate List 旋转链表
  • 8
    java list中的对象去重原理
  • 9
    编写高质量代码改善C#程序的157个建议[勿选List<T>做基类、迭代器是只读的、慎用集合可写属性]
  • 10
    Hibernate之查询中get()和load()的区别，list()和iterate()的区别
  • 1
    Python中的列表（List）和元组（Tuple）是两种重要的数据结构
    56
  • 2
    stack=s+stack#TypeError: can only concatenate str (not “list“) to str
    36
  • 3
    DOM 节点列表长度（Node List Length）
    31
  • 4
    【Python】已解决：IndexError: list index out of range
    393
  • 5
    Java List接口实现原理与性能评估
    77
  • 6
    【Python】已解决：TypeError: descriptor ‘index‘ for ‘list‘ objects doesn‘t apply to a ‘str‘ object
    126
  • 7
    DOM 节点列表长度（Node List Length）
    22
  • 8
    DOM 节点列表长度（Node List Length）
    31
  • 9
    若依修改，配置了一个接口路径出现了，如何放通接口{ “msg“: “请求访问：/code/list，认证失败，无法访问系统资源“, “code“: 401}
    1044
  • 10
    Redis09-----List类型，有序，元素可以重复，插入和删除快，查询速度一般，一般保存一些有顺序的数据，如朋友圈点赞列表，评论列表等，LPUSH user 1 2 3可以一个一个推
    72

    • 相关电子书

    更多
  • <img src...[mitah].1536575523.pdf
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • 零基础入门Serverless：TodoList应用创建
    • 下一篇
    无影云桌面