『前端样式分享』联系我们卡片式布局自适应屏幕 hover动效在wikijs中使用（代码拿来即用）

news2025/4/19 18:00:57

预览效果

在这里插入图片描述

分析要点

响应式网格布局

.cardList {
    margin: 40px auto;
    padding: 0 15px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

使用了 grid 布局，通过 grid-template-columns 定义了响应式列布局。
auto-fill 和 minmax(300px, 1fr) 实现了在不同屏幕尺寸下的自适应布局。卡片的最小宽度为 300px，而最大宽度根据可用空间动态调整。
gap: 20px 使得每个卡片之间有一定的间距，提升视觉效果。

卡片样式：阴影和过渡效果

.card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
    padding: 20px;
    text-align: center;
    transition: transform .3s, box-shadow .3s;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
}

.card 类的样式设计简洁，采用了白色背景和圆角（border-radius: 8px）来提升现代感。
box-shadow 添加了阴影效果，使得卡片看起来有浮动感。
transition 属性定义了卡片的过渡效果，使得卡片在鼠标悬停时出现平滑的动画效果（例如，向上移动和阴影加深）。

代码

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系方式</title>
    <style>
        .cardList {
            margin: 40px auto;
            padding: 0 15px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px
        }

        .card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
            padding: 20px;
            text-align: center;
            transition: transform .3s, box-shadow .3s
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, .1)
        }

        .card h2 {
            color: #2980b9;
            font-size: 20px;
            margin-bottom: 15px
        }

        .card p {
            font-size: 16px;
            color: #555;
            margin-bottom: 15px
        }

        .email-list {
            list-style: none;
            padding: 0;
            margin: 0
        }

        .email-list li {
            margin: 8px 0
        }

        .email-list li a {
            color: #2980b9;
            text-decoration: none;
            font-weight: 700
        }

        .email-list li a:hover {
            text-decoration: underline
        }

        .tip {
            text-align: left;
            text-indent: 2em;
        }
    </style>
</head>

<body>

    <div class="cardList">
        <!-- Plus4 Card -->
        <div class="card">
          <h2>机器型号 1</h2>
          <p class="tip">如果您需要有关 机器型号 1 型号的售后服务，请通过以下邮箱联系我们：</p>
          <ul class="email-list">
            <li><a href="mailto:example1@domain.com">example1@domain.com</a></li>
            <li><a href="mailto:example2@domain.com">example2@domain.com</a></li>
          </ul>
        </div>
    
        <!-- Q1 Pro Card -->
        <div class="card">
          <h2>机器型号 2</h2>
          <p class="tip">如果您需要有关 机器型号 2 型号的支持，请通过以下联系方式联系我们：</p>
          <ul class="email-list">
            <li><a href="mailto:example3@domain.com">example3@domain.com</a></li>
            <li><a href="mailto:example4@domain.com">example4@domain.com</a></li>
          </ul>
        </div>
    
        <!-- X-Max 3 Card -->
        <div class="card">
          <h2>机器型号 3</h2>
          <p class="tip">对于 机器型号 3 型号的售后服务，请通过以下邮箱联系我们：</p>
          <ul class="email-list">
            <li><a href="mailto:example5@domain.com">example5@domain.com</a></li>
            <li><a href="mailto:example6@domain.com">example6@domain.com</a></li>
          </ul>
        </div>
    
        <!-- X-Plus 3 Card -->
        <div class="card">
          <h2>机器型号 4</h2>
          <p class="tip">如果您需要有关 机器型号 4 型号的售后服务，请通过以下邮箱联系我们：</p>
          <ul class="email-list">
            <li><a href="mailto:example7@domain.com">example7@domain.com</a></li>
            <li><a href="mailto:example8@domain.com">example8@domain.com</a></li>
          </ul>
        </div>
    
        <!-- X-Smart 3 Card -->
        <div class="card">
          <h2>机器型号 5</h2>
          <p class="tip">如果您需要有关 机器型号 5 型号的售后服务，请通过以下邮箱联系我们：</p>
          <ul class="email-list">
            <li><a href="mailto:example9@domain.com">example9@domain.com</a></li>
            <li><a href="mailto:example10@domain.com">example10@domain.com</a></li>
          </ul>
        </div>
    
      </div>

</body>

</html>

优化希望长短不一的邮箱地址在左右居中的同时,做到左侧文字对齐(wikijs可用)

wikijs本身有自带的样式,干扰了我们的ul/li/h2样式,所以用了几个!important 强制样式,如果有更好的解决办法,请评论区留言,一般情况你不需要设置这些!important 会影响性能

width: fit-content;：使

的宽度根据其内容自动适应。
margin-left: auto; 和 margin-right: auto;：将
- 居中显示在其父容器中。
  这三个属性结合使用，能确保
  - 元素不会占用多余的空间并且居中显示，同时每个
  - 元素的内容从左对齐。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>联系方式</title>
    <style>
        .cardList {
            margin: 40px auto;
            padding: 0 15px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px
        }
        
        .card {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
            padding: 20px;
            text-align: center;
            transition: transform .3s, box-shadow .3s
        }

        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 6px 16px rgba(0, 0, 0, .1)
        }

        .cardTitle {
            color: #2980b9;
            font-size: 20px;
            margin-bottom: 15px;
            position: relative
        }

        .cardTitle::before {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #000
        }

        .card p {
            font-size: 16px;
            color: #555;
            margin-bottom: 15px
        }

        .email-list {
            list-style: none;
            padding: 0 !important;
            margin: 0;
            width: fit-content !important;
            margin-left: auto;
            margin-right: auto
        }

        .email-list li {
            margin: 8px 0;
            color: #2980b9;
            text-decoration: none;
            font-weight: 700;
            text-align: left
        }

        .email-list li::before {
            content: none !important
        }

        .email-list li a:hover {
            text-decoration: underline
        }

        .tip {
            text-align: left;
            text-indent: 2em
        }

        .important {
            color: #e74c3c;
            font-weight: 700
        }
    </style>
</head>

<body>

    <div class="cardList">
        <!-- Plus4 Card -->
        <div class="card">
            <div class="cardTitle">支持联系方式</div>
            <p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p>
            <ul class="email-list">
                <li>support111111111@example.com</li>
                <li>support2222@example.com</li>
            </ul>
        </div>

        <!-- Q1 Pro Card -->
        <div class="card">
            <div class="cardTitle">支持联系方式</div>
            <p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p>
            <ul class="email-list">
                <li>support3333@example.com</li>
                <li>support4444444444@example.com</li>
            </ul>
        </div>

        <!-- X-Max 3 Card -->
        <div class="card">
            <div class="cardTitle">支持联系方式</div>
            <p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p>
            <ul class="email-list">
                <li>support55555555@example.com</li>
                <li>support666@example.com</li>
            </ul>
        </div>

        <!-- X-Plus 3 Card -->
        <div class="card">
            <div class="cardTitle">支持联系方式</div>
            <p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p>
            <ul class="email-list">
                <li>support7@example.com</li>
                <li>support8@example.com</li>
            </ul>
        </div>

        <!-- X-Smart 3 Card -->
        <div class="card">
            <div class="cardTitle">支持联系方式</div>
            <p class="tip">如果您需要相关支持，请通过以下邮箱联系我们：</p>
            <ul class="email-list">
                <li>support9@example.com</li>
                <li>support10@example.com</li>
            </ul>
        </div>

    </div>

</body>

</html>