瀏覽：636
介绍
我们的目标是什么？
使用语义 HTML5 构建结构
使用现代 CSS 添加样式
- 重置CSS
- 使用 Flexbox 设计卡片布局
- 设计卡片图像
- 设计卡片内容的样式
- 设计卡片按钮
- 添加悬停过渡
- 使用CSS变量
结论
作为 Web 开发人员，我们经常遇到创建卡片组件的需要。无论是产品/项目展示、用户个人资料还是博客文章，卡片无处不在。
过去，创建响应式布局是一个挑战。由于现代 CSS 技术，特别是 CSS Flexbox 的出现，这些设计的创建变得更加简单和直观。
Flexbox 简化了创建响应式布局的过程。我们可以轻松地在容器中排列、对齐和间隔项目，而无需使用复杂的媒体查询。这意味着我们可以构建完美适应不同屏幕尺寸和方向的布局，而无需指定确切的断点。
目的是通过使用 CSS Flexbox 创建等高的响应式卡片，而不依赖于断点。我们将确保每张卡片无论内容长度如何都保持相同的高度，无缝适应不同的屏幕尺寸。
布局的关键 CSS 属性：
现在让我们通过构建卡片来探索 CSS Flexbox 的魔力！
Title one
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod, aliquid ex vel labore fugit dignissimos libero eos hic, fuga, vitae consequuntur quidem.
Title two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magnam aperiam consequuntur, saepe at repellat nobis.
Title three
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum reprehenderit at cumque? Architecto numquam nam placeat suscipit!
/* Basic CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Ensure that our layout is centred horizontally and vertically on the page */
body {
display: flex; /* using CSS flexbox to vertically and horizontally centre all cards */
justify-content: center;
align-items: center;
min-height: 100vh;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Cards */
.card-container {
display: flex; /* using CSS flexbox to display each card at the centre */
justify-content: center;
align-items: stretch; /* use stretch for equal height of all cards */
gap: 1.5625rem; /* add space between each card */
flex-wrap: wrap;
padding: 1rem;
max-width: 100%; /* Prevent container from exceeding viewport width */
}
.card {
display: flex;
flex-direction: column;
width: 20rem;
background-color: #fff;
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
text-align: center;
text-wrap: balance; /* ensures content is evenly distributed across multiple lines for better readability. */
overflow: hidden;
}
.card-image {
width: 100%;
height: auto;
object-fit: cover;
margin-bottom: 0.85rem;
}
.card-title {
font-size: 1.25rem;
padding: 1rem;
color: #3ca69f;
}
.card-description {
flex-grow: 1; /* allow the content to take available space, thus maintaining equal height no matter the length of the content */
padding: 0 1rem 1rem;
font-size: 0.975rem;
line-height: 1.5;
}
/* Cards button */
.card-button {
align-self: center; /* placing the button at the center */
margin: 1rem 0 3rem;
padding: 0.625rem 1rem;
font-size: 1rem;
color: #ffffff;
background-color: #3ca69f;
border: none;
border-radius: 0.3125rem;
cursor: pointer;
}
.card {
transition: 0.5s ease all;
}
.card-button {
transition: 0.5s ease all;
}
/* cards hover effect */
.card:hover {
background-color: #276662;
color: #ffffff;
}
.card:hover > .card-button {
background-color: #ffffff;
color: #276662;
font-weight: 700;
}
.card:hover > .card-title {
color: #ffffff;
}
/* Declare variables */
:root {
--primary-color: #3ca69f;
--secondary-color: #276662;
--text-color: #ffffff;
--shadow-color: rgba(0, 0, 0, 0.4);
--border-radius: 0.3125rem;
--spacing: 1rem;
--transition-duration: 0.5s;
}
返回顶部
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3
