今天一个偶然的机会，看到了一个页面，叫做我的设备。感觉还蛮有意思的，整个页面布局类似于商城的样式，下面依次排列的是设备列表。博主也给出了相关的代码，本来是想着再建个魔板页面抄作业的，抄来抄去抄的有点恶心，于是直接在页面编辑代码的方式把作业给抄了。css 样式加到了页面的自定义 css 中。

最终效果：

页面地址：

页面文本：

家庭娱乐

群晖（Synology）DS420+

规格：四盘NAS系统：DSM处理器：intel核心数：双核类型：家庭网络存储网口速率：千兆内存容量：2GB

群晖（Synology）DS416j

最大支持容量40 TB (10 TB HDD x 4) (容量会随 RAID种类而异)

海信60E3F 60英寸 4K电视

60英寸 4K超高清智慧语音 超薄悬浮全面屏 智能液晶教育彩电电视机支持投屏

明基（BenQ）TH670

1080P分辨率 3000流明

美硕电动幕布

美硕（MEISHUO） 电动幕布4K3D

iPad Air2

iPad Air 2是美国苹果公司（Apple）于2014年10月17日在美国库比蒂诺总部发布的一款平板电脑

dostyle SD306 2.1音箱

dostyle SD306重低音 2.1音箱音响低音炮 42W大功率 6.5吋低音

OneOdio头戴式6.5线监听耳机

OneOdio头戴式电钢琴电子琴专用6.5头有线监听耳机吉他音响效果器电架子鼓声卡通用长线3.5mm Pro 10玫瑰金

css样式：

/* 我的装备 */
.equipment-item-content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -8px;
}

.equipment-item-content-item {
width: calc(25% – 12px);
border-radius: 12px;
border: 1px solid #000;
overflow: hidden;
margin: 8px 6px;
background: #fff;
;
box-shadow: 0 8px 16px -4px #2c2d300;
min-height: 400px;
position: relative;
}

@media screen and (max-width: 1200px) {
.equipment-item-content-item {
width: calc(50% – 12px);
}
}

@media screen and (max-width: 768px) {
.equipment-item-content-item {
width: 100%;
}
}

.equipment-item-content-item-info {
padding: 8px 16px 16px 16px;
margin-top: 12px;
}

.equipment-item-content-item-name {
font-size: 18px;
font-weight: bold;
line-height: 1;
margin-bottom: 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
width: fit-content;
}

.equipment-item-content-item-name:hover {
color: #425AEF;
}

.equipment-item-content-item-specification {
font-size: 12px;
color: rgba(60, 60, 67, 0.8);
line-height: 1;
margin-bottom: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.equipment-item-content-item-description {
line-height: 20px;
color: rgba(60, 60, 67, 0.8);
height: 60px;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 14px;
}

a.equipment-item-content-item-link {
font-size: 12px;
background: #9999992b;
padding: 4px 8px;
border-radius: 8px;
cursor: pointer;
}

a.equipment-item-content-item-link:hover {
background: #425AEF;
color: #fff;
}

h2.equipment-item-title {
line-height: 1;
}

.equipment-item-description {
line-height: 1;
margin: 4px 0 8px 0;
color: rgba(60, 60, 67, 0.8);
}

.equipment-item-content-item-cover {
width: 100%;
height: 200px;
background: #f7f7f9;
display: flex;
justify-content: center;
}

img.equipment-item-content-item-image {
object-fit: cover;
height: 100%;
}

div#equipment {
margin-top: 26px;
}

.equipment-item-content-item-toolbar {
display: flex;
justify-content: space-between;
position: absolute;
bottom: 12px;
left: 0;
width: 100%;
padding: 0 16px;
}

a.bber-reply {
cursor: pointer;
}

参考链接：https://www.naigou.cn/120.html