AI 助理
备案控制台
开发者社区 云计算 文章 正文

html+css 完成通用列表list

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

8d5644c2e6a54635a3ebb41f5c3bf2da.png

代码：

<!DOCTYPE html>
<html>
<head>
  <title>用户列表</title>
  <style type="text/css">
    body {
      background: #222;
    }
    .list {
      width: 300px;
      border: 1px solid #666;
      margin: 0 auto;
      background: #FFF;
    }
    .list .header {
      height: 80px;
      border-bottom: 1px  solid #666;
      text-align: center;
        line-height: 80px;
    }
    .list .header a {
        text-decoration: none;
        color: #222;
        font-size: 30px;
        float: left;  
    }
    .list .body .user{
      height: 180px;
      border-bottom: 1px solid #666;  
    }
    .list .body .user .u_left {
      height: 100%;
      width: 186px;
        float: left;
    }
    .list .body .user .u_left .d1 {
      width: 80px;
      height: 100%;
      float: left;
      text-align: center;
        line-height: 238px;
    }
    .list .body .user .u_left .d1 img {
      width: 66px;
        height: 66px;
        border-radius: 50%;
    }
    .list .body .user .u_left .d2 {
      width: 106px;
      height: 100%;
      float: left;
    }
    .list .body .user .u_left .d2 .d2_1{
      height: 100px;
        line-height: 150px;
    }
    .list .body .user .u_left .d2 .d2_2{
      font-size: 12px;
      color: #666;
    }       
    .list .body .user .gz {
      width: 80px;
      height: 28px;
      background: green;
      color: #FFFFFF;
      text-align: center;
      line-height: 28px;
      float: right;
      border-radius: 10px;
      margin: 70px 16px;
    }
  </style>
</head>
<body>
  <div class="list">
    <div class="header">
      <span style="margin-left: -23px;">用户</span>
      <a href="#"><</a>
    </div>
    <div class="body">
      <div class="user">
        <div class="u_left">
          <div class="d1">
            <img src="img/4.jpg">
          </div>
          <div class="d2">
            <div class="d2_1">天涯</div>
            <div class="d2_2">粉丝数量：1230</div>
          </div>
        </div>
        <a class="gz">关注</a>
      </div>
      <div class="user">
        <div class="u_left">
          <div class="d1">
            <img src="img/3.jpg">
          </div>
          <div class="d2">
            <div class="d2_1">小猫咪</div>
            <div class="d2_2">粉丝数量：666</div>
          </div>
        </div>
        <a class="gz">关注</a>
      </div>
      <div class="user">
        <div class="u_left">
          <div class="d1">
            <img src="img/timg.jpg">
          </div>
          <div class="d2">
            <div class="d2_1">小丸子</div>
            <div class="d2_2">粉丝数量：1888</div>
          </div>
        </div>
        <a class="gz">关注</a>
      </div>
    </div>
  </div>
</body>
</html>


关键词：
HTML CSS
HTML列表
列表List
HTML列表list
HTML list
剽悍一小兔
目录
相关文章
二二*一一
|
12天前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
36 1
进步`于辰
|
15天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节与使用经验
本文总结了前端开发中的一些重要细节和技巧，包括CSS选择器、定位、层级、全局属性、滚轮控制、轮播等。作者以纯文字形式记录，便于读者使用<kbd>Ctrl + F</kbd>快速查找相关内容。文章还提供了示例代码，帮助读者更好地理解和应用这些知识点。
进步`于辰
38 1
[HTML、CSS]细节与使用经验
进步`于辰
|
16天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签（如video、input、canvas）、datalist和details标签的使用方法，以及CSS布局技巧（如margin、overflow: hidden和动态height）。文章旨在分享作者的学习经验和实用技巧。
进步`于辰
29 1
[HTML、CSS]知识点
游客g5tp3lgf24cqc
|
11天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
游客g5tp3lgf24cqc
43 12
米果粒
|
7天前
|
索引 Python
List（列表）
List（列表）。
米果粒
16 4
游客44yag4ft7nckq
|
10天前
HTML 速查列表4
本示例包含两个部分：表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格；框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
游客44yag4ft7nckq
28 5
温轻舟
|
7天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
48 1
游客44yag4ft7nckq
|
10天前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符，如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
游客44yag4ft7nckq
31 3
蓝易云
|
12天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript，我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验，还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能，提升网站的安全性和用户友好性。
蓝易云
25 3
游客44yag4ft7nckq
|
11天前
HTML 速查列表3
文档排版元素简介：包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等，帮助清晰组织和展示内容。
游客44yag4ft7nckq
26 0

热门文章

最新文章

  • 1
    过滤代码中的html标签
  • 2
    HTML基础加强
  • 3
    JavaScript 技术篇-js获取dom节点、html标签自定义属性的值。
  • 4
    HTML元素 属性 格式化标签
  • 5
    HTML DOM 教程Part1
  • 6
    @Html.ValidationSummary()作用
  • 7
    MDN Web技术文档 - HTML 元素
  • 8
    再来 10 个新鲜的 HTML5 教程
  • 9
    Skytte：一款令人印象深刻的 HTML5 射击游戏
  • 10
    在Pyramid中使用Mako模板以及默认和.html后缀关联
  • 1
    Java容器类List、ArrayList、Vector及map、HashTable、HashMap
    45
  • 2
    【C++】手搓 list 容器
    45
  • 3
    Redis基础操作 String List
    41
  • 4
    List＜String＞ 如何传参
    433
  • 5
    使用 Gson 将 Map、List等转换为json string
    163
  • 6
    节点列表长度（Node List Length）
    40
  • 7
    【Python 基础】列表（list）和元组（tuple）有什么区别？
    145
  • 8
    【C++/STL】list（常见接口、模拟实现、反向迭代器、）
    49
  • 9
    节点列表长度（Node List Length）
    34
  • 10
    DOM 节点列表长度（Node List Length）
    61

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 《零基础HTML入门教程》
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • 使用Count功能批量创建资源
    • 下一篇
    阿里云OSS设置跨域访问