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

于 2025-04-18 22:00:00 发布
阅读量925 收藏 20
点赞数 6
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/U011027547/article/details/144196449
版权

目录

欢迎关注 『前端布局样式』 专栏，持续更新中
欢迎关注 『前端布局样式』 专栏，持续更新中

预览效果

在这里插入图片描述

分析要点

响应式网格布局

.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>

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-12-1

欢迎关注 『前端布局样式』 专栏，持续更新中
欢迎关注 『前端布局样式』 专栏，持续更新中
『未完待续』

Vue2前端开发：卡片式功能页面完整实现！ 前端布局新手指南：用Vue2打造简洁优雅的卡片式界面 从零开始：Vue2实现卡片式功能页面（附代码示例） Vue2卡片设计实例：打造现代化功能页面 前端开发
南北极之间
12-10 786
Vue2前端开发：卡片式功能页面完整实现！ 前端布局新手指南：用Vue2打造简洁优雅的卡片式界面 从零开始：Vue2实现卡片式功能页面（附代码示例） Vue2卡片设计实例：打造现代化功能页面 前端开发必备：Vue2+CSS3实现炫酷卡片布局功能页 功能页面开发：如何用Vue2构建美观卡片式设计 Vue2单页应用入门：卡片式布局功能页面完全指南Vue2前端开发：卡片式功能页面完整实现！ 前端布局新手指南：用Vue2打造简洁优雅的卡片式界面 从零开始：Vue2实现卡片式功能页面（附代码示例） Vue2卡片设计实
卡片布局自适应方案全解析
CooolYvonne的博客
03-26 8338
上设计稿 采用卡片模式，设计师给出的完美设计稿是 显示一行5个卡片，收起左侧菜单与否都展示5个 但是有点经验的前端就知道 这个需求没设计师给的这么简单（虽说后面改的时候也针对于自适应的方案纠结了一天的工期????） 看到这个需求首先我们第一想到的肯定是自适应的王者：flex 1.卡片自适应 —— flex Dom <div class="card-wrap"> <div class="card-context card-add">+</div> <
原生js图片瀑布流布局_自适应屏幕全屏瀑布流布局.rar
11-23
原生js图片瀑布流布局_自适应屏幕全屏瀑布流布局.rar
js实现卡片式项目管理界面UI设计效果
10-23
主要介绍了js实现卡片式项目管理界面UI设计效果，该UI设计中，将各个项目以卡片的方式堆叠排列在屏幕上，当点击了其中的某个项目的时候，该项目图片会全屏放大，向下滚动鼠标可以看到该项目的介绍信息，需要的朋友可以参考下
CSS 伪类 :hover 全解析
最新发布
2404_89043880的博客
03-05 902
hover伪类是 CSS 中一个强大且实用的工具，通过简单的代码就能为网页添加丰富的交互效果。但在使用过程中，要注意性能问题和移动设备的兼容性，以确保为用户提供流畅、友好的浏览体验。
CSS3社交图文卡片式布局特效
06-24
CSS3社交图文卡片式布局特效是一款可用于相册图片，产品图片介绍展示特效。
前端布局小案例，分享3个漂亮的卡片组件
前端达人
03-24 3821
当今互联网发展迅猛，各种应用、网站和软件层出不穷，其中前端技术的发展更是让人瞩目。随着用户对于界面设计的要求越来越高，漂亮的卡片组件在各类网页设计中变得越来越流行。本文将分享三个精美的卡片组件，帮助您在前端开发中轻松实现优秀的界面设计。卡片一：个人介绍卡片如下图所示，这种个人介绍的卡片，想必我们都做，效果图如下，如果是你，会怎么实现呢？以下是相关的代码实现HTML部分：<div class=...
入门武汉Web前端开发需要学习哪些内容？介绍这些
xiaoxijing的博客
10-31 448
现如今Web前端开发工程师因为薪资高、前景好受到了越来越多人的青睐，很多人都想通过学习Web前端开发而进入这个极具前景的行业。那对于零基础的人来说，想要入门Web前端开发需要学习哪些内容？下面，我带大家了解一下。 首先对于Web前端初学者而言，HTML和CSS是需要掌握的内容。HTML称为超文本标记语言，是一种标识性的语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、...
前端样式-卡片01
Anolzo
03-19 3561
运用到的技术： html + css+ js 样式： HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc
【前端】Vue实现网站导航 以卡片形式显示（附Demo）
码农研究僧的博客
02-10 4149
【前端】Vue实现网站导航 以卡片形式显示（附Demo）
web前端卡片样式_jQuery和CSS3堆叠卡片样式导航菜单特效_html/css_WEB-ITnose
weixin_42366533的博客
01-14 961
的HTML结构，其中div.demo__close-menu是汉堡包按钮，每一个div.demo__section是一个子页面。 ContactAboutTeamProjectsCSS样式汉堡包图标按钮的样式如下： .demo__close-menu { position: absolute; left: 22px; top: 22px; width: 29px; cur...
前端学生作业毕设实训素材-响应式卡片式设计动态加载模板(自适应手机端).rar
04-08
这个压缩包文件是一个针对前端学生的毕业设计实训素材，主要特点是响应式卡片式设计，能够实现动态加载，并且自适应手机端。这样的设计是现代网页设计的常见趋势，它旨在提供一致且优秀的用户体验，无论用户是在桌面...
前端WEB界面所使用的广告卡片.zip
06-04
现在前端经常会用到卡片类的展示，比如多张银行卡的展示。这个时候需要用到一个统一的前端模板以保证样式的一致，我们只需要通过后台获取一个List,然后向模板中塞数据即可，然后将模板append到一个列表展示的div中。
html旅游网页设计代码_11个Html和CSS 动态网页背景免费代码案例
weixin_39743622的博客
12-01 9242
作者：Vaibhav Arora使用技术：HTML (Haml) / CSS依赖库：-浏览器兼容：Chrome, Edge, Firefox, Opera, Safari源码链接：https://codepen.io/vaibhavarora/pen/xmpxjp作者：Rob DiMarzo使用技术：HTML (Pug) / CSS (SCSS)依赖库：-浏览器兼容：Chrome, Firefox...
web前端卡片样式_WEB前端第五十课——BootStrap组件（二）Card、Carousel
weixin_42342032的博客
01-14 2950
1.Card卡片一个可以添加图像、标题、文本、列表、按钮等多种或一种内容的容器。⑴ 基本样式主要构成：①卡片容器，③ 图片，，可以放在body之前或之后④ 卡片体，，一个card内可以多个body⑤ 卡片标题，⑥ 卡片文本，⑦ 卡片连接，，可以多个连接按钮或其他按钮 Card titleSome quick example text to build on the card title ...
前端实战小案例--炫酷购物价目卡片
leeeeeena's blog
11-14 707
<DOCType html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>炫酷购物价目卡片</title&gt
opencv入门要学多久_干货基础:零基础小白如何快速入门前端，前端基础知识分享...
weixin_39567943的博客
11-21 1165
新人达到入门标准很简单，就一条：达到能参与Web前端实际项目的开发水平。那我们学习前端知识时，就要以这一目标为最终目的。01、零基础能入门web前端吗新人想要学WEB前端技术，最为关心的是成为WEB前端工程师要多久，学习web前端路线是怎样的。如果你真想知道学web前端技术的时间是多长，那么就得了解它究竟要学什么东西。web前端开发技术的入门门槛其实并不算高，服务器端语言的学习特点是先慢后快，而前...
Ext Js 3.2 卡片式布局--CardLayout应用
张波的技术积累
11-27 3905
1：Ext.layout.CardLayout的介绍      CardLayout可以看作是一叠卡片，从上面看起来就像是一张卡片，可以把中间的卡片抽出来，放到最上面，可每次只能看到一张卡片，它能够 满足安装向导、Tab选项卡等应用面板显示的需求。   代码：   <% String path = request.getContextPath(); String basePath
前端练习小项目——视觉冲击卡片
热门推荐
秋刀鱼不做梦的编程日常
06-20 1万+
前端练习小项目——视觉冲击卡片，学完前端的知识后没有项目练手，那这篇文章正好解决了你的问题！！！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

发现你走远了

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值