在现实生活在，视觉信息总是很吸引人的眼球，好的页面设计总是能够脱颖而出，而卡片设计的应用就是一种趋势。有数据显示移动端使用率远远高于桌面端，网页设计都能很好的适应小屏幕。这个结论就是：简单的界面风格，比如：扁平化设计，极简设计，尤其是卡片设计比往年都要流行。卡片式网页设计判断一个卡片设计的好坏，重点看下面两个：好的卡片设计不会使用太多的加载时间，同时它也能在不同的屏幕上切换自如。小的模块对于用户来
转载
2023-11-17 20:50:15
125阅读
本文借鉴了一部分上文，卡片布局部分不再是自己写 DIV 和 CSS ，而是改用了 element-ui 的 “card 卡片”，使用方法见：https://element.eleme.cn/#/zh-CN/component/card并且添加了全选 和 其他功能。关键点：【最开始这两个点疏忽了，调了一下午。是个小坑】1、input 的 id 和&nbs
转载
2023-12-28 08:50:30
133阅读
文章目录系列文章目录@[TOC](文章目录)前言1、学习Element-plus 的tabs组件选项卡功能1.1、tabs 组件1.2、基础用法1.3、卡片风格的标签1.4、标签位置的设置1.5、Tabs 属性1.6、Tabs 事件2、博物馆管理系统数据展示2.1、产品原型图2.2、准备mock数据2.3、通过axios加载数据总结前言在第一章节，我们把博物馆管理系统打了个地基，基本的产品架构和框
卡片设计在界面中已经是非常常见的一种设计形式，大家做设计时几乎都会用到。关于卡片设计的文章网上已经有很多了，今天我想从我自己的经验来总结卡片设计的细节要点，期望能给大家总结一些快速提升卡片设计效果的方法。 1、卡片的造型 1)圆角不同的圆角，所带来的气质是不同的。圆角很小，视觉印象是硬朗，高冷，具有攻击性的，多用于严肃、高端、冲突感强烈的设计中;而更大的圆角给人的感觉是有亲和力，柔软，安全
转载
2023-09-10 18:24:05
250阅读
Mint UI
1.组件库基础1.1 什么组件?组件(Component)是对复用的结构<template>、表现(<style>)及行为<script>的封装，其优势在于一次定义，多次使用。组件库是由多个组件形成的完整的架构体系。1.2 组件库的分类根据组件库应用平台的不同，可以分为：移动端组件库
Mint UI(饿了吗) – http://mint-
.table-flex { align-items: center; display: flex;
原创
2022-10-14 19:13:50
1175阅读
一.自定义实现：效果图： 直接看代码实现：1.MainActivitypublic class InvestEventActivity extends AbstractBaseUi implements View.OnClickListener, ViewPager.OnPageChangeListener {
private ViewPager viewPager
转载
2023-09-14 14:50:09
128阅读
??作者简介：一位喜欢写作，计科专业大三菜鸟?个人主页：starry陆离?订阅专栏：『10个实用的CSS样式』 10个实用的CSS样式之悬浮卡片1.简介2.布局设计3.样式美化3.1body美化3.2container美化3.3card美化3.4content美化3.5加上动画4.结语 1.简介对于初学前端的小白来说css样式的设计很考验基本功和创意想法，而在项目开发中我们不可能将大部分的时间用于
转载
2024-01-08 17:35:40
860阅读
提示：话不多说直接上代码前言实现效果如下一、html代码<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=d
转载
2023-11-10 15:35:33
924阅读
在Android中创建卡片式UIAndroid card UI自从Google首次在Google+中推出了卡片式UI，卡片式变得越来越受欢迎。每个人都喜欢这种样式，并在自己的软件里实现类似的概念。它不仅可用于时尚的图形展示，也提供相应的逻辑功能，每个卡片都有它自己的内容和作用于内容的行为逻辑。换句话说，每个卡片都有自己的内容管理。 当我们开始为易趣Kleinanzeigen程序考虑预定功能时，最大
在使用android卡片是ui之前，先可以去看看github上的一个效果 https://github.com/AWCNTT/ArticleTranslateProject/blob/master/translated/Issue%23105/2014-11-06-Creating-a-Cards-UI-on-Android.md
自从卡片式UI第一次在Go
转载
2023-09-15 19:31:19
184阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ...
转载
2021-08-31 16:59:00
1183阅读
2评论
本教程将会告诉你如何用 Html 和 Css 实现卡片界面。教程会重点使用 Css filter 属性处理图片，以便给它添加一些过渡效果。第一步：确定 HTML 代码结构在创建 HTML 代码前，你首先应该想象它的结构。当你有一个好的模型时，应该第一时间把你想象的页面结构或者你的 CSS 模块及时地在纸上罗列出来。一个设计合理、结构良好的 HTML 页面会让你在接下来的工作过程中变的一异常轻松。&
转载
2023-10-03 14:23:01
304阅读
使用transform实现卡片翻转
原创
精选
2024-05-22 18:23:21
884阅读
点赞
# HTML5 卡片 CSS 实现指南
在现代网页设计中，卡片式布局被广泛应用，以其简洁和直观的形式吸引用户。本文将指导你如何使用 HTML5 和 CSS 创建一个简单的卡片设计。我们的目标是帮助你理解整个过程，并提供相关代码示例。
## 实现流程
我们可以分解整个过程为以下几个步骤：
| 步骤 | 描述
原创
2024-10-23 04:32:24
208阅读
卡片式设计对于我们来说并不陌生，从设计类网站上或市场上的一些 APP 中也会看到很多的卡片式设计的案例，卡片式设计也是 UI 设计中最常用的方式之一。最近在新项目的设计中也尝试使用了卡片式设计，结合实际项目中的一些思考进行总结并归纳出一些卡片式设计的小知识点。同时希望通过本次的总结进行知识沉淀，以及跟大家一起探讨下卡片式设计。1. Feed流卡片式的 feed 流设计是一种非常常见的设计，早在前几
转载
2023-07-01 17:27:05
487阅读
CSS实现2D卡片翻转特效作者：Sam9029最近在重温学习CSS transform 和 transition以及 CSS 的 2D 效果 remote所以我将使用上诉的CSS 属性来写一个 卡片翻转的 特效（记得以前好像有个什么游戏来着也有这种特效，一时间给忘了有些记不起来了）实现的效果主要如下：鼠标移动至卡片的图片翻转自适应屏幕大小的排列卡片
最近在温习自适应，有些头痛，此处在重温一遍
转载
2023-11-01 16:19:58
524阅读
# 如何实现 Android 的卡片式 UI 布局
在 Android 开发中，卡片式布局是一种常用的 UI 设计模式，尤其适合展示信息以卡片的形式。下面，我们将通过一个详细的流程，逐步学习如何实现一个简单的卡片式 UI 布局。
## 流程步骤
以下是实现卡片式 UI 布局需要遵循的步骤：
| 步骤 | 描述 |
|------|----------
原创
2024-10-16 04:46:27
268阅读
这里只考虑chrome的兼容。card1.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>卡片翻转——以下边为轴</title> <style> #my3dspace {
原创
2022-11-28 18:27:41
800阅读
利用 css3 属性 `backface-visibility` 让卡片翻转的过渡动画效果。
原创
精选
2024-08-06 19:24:43
749阅读
