【免费】2_2400130541陈冰怡.zip资源-CSDN文库

共10个文件

jpg：7个

png：2个

html：1个

需积分: 0 45 浏览量更新于2024-12-17 收藏 1.25MB ZIP 举报

2_2400130541陈冰怡.zip

收起资源包目录

2_2400130541陈冰怡.zip （10个子文件）

2400130541陈冰怡

40.jpg 110KB

OIP-C.jpg 9KB

12.。.png 480KB

12.jpg 52KB

11.png 315KB

.html 6KB

50.jpg 61KB

11.jpg 117KB

12x.jpg 35KB

电竞版.jpg 139KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>小米商城</title> </head> <style> *{ list-style: none; text-decoration:none; margin: 0; padding: 0; } header nav{ width: 100%; height: 50px; background-color: #42d0e2; } header li{ width: 130px; float: right; /* 设置文本行高 */ line-height: 50px; background-color: rgb(104, 201, 225); } header a{ color: white; display: block; text-align: center; } header a:hover{ background-color:cadetblue; } /* 下拉菜单隐藏 */ header .top_list{ display: none; } /* 下拉菜单显示 */ header li:hover .top_list{ display: block; } * { padding: 0; margin: 0; } ol{ list-style: none; } body{ background-color: #40c1d2; } body .box{ width: 1226px; height: 614px; margin: 50px auto; } body .box .left{ width: 234px; height: 614px; float: left; } body .box .right{ width: 992px; height: 614px; float: left; } body .box .right ol li{ width: 234px; height: 260px; background-color: rgb(149, 221, 233); float: left; margin-left: 14px; margin-bottom: 14px; padding: 20px 0px; } .box .left img{ width: 234px; height: 614px; } img{ width: 160px; height: 160px; margin-bottom: 15px; } .box .right ol li{ text-align: center; } .right ol li .title{ display: block; margin: 0px 10px 2px; font-size: 14px; font-weight: 400; color: #333; } .right ol li .desc{ display: block; margin: 0px 10px 10px; height: 18px; font-weight: 400; font-size: 12px; color: #b0b0b0; } .right ol li .price{ display: block; margin: 0px 10px 14px; color: #ff6700; font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .right ol li .price del{ color: #b0b0b0; font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .right ol a:hover{ box-shadow: 10px 10px 20px rgba(119, 117, 117, 0.3) ; } </style> </head> <body> <header> <nav> <ul> <li><a href=" ">小米商城</a > <ul class="top_list"> <li><a href="https://hyperos.mi.com/">小米澎湃</a ></li> <li><a href="https://www.mi.com/shop">IOT</a ></li> </ul> </li> <li><a href="#">小米官网</a > <ul class="top_list"> <li><a href="https://www.mi.com/shop">云服务</a ></li> <li><a href="https://www.mi.com/shop">天星数颗</a ></li> </ul> </li> <li><a href="#">小米官网</a > <ul class="top_list"> <li><a href="https://www.mi.com/shops">有品</a ></li> <li><a href="https://www.mi.com/shop">小爱开发平台</a ></li> </ul> </li> <li><a href="#">小米手机</a > <ul class="top_list"> <li><a href="https://www.mi.com/shop/search?keyword=xiaomi%E6%95%B0%E5%AD%97%E7%B3%BB%E5%88%97">手机</a ></li> <li><a href="https://www.mi.com/shop">资质证照</a ></li> </ul> </li> <li><a href="#">小米官网</a > <ul class="top_list"> <li><a href="https://www.mi.com/shop">云服务</a ></li> <li><a href="https://www.mi.com/shop">协议</a ></li> </ul> </li> <li><a href="#">小米官网</a > <ul class="top_list"> <li><a href="https://www.mi.com/shop">云服务</a ></li> <li><a href="https://www.mi.com/shop">协议</a ></li> </ul> </li> </ul> </nav> </header> </body> </html> </style> <body> <div class="box"> <div class="left"> <img src="./11.png" alt=""> </div> <div class="right"> <ol> <a href=" "> <li> <img src="./OIP-C.jpg" alt=""> <h3 class="title">Redmi K50 Pro</h3> <p class="desc">2K直屏的狠旗舰</p > <p class="price">2999元起</p > </li> </a > <a href="#"> <li> <img src="./50.jpg" alt=""> <h3 class="title">Redmi K50</h3> <p class="desc">2K直屏的狠旗舰</p > <p class="price">2399元起</p > </li> </a > <a href="#"> <li> <img src="./40.jpg" alt=""> <h3 class="title">Redmi K40S</h3> <p class="desc">口碑真旗舰</p > <p class="price">1799元起</p > </li> </a > <a href="#"> <li> <img src="./电竞版.jpg" alt=""> <h3 class="title">Redmi K50 电竞版</h3> <p class="desc">全线拉满的冷血旗舰</p > <p class="price">3299元起</p > </li> </a > <a href="#"> <li> <img src="./12.jpg" alt=""> <h3 class="title">Xiaomi 12 Pro</h3> <p class="desc">全新骁龙8｜2K AMOLED屏幕</p > <p class="price">4699元起</p > </li> </a > <a href="#"> <li> <img src="./12.。.png" alt=""> <h3 class="title">Xiaomi 12</h3> <p class="desc">全新骁龙8｜5000万主摄</p > <p class="price">3699元起</p > </li> </a > <a href="#"> <li> <img src="./12x.jpg" alt=""> <h3 class="title">Xiaomi 12X</h3> <p class="desc">骁龙870｜5000万主摄</p > <p class="price">2999元起</p > </li> </a > <a href="#"> <li> <img src="./11.jpg" alt=""> <h3 class="title">Xiaomi 11 青春活力版</h3> <p class="desc">轻薄5G，内外皆出彩</p > <p class="price"> <span class="num">1899</span>元<span>起&nbsp</span> <del><span class="num">1999</span>元</del> </p > </li> </a > </ol> </div> </div> </body> </html>