html文章卡片

news2025/1/21 0:57:46

完成效果

在这里插入图片描述

中医网站的文本卡片制作，其中用到了grid布局

css基础知识回顾

阴影样式

好的阴影样式可以保存
box-shadow: 6px 6px 5px hsla(0, 0%, 0%, 0.02), 25px 25px 20px hsla(0, 0%, 0%, 0.03), 100px 100px 80px hsla(0, 0%, 0%, 0.05);

grid-template-columns

https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid-template-columns
定义列与每列所占的宽度
grid-template-columns:285px minmax(300px, 445px) 定义最小和最大宽度

max-width: 730px; 定义最大宽度

图片

用div.img-box 设置图片的尺寸。图片可以把div撑起来，图片是有宽、高比例的，一个确定了，另一个也固定了。
例如，指定img-box的宽度为285px，div内部图片的尺寸是宽度 1200px 高度是800px，图片嵌入到div内部，设置宽度为100%，则img-box的高度是由图片决定
所以为了保证图片的显示，最好是统一尺寸的。
object-fit： https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit 指定可替换元素（例如：或）的内容应该如何适应到其使用高度和宽度确定的框。比较常见的cover 被替换的内容在保持其宽高比的同时填充元素的整个内容框。如果对象的宽高比与内容框不相匹配，该对象将被剪裁以适应内容框。
object-position：图片等内容在内容框中的位置
也可设置固定尺寸 285*280 卡片整体宽度 730

完整代码

代码是完整的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image in Div</title>
<style>
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
  text-decoration: none;
  color: hsl(0, 0%, 100%);
}
.article-card {
    max-width: 730px;
    display: grid;
    grid-template-columns: 285px minmax(300px,445px);
    border-radius: 10px;
    box-shadow: 6px 6px 5px hsla(0, 0%, 0%, 0.02), 25px 25px 20px hsla(0, 0%, 0%, 0.03), 100px 100px 80px hsla(0, 0%, 0%, 0.05);
}
.img-card{
    overflow: hidden;
    border-radius: 10px 0 0 10px;
}
.img-card>img{
    width: 285px;
    height: 280px;
    transition: all 0.5s ease;
    object-fit: cover;
    object-position: left;
}
.article-card:hover img {
    transform: scale(1.1);
}
.article-content{
    background: hsl(0, 0%, 100%);
    padding: 32px 40px;
    border-radius: 0 10px 10px 0;
}
.article-title{
    font-size: 20px;
    color: hsl(217, 19%, 35%);
    margin-bottom: 12px;
    line-height: 1.4;
}
.article-text {
    color: hsl(214, 17%, 51%);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 18px;
}
</style>
<script>

</script>
</head>
<body>

<div class="article-card">
    <div class="img-card">
        <img src="https://bpic.588ku.com/back_origin_min_pic/19/10/22/4a760f73d07dd0e25a17430847f3bee0.jpg" alt="" class="article-banner">
    </div>
    <div class="article-content">
        <a href="#">
            <h3 class="article-title">乌鸡白凤丸</h3>
        </a>
        <p class="article-desc">
            "这是中医的简介内容这是中医的简介内容这是中医的简介内容这是中医的简介内容这是中医的简介内容这是中医的简介内容这是中医的简介内容..."
        </p>
    </div>
</div>

</body>
</html>