一款实用好看的展示列表

瑆箫

于 2023-03-31 14:04:44 发布

阅读量427

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/mo3408/article/details/129878824

版权

web前端技术同时被 3 个专栏收录

274 篇文章 12 订阅 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

web

205 篇文章 8 订阅 ¥129.90 ¥299.90

订阅专栏

超级会员免费看

源码

17 篇文章 0 订阅

订阅专栏

本文介绍了一款实用且美观的展示列表的创建方法，通过CSS和HTML实现。文章提供源码下载，并展示了具体的效果。内容包括效果的预览以及详细代码的展示。

摘要由CSDN通过智能技术生成

下载：源码

1.效果展示：

2.代码：


<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>实用好看的展示列表</title>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css">
  <style>
  *,*::before,*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  --color: rgba(30, 30, 30);
  --bgColor: rgb(215, 215, 215);
  min-height: 100vh;

  display: grid;
  align-content: center;
  gap: 2rem;
  padding: 2rem;

  font-family: "Oxygen", sans-serif;
  color: var(--color);
  background: var(--bgColor);
}

ol {
  width: min(60rem, 90%);
  margin-inline: auto;