❌

阅读视图

发现新文章，点击刷新页面。

抄作业–我的设备

✇obaby@mars
作者 obaby

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

最终效果：

页面地址：

※我的设备※

页面文本：

<h3 class="entry-title">家庭娱乐</h3>
    <div class="equipment-item-content">
     
        <div class="equipment-item-content-item">
            <div class="equipment-item-content-item-cover">
                <img class="equipment-item-content-item-image" alt="苹果"
                    src="https://h4ck.org.cn/wp-content/uploads/2024/07/Jietu20240711-134623.jpg">
            </div>
            <div class="equipment-item-content-item-info">
                <div class="equipment-item-content-item-name">
                    群晖（Synology）DS420+ 
                </div>
                <div class="equipment-item-content-item-specification">
                </div>
                <div class="equipment-item-content-item-description">
                    规格：四盘NAS系统：DSM处理器：intel核心数：双核类型：家庭网络存储网口速率：千兆内存容量：2GB
                </div>
                <div class="equipment-item-content-item-toolbar">
                    <div class="equipment-item-content-item-toolbar">
                        <a href="https://item.jd.com/100014227684.html#none" target="_blank">
                        <input class="button-primary button-small" type="button" value="已停售" >
                    </a>
                    </div>                    
                </div>
            </div>
        </div>
        
        <div class="equipment-item-content-item">
            <div class="equipment-item-content-item-cover">
                <img class="equipment-item-content-item-image" alt="苹果"
                    src="https://h4ck.org.cn/wp-content/uploads/2024/07/Jietu20240711-134910.jpg">
            </div>
            <div class="equipment-item-content-item-info">
                <div class="equipment-item-content-item-name">
                    群晖（Synology）DS416j 
                </div>
                <div class="equipment-item-content-item-specification">
                </div>
                <div class="equipment-item-content-item-description">
                    最大支持容量40 TB (10 TB HDD x 4) (容量会随 RAID种类而异)
                </div>
                <div class="equipment-item-content-item-toolbar">
                    <div class="equipment-item-content-item-toolbar">
                        <a href="https://item.jd.com/2436399.html#product-detail" target="_blank">
                        <input class="button-primary button-small" type="button" value="已停售" >
                    </a>
                    </div>                    
                </div>
            </div>
        </div>
        

        <div class="equipment-item-content-item">
            <div class="equipment-item-content-item-cover">
                <img class="equipment-item-content-item-image" alt="苹果"
                    src="https://h4ck.org.cn/wp-content/uploads/2024/07/u55586516742018280fm253fmtautoapp120fJPEG.webp">
            </div>
            <div class="equipment-item-content-item-info">
                <div class="equipment-item-content-item-name">
                    海信60E3F 60英寸 4K电视
                </div>
                <div class="equipment-item-content-item-specification">
                </div>
                <div class="equipment-item-content-item-description">
                    60英寸 4K超高清智慧语音 超薄悬浮全面屏 智能液晶教育彩电电视机支持投屏
                </div>
                <div class="equipment-item-content-item-toolbar">
                    <div class="equipment-item-content-item-toolbar">
                        <a href="https://item.jd.com/100007300763.html" target="_blank">
                        <input class="button-primary button-small" type="button" value="已停售" >
                    </a>
                    </div>                    
                </div>
            </div>
        </div>


        <div class="equipment-item-content-item">
            <div class="equipment-item-content-item-cover">
                <img class="equipment-item-content-item-image" alt="苹果"
                    src="https://h4ck.org.cn/wp-content/uploads/2024/07/Jietu20240711-135439.jpg">
            </div>
            <div class="equipment-item-content-item-info">
                <div class="equipment-item-content-item-name">
                    明基（BenQ）TH670 
                </div>
                <div class="equipment-item-content-item-specification">
                </div>
                <div class="equipment-item-content-item-description">
                    1080P分辨率 3000流明 
                </div>
                <div class="equipment-item-content-item-toolbar">
                    <div class="equipment-item-content-item-toolbar">
                        <a href="https://item.jd.com/2079351.html" target="_blank">
                        <input class="button-primary button-small" type="button" value="已停售" >
                    </a>
                    </div>                    
                </div>
            </div>
        </div>

        <div class="equipment-item-content-item">
            <div class="equipment-item-content-item-cover">
                <img class="equipment-item-content-item-image" alt="苹果"
                    src="https://h4ck.org.cn/wp-content/uploads/2024/07/u323258841206501867fm253fmtautoapp138fJPEG.webp">
            </div>
            <div class="equipment-item-content-item-info">
                <div class="equipment-item-content-item-name">
                    美硕电动幕布
                </div>
                <div class="equipment-item-content-item-specification">
                </div>
                <div class="equipment-item-content-item-description">
                    美硕（MEISHUO） 电动幕布4K3D
                </div>
                <div class="equipment-item-content-item-toolbar">
                    <div class="equipment-item-content-item-toolbar">
                        <a href="https://item.jd.com/2079351.html" target="_blank">
                        <input class="button-primary button-small" type="button" value="已停售" >
                    </a>
                    </div>                    
                </div>
            </div>
        </div>

        <div class="equipment-item-content-item">
            <div class="equipment-item-content-item-cover">
                <img class="equipment-item-content-item-image" alt="苹果"
                    src="https://h4ck.org.cn/wp-content/uploads/2024/07/112017_SP708-silver.jpeg">
            </div>
            <div class="equipment-item-content-item-info">
                <div class="equipment-item-content-item-name">
                    iPad Air2
                </div>
                <div class="equipment-item-content-item-specification">
                </div>
                <div class="equipment-item-content-item-description">
                    iPad Air 2是美国苹果公司（Apple）于2014年10月17日在美国库比蒂诺总部发布的一款平板电脑
                </div>
                <div class="equipment-item-content-item-toolbar">
                    <div class="equipment-item-content-item-toolbar">
                        <a href="https://support.apple.com/zh-cn/112017" target="_blank">
                        <input class="button-primary button-small" type="button" value="已停售" >
                    </a>
                    </div>                    
                </div>
            </div>
        </div>

        <div class="equipment-item-content-item">
            <div class="equipment-item-content-item-cover">
                <img class="equipment-item-content-item-image" alt="苹果"
                    src="https://h4ck.org.cn/wp-content/uploads/2024/07/Jietu20240711-142647.jpg">
            </div>
            <div class="equipment-item-content-item-info">
                <div class="equipment-item-content-item-name">
                    dostyle SD306 2.1音箱
                </div>
                <div class="equipment-item-content-item-specification">
                </div>
                <div class="equipment-item-content-item-description">
                    dostyle SD306重低音 2.1音箱音响低音炮 42W大功率 6.5吋低音
                </div>
                <div class="equipment-item-content-item-toolbar">
                    <div class="equipment-item-content-item-toolbar">
                        <a href="https://item.jd.com/747123.html" target="_blank">
                        <input class="button-primary button-small" type="button" value="已停售" >
                    </a>
                    </div>                    
                </div>
            </div>
        </div>

        <div class="equipment-item-content-item">
            <div class="equipment-item-content-item-cover">
                <img class="equipment-item-content-item-image" alt="苹果"
                    src="https://h4ck.org.cn/wp-content/uploads/2024/07/Jietu20240711-142934.jpg">
            </div>
            <div class="equipment-item-content-item-info">
                <div class="equipment-item-content-item-name">
                    OneOdio头戴式6.5线监听耳机
                </div>
                <div class="equipment-item-content-item-specification">
                </div>
                <div class="equipment-item-content-item-description">
                    OneOdio头戴式电钢琴电子琴专用6.5头有线监听耳机吉他音响效果器电架子鼓声卡通用长线3.5mm Pro 10玫瑰金
                </div>
                <div class="equipment-item-content-item-toolbar">
                    <div class="equipment-item-content-item-toolbar">
                        <a href="https://item.jd.com/10025625310218.html" target="_blank">
                        <input class="button-primary button-small" type="button" value="在售" >
                    </a>
                    </div>                    
                </div>
            </div>
        </div>


    </div>

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

❌