今天一个偶然的机会,看到了一个页面,叫做我的设备。感觉还蛮有意思的,整个页面布局类似于商城的样式,下面依次排列的是设备列表。博主也给出了相关的代码,本来是想着再建个魔板页面抄作业的,抄来抄去抄的有点恶心,于是直接在页面编辑代码的方式把作业给抄了。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
69 comments
一起抄
我看你也抄完了已经~~好迅速
细心的给每一个图片扣了图
https://dai.ge/about.php
早就发现了,想抠图,看着这一大片。我就犯愁了,然后就放弃了。
你的那个比我的精致多了。
其实我是用的稿定一键抠图
酱紫,我也试试
收费哒~~处理效果还行,批量下载发现是收费哒
设备真多 12T真的用得完吗
要塞也很容易,目前大约累计还有几百部电影在硬盘上躺着还没看。
正在边看,边删除。
再来《我的丝袜》
这,快消品。哈哈哈。没啥意义啊
在售/停售的状态后面手动更新么?我是懒得动。
手动的 在售的不多 哈哈哈
详述讲述一下它从来到没。哈哈哈
这,等它破了自然就没啦。
你的设备有点多呀,好坏必须安排一下 有点意思
来吧 抄起来
这个页面之前在好几个博主那里见到过,他们CSS很酷,我也心动了,但是最后放弃了,东再整博客内容页面又多了
新一轮抄作业?呆哥已经抄完了,哈哈哈
不折腾这个了哈
配置挺不错 跑代码有点浪费了呀 还有这个在售 是准备干票大的吗
没想好怎么用 也没广告费
找商家要
好多macmini
体积小,比较方便,找个地方就塞进去了
攒攒钱买个,刚才回复错了好尴尬
没事 哈哈哈 不要在意 给你修改了
静态站好像也有类似的,但是我没几个设备,所以就懒得抄了哈哈
攒攒钱买个
—回复错了 请忽略
找kimi给我创建一套代码,抄袭下,主要是我没啥设备。我们家最大的设备就是电视,除非把空调冰箱洗衣机加上, 应该叫电子设备才对。一旦贴出,大家岂不是暴露了我是贫农。
我这里哪些电子设备也很多淘汰了的,卖吧不值钱。就留着继续用了。
现在都弄这个页面了,但都没啥创新,可以弄个“我在使用的软件”、“我在追的剧”、“我在玩的游戏”
嗯嗯,其实也有啊,我是同步的豆瓣的。
https://h4ck.org.cn/movies
挺好看的呀
额,刚发现定时任务又不跑了
这个 cn 的奶狗域名不是你的?
不是啊,哈哈哈。
我的是 nai.dog
以及 pussy.dog
MacBookPro 2020,16G+512 ,基本不带出门…
想换个 MacMini
mbp 也很好用啊,干嘛要换呢~~
最起码想带的时候是可以带的。
MBP每天使用不超过30分钟
近期每天晚上回家写个日报
偶尔回复下留言~欧了
酱紫使用频率确实不高呢~~
我抄成功了 ,不过是 在baby的帮助下~
嘻嘻,成功就好
win游戏本➕mac码代码,体验一级棒
现在我是 windows 用的更多一点点
感谢姐姐分享,我决定一起抄~
抄吧,我也是抄来的,嘻嘻
还得是我的博主朋友们啊,个个都身怀绝技,那么多设备。
顺便说一下,在 nai.dog 这个域名提交评论,会跳转到 lang.ma,然后评论提交不了。
我也不知道为啥奶狗会加载 langma 的地址,哈哈哈
3台mac mini很抢眼,好奇你用mac mini主要做什么呢?当主机还是服务器还是nas?
另外,咨询你个问题哈,mac电脑的抓包软件哪个比较好用?我最近需要从同行的小程序里扒一些图片素材。
一台2024日常开发,现在偶尔用
一台12款服务器装的ubuntu
一台14连投影仪
推荐charles,短期用的话试用版就够了。嘻嘻
那要看你做什么用呀
Fiddler可以写脚本,实现自动篡改请求内容
Burp可以安装Java和Python写的插件,还可以转发请求到Xray呀
Charles可以参考知了大神破姐呀
各有各的好处呀
又打开了新世界,「知了大神破姐」是什么意思?方便给个链接吗?
https://zhile.io/2017/07/07/charles-proxy-usage-and-license.html
之前破解教程的文章貌似被删掉了,不过知了大神留下了激活码
感谢!宝藏博客呀~
抄作业很爽
看到好看的直接复制粘贴
比如,这个评论框上的美女挺不错的
欢迎抄
扭得真好看
游戏高级玩家设备哈。独立显卡。
mac迷你那个m2 也是不错的。不过二手我看了价格都贵。有正版mac系统也不错。
垃圾佬只看二手。
路过。
mac 做工比较精致,性价比也还 ok。
嘿嘿,我的设备,整个页面挺用心
所以好东西还是得抄来的。嘻嘻
手持黑群晖的我,不太好意思说话了
这也没什么哒 群晖的性价比真的挺一般的,黑裙更具备性价比。
你的设备还真不少呢。前天看到的时候,也有想搞的冲动,但是自己设备太少,想想还是算了吧。
乱七八糟的东西比较多 有的都十几年了
滑翔机标志可以试一试使用SVG
https://upload.wikimedia.org/wikipedia/commons/4/45/Glider.svg
可以学学原页面,增加一个 淘宝客 的引流链接,另外,增加回复时 不同设备的内容引用,用以区分大家针对说明的是哪个产品。https://blog.zhheo.com/equipment/
本来也就玩玩 没准备当正事 引流能有几个人点,没啥意思。自嗨而已啦。