实现美图官网活动卡片——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>