给你的网站添加一个我的设备页面

演示图

图片[1]-给你的网站添加一个我的设备页面-大海博客

这是奶狗参考张洪大佬的博客里的我的设备(https://blog.zhheo.com/equipment/)进行二次修改的一个小代码,分享出来给各位做个参考。

代码

Html代码

<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://q.ttimg.cn/pic/2024/04/199fc58e68889c74.jpg">
</div>
<div class="equipment-item-content-item-info">
<div class="equipment-item-content-item-name">
小米12S Pro
</div>
<div class="equipment-item-content-item-specification">
</div>
<div class="equipment-item-content-item-description">
小米12S Pro是一款搭载骁龙8+ Gen1处理器、6.73英寸2K AMOLED E5曲面屏(120Hz)、50MP徕卡三摄、120W有线快充+50W无线快充的高性能旗舰手机,具备优异影像系统与强大续航能力。
</div>
<div class="equipment-item-content-item-toolbar">
<div class="equipment-item-content-item-toolbar">
<input class="button-primary button-small" type="button" value="已停售" >
</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="dell"
src="https://q.ttimg.cn/pic/2024/04/7865dac6a5a95978.jpg">
</div>
<div class="equipment-item-content-item-info">
<div class="equipment-item-content-item-name">
戴尔G15 5511
</div>
<div class="equipment-item-content-item-specification">
</div>
<div class="equipment-item-content-item-description">
配备第11代酷睿i7-11800H处理器、RTX 3060显卡、16GB内存、512GB SSD、165Hz电竞屏、双风扇散热、AWCC智控中心的15.6英寸游戏笔记本,主打性能与耐用设计。
</div>
<div class="equipment-item-content-item-toolbar">
<div class="equipment-item-content-item-toolbar">
<input class="button-primary button-small" type="button" value="已停售" >
</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="hp"
src="https://q.ttimg.cn/pic/2024/04/48d73e3424f7ed56.jpg">
</div>
<div class="equipment-item-content-item-info">
<div class="equipment-item-content-item-name">
惠普400G1DM
</div>
<div class="equipment-item-content-item-specification">
</div>
<div class="equipment-item-content-item-description">
这是一款小巧台式机,适合作为家用小服务器,搭载低功耗i5 4590t处理器,具备扩展内存/硬盘、多接口、无线网卡,支持PCIe扩展卡,预装Win7/8,节能高效。
</div>
<div class="equipment-item-content-item-toolbar">
<div class="equipment-item-content-item-toolbar">
<input class="button-primary button-small" type="button" value="已停售" >
</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="game"
src="https://q.ttimg.cn/pic/2024/04/6e91feed5f3e3038.jpg">
</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">
飞智冰原狼一代手柄是一款无线多模游戏控制器,支持有线、蓝牙、2.4G连接,具备背键宏设定、霍尔线性扳机、体感功能,兼容PC/Switch/手机平台,以其高性价比、精确操控与良好兼容性备受玩家青睐。
</div>
<div class="equipment-item-content-item-toolbar">
<div class="equipment-item-content-item-toolbar">
<input class="button-primary button-small" type="button" value="已停售" >
</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="game"
src="https://pixl.decathlon.com.cn/p2564595/k$38004ed25ccf4872cc150ce9ce7a1b43/content.webp">
</div>
<div class="equipment-item-content-item-info">
<div class="equipment-item-content-item-name">
迪卡侬 Riverside 500
</div>
<div class="equipment-item-content-item-specification">
</div>
<div class="equipment-item-content-item-description">
旅行自行车Riverside 500设计用于在多种道路和小径上进行短距离到中距离的骑行。Riverside 500采用铝制车架,轻盈坚固
</div>
<div class="equipment-item-content-item-toolbar">
<div class="equipment-item-content-item-toolbar">
<input class="button-primary button-small" type="button" value="详情" onclick="window.location.href='https://www.decathlon.com.cn/product-detail?dsm_code=145696&model_code=965304&category_id=null&product_name=%E6%97%85%E8%A1%8C%E8%87%AA%E8%A1%8C%E8%BD%A6Riverside%20500&listFilter=%7B%22selectFilter%22%3A%7B%22sale_price%22%3A%5B2.9,12999.9%5D%7D,%22expandData%22%3A%5B%5D,%22category_id%22%3Anull%7D'">
</div>
</div>
</div>
</div>
</div>
<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://q.ttimg.cn/pic/2024/04/199fc58e68889c74.jpg">
        </div>
        <div class="equipment-item-content-item-info">
            <div class="equipment-item-content-item-name">
                小米12S Pro
            </div>
            <div class="equipment-item-content-item-specification">
            </div>
            <div class="equipment-item-content-item-description">
                小米12S Pro是一款搭载骁龙8+ Gen1处理器、6.73英寸2K AMOLED E5曲面屏(120Hz)、50MP徕卡三摄、120W有线快充+50W无线快充的高性能旗舰手机,具备优异影像系统与强大续航能力。
            </div>
            <div class="equipment-item-content-item-toolbar">
                <div class="equipment-item-content-item-toolbar">
                    <input class="button-primary button-small" type="button" value="已停售" >
                </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="dell"
                src="https://q.ttimg.cn/pic/2024/04/7865dac6a5a95978.jpg">
        </div>
        <div class="equipment-item-content-item-info">
            <div class="equipment-item-content-item-name">
                戴尔G15 5511
            </div>
            <div class="equipment-item-content-item-specification">
            </div>
            <div class="equipment-item-content-item-description">
                配备第11代酷睿i7-11800H处理器、RTX 3060显卡、16GB内存、512GB SSD、165Hz电竞屏、双风扇散热、AWCC智控中心的15.6英寸游戏笔记本,主打性能与耐用设计。
            </div>
            <div class="equipment-item-content-item-toolbar">
                <div class="equipment-item-content-item-toolbar">
                    <input class="button-primary button-small" type="button" value="已停售" >
                </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="hp"
                src="https://q.ttimg.cn/pic/2024/04/48d73e3424f7ed56.jpg">
        </div>
        <div class="equipment-item-content-item-info">
            <div class="equipment-item-content-item-name">
                惠普400G1DM
            </div>
            <div class="equipment-item-content-item-specification">
            </div>
            <div class="equipment-item-content-item-description">
                这是一款小巧台式机,适合作为家用小服务器,搭载低功耗i5 4590t处理器,具备扩展内存/硬盘、多接口、无线网卡,支持PCIe扩展卡,预装Win7/8,节能高效。
            </div>
            <div class="equipment-item-content-item-toolbar">
                <div class="equipment-item-content-item-toolbar">
                    <input class="button-primary button-small" type="button" value="已停售" >
                </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="game"
                src="https://q.ttimg.cn/pic/2024/04/6e91feed5f3e3038.jpg">
        </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">
                飞智冰原狼一代手柄是一款无线多模游戏控制器,支持有线、蓝牙、2.4G连接,具备背键宏设定、霍尔线性扳机、体感功能,兼容PC/Switch/手机平台,以其高性价比、精确操控与良好兼容性备受玩家青睐。
            </div>
            <div class="equipment-item-content-item-toolbar">
                <div class="equipment-item-content-item-toolbar">
                    <input class="button-primary button-small" type="button" value="已停售" >
                </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="game"
                src="https://pixl.decathlon.com.cn/p2564595/k$38004ed25ccf4872cc150ce9ce7a1b43/content.webp">
        </div>
        <div class="equipment-item-content-item-info">
            <div class="equipment-item-content-item-name">
                迪卡侬 Riverside 500
            </div>
            <div class="equipment-item-content-item-specification">
            </div>
            <div class="equipment-item-content-item-description">
                旅行自行车Riverside 500设计用于在多种道路和小径上进行短距离到中距离的骑行。Riverside 500采用铝制车架,轻盈坚固
            </div>
            <div class="equipment-item-content-item-toolbar">
                <div class="equipment-item-content-item-toolbar">
                    <input class="button-primary button-small" type="button" value="详情" onclick="window.location.href='https://www.decathlon.com.cn/product-detail?dsm_code=145696&model_code=965304&category_id=null&product_name=%E6%97%85%E8%A1%8C%E8%87%AA%E8%A1%8C%E8%BD%A6Riverside%20500&listFilter=%7B%22selectFilter%22%3A%7B%22sale_price%22%3A%5B2.9,12999.9%5D%7D,%22expandData%22%3A%5B%5D,%22category_id%22%3Anull%7D'">
                </div>                    
            </div>
        </div>
    </div> 
</div>
<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://q.ttimg.cn/pic/2024/04/199fc58e68889c74.jpg"> </div> <div class="equipment-item-content-item-info"> <div class="equipment-item-content-item-name"> 小米12S Pro </div> <div class="equipment-item-content-item-specification"> </div> <div class="equipment-item-content-item-description"> 小米12S Pro是一款搭载骁龙8+ Gen1处理器、6.73英寸2K AMOLED E5曲面屏(120Hz)、50MP徕卡三摄、120W有线快充+50W无线快充的高性能旗舰手机,具备优异影像系统与强大续航能力。 </div> <div class="equipment-item-content-item-toolbar"> <div class="equipment-item-content-item-toolbar"> <input class="button-primary button-small" type="button" value="已停售" > </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="dell" src="https://q.ttimg.cn/pic/2024/04/7865dac6a5a95978.jpg"> </div> <div class="equipment-item-content-item-info"> <div class="equipment-item-content-item-name"> 戴尔G15 5511 </div> <div class="equipment-item-content-item-specification"> </div> <div class="equipment-item-content-item-description"> 配备第11代酷睿i7-11800H处理器、RTX 3060显卡、16GB内存、512GB SSD、165Hz电竞屏、双风扇散热、AWCC智控中心的15.6英寸游戏笔记本,主打性能与耐用设计。 </div> <div class="equipment-item-content-item-toolbar"> <div class="equipment-item-content-item-toolbar"> <input class="button-primary button-small" type="button" value="已停售" > </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="hp" src="https://q.ttimg.cn/pic/2024/04/48d73e3424f7ed56.jpg"> </div> <div class="equipment-item-content-item-info"> <div class="equipment-item-content-item-name"> 惠普400G1DM </div> <div class="equipment-item-content-item-specification"> </div> <div class="equipment-item-content-item-description"> 这是一款小巧台式机,适合作为家用小服务器,搭载低功耗i5 4590t处理器,具备扩展内存/硬盘、多接口、无线网卡,支持PCIe扩展卡,预装Win7/8,节能高效。 </div> <div class="equipment-item-content-item-toolbar"> <div class="equipment-item-content-item-toolbar"> <input class="button-primary button-small" type="button" value="已停售" > </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="game" src="https://q.ttimg.cn/pic/2024/04/6e91feed5f3e3038.jpg"> </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"> 飞智冰原狼一代手柄是一款无线多模游戏控制器,支持有线、蓝牙、2.4G连接,具备背键宏设定、霍尔线性扳机、体感功能,兼容PC/Switch/手机平台,以其高性价比、精确操控与良好兼容性备受玩家青睐。 </div> <div class="equipment-item-content-item-toolbar"> <div class="equipment-item-content-item-toolbar"> <input class="button-primary button-small" type="button" value="已停售" > </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="game" src="https://pixl.decathlon.com.cn/p2564595/k$38004ed25ccf4872cc150ce9ce7a1b43/content.webp"> </div> <div class="equipment-item-content-item-info"> <div class="equipment-item-content-item-name"> 迪卡侬 Riverside 500 </div> <div class="equipment-item-content-item-specification"> </div> <div class="equipment-item-content-item-description"> 旅行自行车Riverside 500设计用于在多种道路和小径上进行短距离到中距离的骑行。Riverside 500采用铝制车架,轻盈坚固 </div> <div class="equipment-item-content-item-toolbar"> <div class="equipment-item-content-item-toolbar"> <input class="button-primary button-small" type="button" value="详情" onclick="window.location.href='https://www.decathlon.com.cn/product-detail?dsm_code=145696&model_code=965304&category_id=null&product_name=%E6%97%85%E8%A1%8C%E8%87%AA%E8%A1%8C%E8%BD%A6Riverside%20500&listFilter=%7B%22selectFilter%22%3A%7B%22sale_price%22%3A%5B2.9,12999.9%5D%7D,%22expandData%22%3A%5B%5D,%22category_id%22%3Anull%7D'"> </div> </div> </div> </div> </div>

CSS代码

<style>
/* 我的装备 */
.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;
}
</style>
<style>
                    /* 我的装备 */
                    .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;
                    }
</style>
<style> /* 我的装备 */ .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; } </style>
© 版权声明
THE END
喜欢就支持一下吧
点赞8赞赏 分享
The sacrifices you make today will pay dividends in the future.
今天的牺牲和努力未来都会有回报
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    暂无评论内容