实现美图官网活动卡片——html、css

最新推荐文章于 2024-06-14 09:00:00 发布

玄东林檎

最新推荐文章于 2024-06-14 09:00:00 发布

阅读量518

点赞数 2

分类专栏：学习前端文章标签： css html css3

本文链接：https://blog.csdn.net/u013430418/article/details/125770348

版权

学习前端专栏收录该内容

33 篇文章 10 订阅

订阅专栏

实现美图官网活动卡片——html、css

在这里插入图片描述
通过使用HTML+CSS实现美图官网的卡片样式

单行文字溢出不换行结尾省略号
在这里插入图片描述

p{
	whhite-space:normal;
	text-overflow:ellipsis;
	overflow:hidden;
}

多行文字溢出换行，结尾溢出用省略号代替
在这里插入图片描述

.text{
    /* 多行文本省略号 */
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
   /* 控制到第几行*/
    -webkit-line-clamp: 3;
    }

参看详情的右侧箭头
箭头使用的css的背景方法，设置一个盒子，将箭头图片导入到盒子的背景，进而达到效果
在这里插入图片描述

i{
    display: inline-block;
    width: 28px;
    height: 6px;
    margin-left: 9px;
    background:url(../images/下载.png);
}

来看看整体

img{
    /* 图片大小 */
    width: 470.57px;
}
#meitu{
    /* 总体细节 */
    display: block;
    line-height: 1.5;
    background-color: #fff;
    width: 470.57px;
    margin-bottom: 40px;
    border: 1px solid white;
}
#meitu:hover{
    border: 1px solid rgb(230,230,230);
    transition: all.3s;
}
.firmwork{
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1 0;
    flex: 1 0;
    padding: 0.6rem 0.66rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.title{
    /* 中间标题 */
    font-size: 20px;
    color: #333;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 20px;
}

.text{
    /* 中间文本 */
    color: rgb(112,112,112);
    font-size: 14px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    /* 多行文本省略号 */
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-align: justify;
}
.action, .action>span{
    height: 30px;
    line-height: 30px;
}
.date{
    /* 结尾日期 */
    font-size: 16px;
    color: #b4b4b4;
}
.link{
    /* 查看详情 */
    color: #f5275f;
    font-size: 16px;
    float: right;
}
i{
    display: inline-block;
    width: 28px;
    height: 6px;
    margin-left: 9px;
    background:url(../images/下载.png);
}

<body>
    <div id="meitu">
        <a href="#" class="p0">
            <img src="./images/1568473126.97.jpg" alt="美图秀秀带动创作者共创潮流美学，加码平台内容竞争力" class="p1">
            <div class="firmwork">
                <span class="title">
                    美图宝石新品“像素记忆”上线 影像科技创造独一无二数字作品
                </span>
                <p class="text">
                    6月23日，美图公司旗下数字收藏品牌“美图宝石”首次对外发售，198枚
                    以“像素记忆”为主题的数字收藏作品，在致敬像素文化诞生50周年的同时，
                    也为广大用户呈现了艺术和未来美学情怀，用户拍照参与共创的互动玩法，
                    展示了该作品独一无二的体验价值。
                </p>
                <div class="action">
                    <span class="date">2022-06-23</span>
                    <span class="link">
                        查看详情
                        <i class="icon"></i>
                    </span>
                </div>
            </div>
        </a>
    </div>
</body>