游戏娱乐『Game/Funny』

抄作业–我的设备

69 条评论

今天一个偶然的机会，看到了一个页面，叫做我的设备。感觉还蛮有意思的，整个页面布局类似于商城的样式，下面依次排列的是设备列表。博主也给出了相关的代码，本来是想着再建个魔板页面抄作业的，抄来抄去抄的有点恶心，于是直接在页面编辑代码的方式把作业给抄了。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://obaby.org.cn/
* 个性：https://oba.by/
* 本文标题： 《抄作业–我的设备》
* 本文链接：https://obaby.org.cn/2024/07/17545
* 短链接：https://oba.by/?p=17545
* 转载文章请标明文章来源，原文标题以及原文链接。请遵从 《署名-非商业性使用-相同方式共享 2.5 中国大陆 (CC BY-NC-SA 2.5 CN) 》许可协议。

obaby

obaby

爱好广泛的火星小妖精，有问题欢迎留言交流啊~(✪ω✪) 爬虫类工具请先点击这个链接查看用法https://oba.by/?p=12240 闺蜜圈APP下载 https://guimiquan.cn

You may also like

69 comments

        1. 公主 Queen 
          Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

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

          回复
            2. 公主 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 7
        Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn中国–浙江–杭州 华数

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

        回复
  5. Level 5
    Firefox 127 Firefox 127 Windows 10 Windows 10 cn中国–云南–丽江 电信

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

    回复
    1. 公主 Queen 
      Google Chrome 118 Google Chrome 118 Mac OS X 10.15 Mac OS X 10.15 cn中国–山东–青岛 联通

      新一轮抄作业？呆哥已经抄完了，哈哈哈

      回复
  6. Level 4
    Safari 17 Safari 17 Mac OS X 10.15 Mac OS X 10.15 cn中国–贵州–贵阳 移动

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

    回复
    1. 公主 Queen 
      Google Chrome 120 Google Chrome 120 Windows 10 Windows 10 cn中国–山东–临沂 联通

      体积小，比较方便，找个地方就塞进去了

      回复
  8. Level 3
    Google Chrome 126 Google Chrome 126 Windows 11 Windows 11 cn中国–湖北–武汉 联通

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

    回复
  9.  Level 6
    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中国–山东–青岛 联通

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

      回复
  10.  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分钟
        近期每天晚上回家写个日报
        偶尔回复下留言~欧了

        回复
  14.  Level 4
    Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn中国–江苏–连云港 移动

    win游戏本➕mac码代码，体验一级棒 rofl

    回复
  16. Level 4
    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 的地址，哈哈哈

      回复
  17.  Level 5
    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，短期用的话试用版就够了。嘻嘻

      回复
    2.  Level 3
      Safari 17 Safari 17 Mac OS X 10.15 Mac OS X 10.15 cn中国–香港 Amazon数据中心

      那要看你做什么用呀
      Fiddler可以写脚本，实现自动篡改请求内容
      Burp可以安装Java和Python写的插件，还可以转发请求到Xray呀
      Charles可以参考知了大神破姐呀
      各有各的好处呀 dance dance

      回复
      1.  Level 5
        Google Chrome 126 Google Chrome 126 Mac OS X 10.15 Mac OS X 10.15 cn中国–河北–石家庄 电信

        又打开了新世界，「知了大神破姐」是什么意思？方便给个链接吗？

        回复
  18.  Level 2
    Microsoft Edge 105 Microsoft Edge 105 Android 6.0.1 Android 6.0.1 cn中国–广东–茂名 电信

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

    回复
  19. Level 3
    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中国–山东–青岛 联通

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

      回复
  22. Level 4
    Microsoft Edge 126 Microsoft Edge 126 Windows 10 Windows 10 cn中国–江苏–宿迁 移动

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

    回复
  24. Level 4
    Google Chrome 86 Google Chrome 86 Windows 10 Windows 10 cn中国–山西–太原 移动

    可以学学原页面，增加一个 淘宝客 的引流链接，另外，增加回复时 不同设备的内容引用，用以区分大家针对说明的是哪个产品。https://blog.zhheo.com/equipment/

    回复
    1. 公主 Queen 
      Google Chrome 126 Google Chrome 126 Android 10 Android 10 cn中国–山东–青岛 电信

      本来也就玩玩 没准备当正事 引流能有几个人点，没啥意思。自嗨而已啦。

      回复

发表回复

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

Close Menu