抄作业–我的设备

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

☆版权☆

* 网站名称:obaby@mars
* 网址:https://h4ck.org.cn/
* 个性:https://oba.by/
* 本文标题: 《抄作业–我的设备》
* 本文链接:https://h4ck.org.cn/2024/07/17545
* 短链接:https://oba.by/?p=17545
* 转载文章请标明文章来源,原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。


You may also like

62 comments

        1. 公主 Queen 
          Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

          早就发现了,想抠图,看着这一大片。我就犯愁了,然后就放弃了。
          你的那个比我的精致多了。

            1. 公主 Queen 
              Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

              收费哒~~处理效果还行,批量下载发现是收费哒

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      要塞也很容易,目前大约累计还有几百部电影在硬盘上躺着还没看。
      正在边看,边删除。

      1.   Level 6
        Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn浙江省杭州市 华数

        在售/停售的状态后面手动更新么?我是懒得动。

  1. Level 5
    Firefox 127 Firefox 127 Windows 10 Windows 10 cn云南省丽江市 电信

    这个页面之前在好几个博主那里见到过,他们CSS很酷,我也心动了,但是最后放弃了,东再整博客内容页面又多了

  2. Level 1
    Safari 17 Safari 17 Mac OS X 10.15 Mac OS X 10.15 cn贵州省贵阳市 移动

    配置挺不错 跑代码有点浪费了呀 还有这个在售 是准备干票大的吗

  3.  Level 2
    Google Chrome 126 Google Chrome 126 Windows 11 Windows 11 cn湖北省武汉市 联通

    静态站好像也有类似的,但是我没几个设备,所以就懒得抄了哈哈

  4.  Level 5
    Google Chrome 107 Google Chrome 107 Android 14 Android 14 cn北京市 移动

    找kimi给我创建一套代码,抄袭下,主要是我没啥设备。我们家最大的设备就是电视,除非把空调冰箱洗衣机加上, 应该叫电子设备才对。一旦贴出,大家岂不是暴露了我是贫农。

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      我这里哪些电子设备也很多淘汰了的,卖吧不值钱。就留着继续用了。

  5.  Level 3
    Google Chrome 126 Google Chrome 126 Windows 11 Windows 11 cn辽宁省沈阳市沈河区 电信

    现在都弄这个页面了,但都没啥创新,可以弄个“我在使用的软件”、“我在追的剧”、“我在玩的游戏”

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      不是啊,哈哈哈。
      我的是 nai.dog
      以及 pussy.dog

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      mbp 也很好用啊,干嘛要换呢~~
      最起码想带的时候是可以带的。

      1. Level 4
        Firefox 128 Firefox 128 Windows 10 Windows 10 cn湖北省武汉市 电信

        MBP每天使用不超过30分钟
        近期每天晚上回家写个日报
        偶尔回复下留言~欧了

  6. Level 3
    Microsoft Edge 126 Microsoft Edge 126 Windows 10 Windows 10 cn重庆市 移动

    还得是我的博主朋友们啊,个个都身怀绝技,那么多设备。
    顺便说一下,在 nai.dog 这个域名提交评论,会跳转到 lang.ma,然后评论提交不了。

    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn山东省青岛市 联通

      我也不知道为啥奶狗会加载 langma 的地址,哈哈哈

  7.  Level 4
    Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn河北省石家庄市 电信

    3台mac mini很抢眼,好奇你用mac mini主要做什么呢?当主机还是服务器还是nas?

    另外,咨询你个问题哈,mac电脑的抓包软件哪个比较好用?我最近需要从同行的小程序里扒一些图片素材。

    1. 公主 Queen 
      Google Chrome 126 Google Chrome 126 Android 10 Android 10 cn山东省临沂市 联通

      一台2024日常开发,现在偶尔用
      一台12款服务器装的ubuntu
      一台14连投影仪
      推荐charles,短期用的话试用版就够了。嘻嘻

  8. Level 1
    Microsoft Edge 105 Microsoft Edge 105 Android 6.0.1 Android 6.0.1 cn广东省茂名市 电信

    抄作业很爽
    看到好看的直接复制粘贴
    比如,这个评论框上的美女挺不错的

  9. Level 2
    Google Chrome 124 Google Chrome 124 Windows 10 Windows 10 cn山东省青岛市 联通

    游戏高级玩家设备哈。独立显卡。
    mac迷你那个m2 也是不错的。不过二手我看了价格都贵。有正版mac系统也不错。
    垃圾佬只看二手。
    路过。

    1. 公主 Queen 
      Google Chrome 126 Google Chrome 126 Android 10 Android 10 cn山东省青岛市 联通

      这也没什么哒 群晖的性价比真的挺一般的,黑裙更具备性价比。

  10. Level 4
    Microsoft Edge 126 Microsoft Edge 126 Windows 10 Windows 10 cn江苏省宿迁市 移动

    你的设备还真不少呢。前天看到的时候,也有想搞的冲动,但是自己设备太少,想想还是算了吧。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注