小米官网前端页面还原

  • 网页效果图片
  • HTML
  • css
    • 初始化样式
    • 外部样式文件

网页效果图片

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米商城-小米10 Pro、Redmi K30 Pro</title><link rel="icon" href="images/favicon.ico"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="iconfont/iconfont.css"><link rel="stylesheet" href="iconfont/other/iconfont.css">
</head>
<body><!-- 头部 --><header><div class="topImg"></div><div class="navBar"><div class="headNav"><ul><li><a href="#">小米商城</a><span>|</span></li><li><a href="#">MIUI</a><span>|</span></li><li><a href="#">loT</a><span>|</span></li><li><a href="#">云服务</a><span>|</span></li><li><a href="#">金融</a><span>|</span></li><li><a href="#">有品</a><span>|</span></li><li><a href="#">小爱开放平台</a><span>|</span></li><li><a href="#">企业团购</a><span>|</span></li><li><a href="#">资质证照</a><span>|</span></li><li><a href="#">协议规则</a><span>|</span><li><li><a href="#">下载app</a><span>|</span></li><li><a href="#">智能生活</a><span>|</span></li><li><a href="#">Select Location</a></li></ul><div class="login"><ul><li><a href="#">登录</a><span>|</span></li><li><a href="#">注册</a><span>|</span></li><li><a href="#">消息通知</a></li></ul><div class="shoppingCar"><i></i>&emsp;购物车（0）</div></div></div></div></header><!-- 导航栏 --><div class="headSearch"><div class="logo"><img src="data:images/mi-logo.png" alt=""></div><ul><li><a href="#">小米手机</a></li><li><a href="#">Redmi红米</a></li><li><a href="#">电视</a></li><li><a href="#">笔记本</a></li><li><a href="#">家电</a></li><li><a href="#">路由器</a></li><li><a href="#">智能硬件</a></li><li><a href="#">服务</a></li><li><a href="#">社区</a></li></ul><div class="searchBox"><div class="keyWords"><a href="#">Redmi k30 Pro</a><a href="#">家电</a></div><input type="search"><input type="submit" value=''></div></div><!-- 主页轮播图 --><div class="banner"><ul class="bannerPic"><li><img src="data:images/banner_01.jpg" alt=""></li><li><img src="data:images/banner_02.webp" alt=""></li><li><img src="data:images/banner_03.webp" alt=""></li><li><img src="data:images/banner_04.webp" alt=""></li><li><img src="data:images/banner_05.webp" alt=""></li></ul><div class="bannerPoint"><span></span><span></span><span></span><span></span><span></span></div><div class="bannerMenu"><ul><li><a href="#">手机 电话卡</a><span>></span></li><li><a href="#">笔记本 显示器</a><span>></span></li><li><a href="#">电视 盒子</a><span>></span></li><li><a href="#">家电 插线板</a><span>></span></li><li><a href="#">出行 穿戴</a><span>></span></li><li><a href="#">智能 路由器</a><span>></span></li><li><a href="#">电源 配件</a><span>></span></li><li><a href="#">健康 儿童</a><span>></span></li><li><a href="#">耳机 音响</a><span>></span></li><li><a href="#">生活 箱包</a><span>></span></li></ul></div><span class="arrow leftArrow"></span><span class="arrow rightArrow"></span></div><!-- 热品分类 --><div class="recommend"><ul class="serve"><li><i></i>选购手机</li><li><i></i>企业团购</li><li><i></i>一元活动</li><li><i></i>小米活动</li><li><i></i>以旧换新</li><li><i></i>话费充值</li></ul><ul class="product"><li><img src="data:images/product_01.jpg" alt=""></li><li><img src="data:images/product_02.jpg" alt=""></li><li><img src="data:images/product_03.jpg" alt=""></li></ul></div><!-- 小米明星单品 --><div class="star"><div class="title"><h2>小米明星单品</h2><span class="miniArrow"></span><span class="miniArrow"></span></div><ul><li><div><img src="data:images/star_01.png" alt=""></div><div class="description"><h3>小米手机5 64GB</h3><p>四轴防抖相机 能刷公交卡 银行卡</p><h4>1799元</h4></div></li><li><div><img src="data:images/star_02.png" alt=""></div><div class="description"><h3>小米电视3s 48英寸</h3><p>原装液晶屏 金属机身</p><h4>2599元</h4></div></li><li><div><img src="data:images/star_03.png" alt=""></div><div class="description"><h3>小米移动电源</h3><p>双向快充 高密度锂聚合物电芯</p><h4>79元</h4></div></li><li><div><img src="data:images/star_04.png" alt=""></div><div class="description"><h3>小米手环2</h3><p>OLED显示屏幕 升级计步算法</p><h4>149元</h4></div></li><li><div><img src="data:images/star_05.png" alt=""></div><div class="description"><h3>米家扫地机器人</h3><p>智能路径规划 扫的干净扫的快</p><h4>1699元</h4></div></li></ul></div><!-- 分类产品 --><div class="classification"><div class="phone"><div class="title"><h2>手机</h2><p>查看全部<i></i></p></div><div class="aside"><img src="data:images/phone_01.webp" alt=""></div><ul class="list"><li><img src="data:images/phone_02.webp" alt=""><div class="description"><h3>小米10至尊版</h3><p>120X变焦/120W秒冲/120Hz屏幕</p><h4>5299元起</h4></div></li><li><img src="data:images/phone_03.webp" alt=""><div class="description"><h3>Redmi K30 至尊版</h3><p>120Hz弹出全面屏 天玑1000+处理器</p><h4>1999元起</h4></div></li><li><img src="data:images/phone_04.webp" alt=""><div class="description"><h3>腾讯黑鲨3S</h3><p>骁龙865处理器 120Hz刷新率</p><h4>3999元起</h4></div></li><li><img src="data:images/phone_05.webp" alt=""><div class="description"><h3>Redmi 9A</h3><p>5000mAh长循环大电量6.53超大护眼屏幕</p><h4>599元起</h4></div></li><li><img src="data:images/phone_06.webp" alt=""><div class="description"><h3>小米10 青春版 5G</h3><p>50倍潜望变焦/轻薄5G手机</p><h4>1899元起</h4></div></li><li><img src="data:images/phone_07.webp" alt=""><div class="description"><h3>小米10</h3><p>骁龙865/1亿像素相机</p><h4>3799元起</h4></div></li><li><img src="data:images/phone_08.webp" alt=""><div class="description"><h3>Redmi K30 Pro</h3><p>双模5G 骁龙865 弹出全面屏</p><h4>2699元起</h4></div></li><li><img src="data:images/phone_09.webp" alt=""><div class="description"><h3>Redmi K30 Pro 变焦版</h3><p>双模5G 骁龙865 弹出全面屏</p><h4>3199元起</h4></div></li></ul></div><div class="tv"><img src="data:images/phone_10.webp" alt=""></div><div class="television"><div class="title"><h2>电视</h2><div class="other"><ul><li><a href="#">热门</a></li><li><a href="#">电视影音</a></li></ul></div></div><div class="aside"><ul><li><img src="data:images/tv_01.webp" alt=""></li><li><img src="data:images/tv_02.webp" alt=""></li></ul></div><ul class="list"><li><img src="data:images/tv_03.webp" alt=""><div class="description"><h3>Redmi 红米电视 70英寸</h3><p>70英寸震撼巨屏 4k画质细腻如真</p><h4>3199元</h4></div></li><li><img src="data:images/tv_04.webp" alt=""><div class="description"><h3>小米全面屏电视E32C</h3><p>全面屏设计 人工智能系统</p><h4>899元</h4></div></li><li><img src="data:images/tv_05.webp" alt=""><div class="description"><h3>小米全面屏电视E55A</h3><p>全面屏设计 人工智能语音</p><h4>1999元</h4></div></li><li><img src="data:images/tv_06.jpg" alt=""><div class="description"><h3>米家空调</h3><p>出众静音 快速知冷知热</p><h4>1499元</h4></div></li><li><img src="data:images/tv_07.webp" alt=""><div class="description"><h3>米家互联网洗烘一体机Pro 10KG</h3><p>智能洗烘 省心省力</p><h4>2999元</h4></div></li><li><img src="data:images/tv_08.webp" alt=""><div class="description"><h3>Redmi全自动波轮洗衣机1A 8kg</h3><p>一键操作 父母都爱用</p><h4>799元</h4></div></li><li><img src="data:images/tv_09.webp" alt=""><div class="description"><h3>15.6 四核i7 16G独显 512G</h3><p>全面均衡的国民轻薄本</p><h4>4699元</h4></div></li><li><img src="data:images/tv_10.webp" alt=""><div class="description"><h3>Air 13.3 2019款</h3><h4>5499元</h4></div></li></ul></div><div class="tv"><img src="data:images/tv_11.webp" alt=""></div><!-- 智能 --><div class="smart"><div class="title"><h2>智能</h2><div class="other"><ul><li><a href="#">热门</a></li><li><a href="#">安防</a></li><li><a href="#">出行</a></li></ul></div></div><div class="aside"><ul><li><img src="data:images/smart_01.webp" alt=""></li><li><img src="data:images/smart_02.webp" alt=""></li></ul></div><ul class="list"><li><img src="data:images/smart_03.webp" alt=""><div class="description"><h3>小米 [小爱老师]</h3><p>英语提分利器</p><h4>499元</h4></div></li><li><img src="data:images/smart_04.webp" alt=""><div class="description"><h3>小米智能门锁E</h3><p>告别钥匙 畅想智能生活</p><h4>999元</h4></div></li><li><img src="data:images/smart_05.webp" alt=""><div class="description"><h3>小米小爱音箱play</h3><p>听音乐、语音遥控家电</p><h4>99元</h4></div></li><li><img src="data:images/smart_06.webp" alt=""><div class="description"><h3>小爱音箱万能遥控版</h3><p>传统家电秒变智能</p><h4>149元</h4></div></li><li><img src="data:images/smart_07.webp" alt=""><div class="description"><h3>米家电饭煲4L</h3><p>890w 立体加热</p><h4>249元</h4></div></li><li><img src="data:images/smart_08.webp" alt=""><div class="description"><h3>米家智能窗帘</h3><p>窗帘开合随心控</p><h4>799元</h4></div></li><li><img src="data:images/smart_09.webp" alt=""><div class="description"><h3>小米体脂称2</h3><p>轻松掌握身体脂肪率</p><h4>99元</h4></div></li><li><img src="data:images/smart_10.jpg" alt=""><div class="description"><h3>九号平衡车</h3><h4>1899元</h4></div></li></ul></div><div class="tv"><img src="data:images/smart_11.webp" alt=""></div><!-- 搭配 --><div class="part"><div class="title"><h2>搭配</h2><div class="other"><ul><li><a href="#">热门</a></li><li><a href="#">耳机音响</a></li></ul></div></div><div class="aside"><ul><li><img src="data:images/part_01.webp" alt=""></li><li><img src="data:images/part_02.webp" alt=""></li></ul></div><ul class="list"><li><img src="data:images/part_03.webp" alt=""><div class="description"><h3>小米真无线蓝牙耳机 Air2</h3><p>智能真无线 轻松舒适戴</p><h4>299元</h4></div></li><li><img src="data:images/part_04.webp" alt=""><div class="description"><h3>高速无线冲套装</h3><p>快速无线闪充</p><h4>149元</h4></div></li><li><img src="data:images/part_05.webp" alt=""><div class="description"><h3>Redmi充电宝 10000mAh标准版</h3><p>10000aAh大电量</p><h4>59元</h4></div></li><li><img src="data:images/part_06.webp" alt=""><div class="description"><h3>Redmi充电宝 20000mAh快充版</h3><p>大容量 可上飞机</p><h4>99元</h4></div></li><li><img src="data:images/part_07.jpg" alt=""><div class="description"><h3>小米插线板 5孔位</h3><p>多重安全保护</p><h4>39元</h4></div></li><li><img src="data:images/part_08.jpg" alt=""><div class="description"><h3>小米蓝牙耳机AirDots青春版</h3><p>雅致简约 收纳充电仓</p><h4>169元</h4></div></li><li><img src="data:images/part_09.webp" alt=""><div class="description"><h3>小米小爱触屏音箱</h3><p>好听更好看</p><h4>189元</h4></div></li><li><img src="data:images/part_10.webp" alt=""><div class="description"><h3>小米无线车充 通用快充版</h3><h4>129元</h4></div></li></ul></div><div class="tv"><img src="data:images/part_11.webp" alt=""></div><!-- 周边 --><div class="rim"><div class="title"><h2>周边</h2><div class="other"><ul><li><a href="#">热门</a></li><li><a href="#">出行</a></li></ul></div></div><div class="aside"><ul><li><img src="data:images/rim_01.webp" alt=""></li><li><img src="data:images/rim_02.webp" alt=""></li></ul></div><ul class="list"><li><img src="data:images/rim_03.webp" alt=""><div class="description"><h3>米家飞行员太阳镜Pro</h3><p>尼龙偏光 轻巧佩戴</p><h4>199元</h4></div></li><li><img src="data:images/rim_04.webp" alt=""><div class="description"><h3>小米巨能写中性笔10只装</h3><p>一只顶四只 超长顺滑书写</p><h4>9.99元</h4></div></li><li><img src="data:images/rim_05.webp" alt=""><div class="description"><h3>米家迷你保温杯</h3><p>可随身携带的温度</p><h4>49元</h4></div></li><li><img src="data:images/rim_06.jpg" alt=""><div class="description"><h3>贝医生巴氏牙刷4只装</h3><p>进口刷毛 好品质</p><h4>39.9元</h4></div></li><li><img src="data:images/rim_07.webp" alt=""><div class="description"><h3>米家负离子速干吹风机 H300</h3><p>小巧精悍 速干小超人</p><h4>149元</h4></div></li><li><img src="data:images/rim_08.webp" alt=""><div class="description"><h3>米家运动鞋4</h3><p>轻盈若絮 弹跳若兔</p><h4>179元</h4></div></li><li><img src="data:images/rim_09.jpg" alt=""><div class="description"><h3>自动折叠伞</h3><p>防泼水伞布 轻盈拒水</p><h4>99元</h4></div></li><li><img src="data:images/rim_10.jpg" alt=""><div class="description"><h3>米家LED随身灯</h3><p>轻盈便携</p><h4>19.9元</h4></div></li></ul></div><div class="tv"><img src="data:images/rim_11.webp" alt=""></div><!-- 视频 --><div class="video"><div class="title"><h2>视频</h2><p>查看全部<i></i></p></div><ul class="list"><li><img src="data:images/video_01.webp" alt=""><div class="description"><h3>Redmi 10X系列发布会</h3></div></li><li><img src="data:images/video_02.webp" alt=""><div class="description"><h3>小米10 青春版发布会</h3></div></li><li><img src="data:images/video_03.webp" alt=""><div class="description"><h3>小米10 8K手机拍大片</h3></div></li><li><img src="data:images/video_04.webp" alt=""><div class="description"><h3>小米10 发布会</h3></div></li></ul></div></div><!-- 尾部信息 --><div class="survey"><ul class="policy"><li><i></i>预约维修服务</li><li><i></i>7天无理由退货</li><li><i></i>15天免费换货</li><li><i></i>满99包邮</li><li><i></i>520余家售后网点</li></ul><div class="link"><dl class="item"><dt>帮助中心</dt><dd>账户管理</dd><dd>购货指南</dd><dd>订单操作</dd></dl><dl class="item"><dt>服务支持</dt><dd>售后政策</dd><dd>自助服务</dd><dd>相关下载</dd></dl><dl class="item"><dt>线下门店</dt><dd>小米之家</dd><dd>服务网点</dd><dd>授权体验店</dd></dl><dl class="item"><dt>关于小米</dt><dd>了解小米</dd><dd>加入小米</dd><dd>投资者关系</dd><dd>企业社会责任</dd><dd>廉洁举报</dd></dl><dl class="item"><dt>关于我们</dt><dd>新浪微博</dd><dd>官方微信</dd><dd>联系我们</dd><dd>公益基金会</dd></dl><dl class="item"><dt>特色服务</dt><dd>F码通道</dd><dd>礼物码</dd><dd>防伪查询</dd></dl><div id="contact"><p class="tel">400-100-5678</p><p>8:00~18:00 (仅收市话费)</p><span><i></i>人工客服</span><br><span>关注小米</span></div></div></div>
</body>
</html>

css

初始化样式

*{margin: 0;padding: 0;
}
body{font-family: normal;font-style: normal;font-size: 14px;line-height: 1.5;font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft YaHei", sans-serif;color: #333333;background-color: #ffffff;min-width: 1226px;
}
a{text-decoration: none;
}
ul,ol{list-style: none;
}
i{font-family: "iconfont" !important;font-style: normal;
}

外部样式文件

@import 'reset.css';/* 头部信息 */
header{width: 100%;height: 160px;overflow: hidden;
}
.topImg{width: 100%;height: 120px;background: url('../images/head.jpg')no-repeat center center;cursor: pointer;
}
.navBar{width: 100%;height: 40px;background-color: #333333;
}
.headNav{width: 1226px;height: 40px;line-height: 40px;margin: 0 auto;
}
.headNav ul span{color: #424242;margin: 0 0.5em;
}
.headNav ul{float: left;
}
.headNav ul li{display: inline-block;
}
.headNav ul li a{color: #b0b0b0;transform: all .5s;font-size: 12px;
}
.headNav ul li a:hover,.headNav .login .shoppingCar:hover{color: #ffffff;
}
.headNav .login{float: right;
}
.headNav .login .shoppingCar{width: 120px;height: 40px;margin-left: 27px;display: inline-block;background-color: #424242;text-align: center;color: #b0b0b0;transform: all .5s;cursor: pointer;
}/* 头部搜索 */
.headSearch{width: 1226px;height: 100px;margin: 0 auto;
}
.logo{position: absolute;width: 55px;height: 55px;background-color: #ff6700;overflow: hidden;margin-top: 22.5px;
}
.headSearch ul{width: 820px;margin-left: 230px;line-height: 100px;
}
.headSearch ul li{float: left;height: 80px;padding: 0 10px;line-height: 100px;cursor: pointer;
}
.headSearch ul li:hover{border-bottom: 2px solid #ff6700;
}
.headSearch ul li a{font-size: 16px;color: #333333;
}
.headSearch .searchBox{float: right;line-height: 100px;font-size: 0;position: relative;margin-top: 25px;
}
.headSearch .searchBox .keyWords{width: 177px;height: 0;position: absolute;background-color: red;top: -25px;right: 60px;display: inline-block;text-align: right;z-index: 2;
}
.headSearch .searchBox .keyWords a{margin-left: 5px;padding: 0 5px;font-size: 12px;background-color: #eeeeee;color: #757575;transform: all .2s;
}
.headSearch .searchBox .keyWords a:hover{background-color: #ff6700;color: #ffffff;
}
.headSearch .searchBox input[type="search"]{width: 240px;height: 50px;border: 1px solid #000000;line-height: 50px;outline: none;/* padding: 0 10px; */position: absolute;box-sizing: border-box;top: 0;right: 49px;transform: all .2s;
}
.headSearch .searchBox input[type='search']:hover{border-color: #b0b0b0;
}
.headSearch .searchBox input[type='submit']{width: 50px;height: 50px;position: absolute;top: 0;right: 0;border: 1px solid #000000;font-family: "iconfont" !important;font-size: 24px;color: #616161;background-color: #ffffff;line-height: 24px;outline: 0;cursor: pointer;transform: all .2s;
}
.headSearch .searchBox input[type='submit']:hover{background-color: #ff6700;border-color: #ff6700;color: #ffffff;
}/* 主页轮播图 */
.banner{width: 1226px;height: 460px;margin: 0 auto;/* background-size: cover; */position: relative;overflow: hidden;
}
.banner img{width: 1226px;height: 460px;
}
.bannerPic{width: 7400px;height: 460px;animation: move 30s linear infinite 0s normal;
}
.bannerPic li{width: 1226px;height: 460px;float: left;
}
.bannerPoint{position: absolute;bottom: 15px;right: 30px;
}
.bannerPoint span{width: 6px;height: 6px;border: 2px solid rgba(255,255,255,0.3);display: inline-block;border-radius: 50%;background-color: rgba(0,0,0,0.4);margin: 0 5px;cursor: pointer;transform: all .5s;
}
.bannerPoint span:first-child,.bannerPoint span:hover{background-color: rgba(255,255,255,0.4);border-color: rgba(0,0,0,0.4);
}/* 设置轮播图停留时间和变换时间 */
@keyframes move{0% {margin-left: 0;}18% {margin-left: 0;}20% {margin-left: -1226px;}38% {margin-left: -1226px;}40% {margin-left: -2452px;}58% {margin-left: -2452px;}60% {margin-left: -3678px;}78% {margin-left: -3678px;}80% {margin-left: -4904px;}98% {margin-left: -4904px;}100% {margin-left: -6130px;}
}
.bannerMenu{width: 234px;height: 460px;float: left;background-color: rgba(0,0,0,0.6);padding: 20px 0;box-sizing: border-box;position: absolute;top: 0;left: 0;
}
.bannerMenu ul li{position: relative;cursor: pointer;
}
.bannerMenu ul li:hover{background-color: #ff6700;
}
.bannerMenu ul li a{color: #ffffff;padding-left: 30px;height: 42px;line-height: 42px;
}
.bannerMenu ul li span{text-align: right;color: rgba(255,255,255,0.5);position: absolute;top: 10px;right: 20px;
}
.banner .arrow{width: 40px;height: 70px;margin-top: -35px;font-size: 50px;color: #757575;position: absolute;top: 50%;transform: all .3s;font-family: "iconfont" !important;font-style: normal;cursor: pointer;z-index: 2;
}
.banner .leftArrow{left: 234px;
}
.banner .rightArrow{right: 0;
}
.banner .arrow:hover{background-color: rgba(0,0,0,0.6);
}/* 热门推荐 */
.recommend{width: 1226px;height: 170px;margin: 14px auto 26px;
}
.recommend .serve{width: 234px;height: 170px;float: left;font-size: 12px;text-align: center;background-color: #5f5750;
}
.recommend .serve li{position: relative;float: left;width: 78px;height: 85px;padding: 18px 3px 0;box-sizing: border-box;color: rgba(255,255,255,0.6);transform: color .2s;border-left: 1px solid #757575;border-bottom: 1px solid #757575;cursor: pointer;
}
.recommend .serve li:hover{color: rgba(255,255,255,1);
}
.recommend .serve li i{display: block;font-size: 24px;line-height: 24px;height: 24px;margin-bottom: 4px;
}
.recommend .product{float: left;margin-left: -1px;width: 993px;height: 170px;
}
.recommend .product li{margin-left: 15px;float: left;width: 316px;height: 170px;transition: box-shadow .2s linear;cursor: pointer;
}
.recommend .product li img{width: 316px;height: 170px;
}
.recommend .product li:hover{z-index: 2;box-shadow: rgba(0,0,0,0.1) 0 30px 30px;
}/* 小米明星单品 */
.star{width: 1226px;height: 438px;margin: 0 auto;
}
.title{width: 1226px;height: 58px;position: relative;margin: 0 auto 22px;
}
.title h2{font-size: 22px;font-weight: 200;line-height: 58px;float: left;
}
.title .miniArrow{font-family: "iconfont" !important;font-style: normal;width: 24px;height: 16px;padding: 3px 5px;margin-top: 17px;color: #b0b0b0;border: 1px solid #e0e0e0;font-size: 16px;line-height: 16px;text-align: center;float: right;cursor: pointer;transition: all .2s;
}
.title .miniArrow:hover{color: #ff6700;border: 1px solid #ff6700;
}
.star ul{width: 1226px;height: 340px;margin-bottom: 40px;
}
.star ul li{width: 234px;height: 340px;float: left;background: #fafafa;box-sizing: border-box;padding-top: 39px;margin-right: 14px;text-align: center;transition: all .6s;
}
.star ul li:nth-child(5){margin-right: 0;
}
.star ul li img{width: 160px;margin: 0 auto 22px;cursor: pointer;
}
.star ul li .description h3{margin: 0 20px 3px;font-size: 14px;font-weight: 400;cursor: pointer;
}
.star ul li .description p{height: 18px;margin: 0 20px 12px;font-size: 12px;color: #b0b0b0;
}
.star ul li .description h4{color: #ff6700;font-weight: normal;
}
.star ul li:nth-child(1){border-top: 1px solid #ffac13;
}
.star ul li:nth-child(2){border-top: 1px solid #83c44e;
}
.star ul li:nth-child(3){border-top: 1px solid #2196f3;
}
.star ul li:nth-child(4){border-top: 1px solid #e53935;
}
.star ul li:nth-child(5){border-top: 1px solid #00c0a5;
}/* 分类产品 */
.classification{width: 100%;height: 4700px;padding-top: 60px;background-color: #f5f5f5;
}/* 手机 */
.phone{width: 1226px;height: 614px;margin: 0 auto 22px;
}
.title p{width: 89px;height: 58px;position: absolute;top: 0;right: 0;font-size: 16px;line-height: 58px;color: #424242;transition: all .4s;cursor: pointer;
}
.title p:hover{color: #ff6700;
}
.title p:hover i{color: #ff6700;
}
.title p i{font-family: "iconfont" !important;font-style: normal;font-size: 15px;line-height: 15px;color: #b0b0b0;margin-left: 10px;
}.aside{width: 234px;height: 614px;float: left;transition: all .3s linear;
}
.aside ul li{width: 234px;height: 300px;margin-bottom: 14px;float: left;transition: all .3s linear;cursor: pointer;
}
.aside ul li img{width: 234px;height: 300px;
}
.aside img{width: 234px;height: 300;
}
.list{width: 992px;height: 614px;float: left;
}
.list li{width: 234px;height: 300px;margin-left: 14px;margin-bottom: 14px;padding: 15px 20px 0;box-sizing: border-box;text-align: center;position: relative;float: left;background-color: #ffffff;transition: all .2s linear;
}
.list li:hover{z-index: 2;box-shadow: 0 15px 30px rgba(0,0,0,0.1);transform: translate3d(0,-2px 0);
}
.list li img{width: 160px;height: 160px;margin: 0 auto 18px;cursor: pointer;
}
.list li h3{margin: 0 10px 2px;font-size: 14px;font-weight: 400;cursor: pointer;overflow: hidden;
}
.list li p{margin: 0 10px 10px;height: 18px;font-size: 12px;color: #b0b0b0;overflow: hidden;text-overflow: ellipsis;
}
.list li h4{margin: 0 10px 14px;color: #ff6700;font-weight: normal;
}
.tv{width: 1226px;height: 120px;margin: 30px auto 22px;
}
.tv img{width: 100%;height: 100%;margin-top: 30px;margin-bottom: 22px;
}/* 电视 */
.television{width: 1226px;height: 614px;margin: 90px auto 22px;
}
.title .other ul{float: right;height: 58px;
}
.title .other ul li{float: left;font-size: 16px;height: 30px;line-height: 30px;margin: 14px 0 14px 30px;
}
.title .other ul li a{padding-bottom: 3px;color: #333333;
}
.title .other ul li:first-child a, .title .other ul li a:hover{color: #ff6700;border-bottom: 2px solid #ff6700;
}/* 智能配件 */
.smart{width: 1226px;height: 614px;margin: 90px auto 22px;
}/* 配件 */
.part{width: 1226px;height: 614px;margin: 90px auto 22px;
}/* 周边 */
.rim{width: 1226px;height: 614px;margin: 90px auto 22px;
}/* 视频 */
.video{width: 1226px;height: 357px;margin: 90px auto 22px;
}
.video .list{width: 100%;height: 100%;
}
.video .list li{width: 296px;height: 285px;padding: 0;
}
.video .list li img{margin: 0;padding: 0;width: 100%;height: 180px;
}
.video .list li:nth-child(1){margin: 0;
}/* 尾部信息 */
.survey{width: 1226px;height: 290px;margin: 30px auto;
}
.policy{width: 1226px;height: 25px;
}
.policy li{float: left;width: 19.8%;height: 25px;line-height: 25px;text-align: center;font-size: 18px;border-left: 1px solid #e0e0e0;cursor: pointer;
}
.policy li:hover{color: #ff6700;
}
.policy li:nth-child(1){border-left: none;
}
.policy{padding: 27px 0;border-bottom: 1px solid #e0e0e0;
}.link{width: 1226px;height: 250px;margin: 30px auto;
}
.link .item{width: 160px;float: left;
}
.link .item dt{margin: -1px 0 26px;font-size: 15px;line-height: 1.5;
}
.link .item dd{margin: 10px 0 0;font-size: 12px;color: #757575;cursor: pointer;
}
.link .item dd:hover{color: #ff6700;
}
#contact{width: 252px;height: 111px;float: right;text-align: center;border-left: 1px solid #e0e0e0;
}
#contact .tel{font-size: 22px;line-height: 1;color: #ff6700;margin-bottom: 5px;
}
#contact span{width: 118px;height: 28px;display: inline-block;border: 1px solid #ff6700;background-color: #fff;color: #ff6700;font-size: 12px;line-height: 28px;margin-top: 5px;cursor: pointer;transition: all .4s;
}
#contact span:hover{background-color: #ff6700;color: #ffffff;
}

小米官网前端页面还原相关推荐

  1. 实战小米官网静态页面1：导航栏部分

    小米官网静态页面: 导航栏部分: 这里用id选择器,猫脸动画:class选择器(复习!) F12 导航栏分了左右两个部分: 下图18行少了个v,记得补上,是navCenter 设置好网页的边距 图片原 ...

  2. 【HTML响应式项目】成人教育官网前端页面（HTML+CSS+JS实现三端适应）

    项目源码已上传至码云仓库:云南农业职业技术学院/HTML响应式成人教育官网前端页面(HTML+CSS+JS实现) 项目演示地址:成人教育网 AAP端下载地址:成人教育网APP端.apk-互联网文档类资 ...

  3. 小米官网登陆页面制作

    1.效果图 2.所搭建文件 3.index.html文件 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. 第一个完整页面来啦~小米官网

    不知不觉学习前端已经快4个月啦,之前没学JavaScript之前做的项目都只能看不能玩,小米官网这个页面算上写出的第一个相对完整一点的项目,虽然需要进步的地方还有很多,但是未来可期! 本篇博客主要是针 ...

  5. 前端实战：仿写小米官网第一天

    前端实战的第一天 小米官网 目前效果: 实现功能: 导航栏,首页切换,无淡入淡出效果的轮播图,搜索功能,产品展示栏下滑 代码(便于记录,将js.css和html糅合在了一起): <!DOCTYP ...

  6. Web前端仿小米官网实战总结

    Web前端仿小米官网实战总结 自学前端至今实在是感慨万千,一个人学习太累,自律能力不太够,学习速度跟不上技术更新速度,所以学习技术是一定不能偷懒的,更不能沉迷游戏,要坚持学习,最好有人带,实在不行就报 ...

  7. Html5+Css实战前端小米官网左侧导航（思路+详解+素材）

    实战后的效果 大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...

  8. 前端学习之仿小米官网HTML+CSS

    一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...

  9. 哇~会动的页面来了！ -----小米官网

    目录 前言 一.首页.登录页面整体布局 1. 首页布局 2. 登录页面布局 二.页面具体效果实现分析 1.  首页head部分下拉列表 经过 下载 app时 出现 二维码 2. 首页 nav-head ...

最新文章

  1. Percona-Server-5.5.30安装
  2. 如何0代码、快速定制企业级NLP模型？百度技术大咖在线解析，可报名
  3. 2p刷高恪魔改固件_Newifi3路由器试用高恪固件
  4. 测试站点写入文件权限代码下载
  5. Linux系统运维之路
  6. day7——集合，深浅copy
  7. C语言中extern关键字详解
  8. devc++编程 error: jump to case label错误笔记
  9. QT D:\搜狗输入法\SogouInput\Components\ 13:53:42: 程序异常结束。 13:53:42: T
  10. 熊猫的python小课账号_校长，我要上车——python模拟登录熊猫TV
  11. linux下多线程编程、线程间同步通信及应用详解、及踩过的坑
  12. BIOS修改mbr为gpt的步骤
  13. leetcode 739. Daily Temperatures 每日温度(中等)
  14. Portillo’s上市首日涨幅45.5%，资本爱上吃“热狗”？
  15. torch.bmm(a,b)
  16. 中金财富后台开发一面经验分享
  17. Windows系统下进行NIST测试
  18. 影响钕铁硼性能的因素及方法
  19. JAVA网络编程个人笔记 第4章 inet地址
  20. HTC ruu 解密 工具编译 提取解密key 自行解密 流程记录

热门文章

  1. smartform解决越南文预览正常 打印后字符乱码
  2. 常规设置Apache服务器实例
  3. Matlab用Copula模型进行蒙特卡洛(Monte Carlo)模拟和拟合股票收益数据分析
  4. 手机投屏软件直播监控软件可以互联网远程控制
  5. 2022年4月23日，第16天
  6. 鱼c论坛 python课后题pdf_[全套55讲]鱼C论坛小甲鱼Python的课后题.pdf
  7. 专利申请的步骤和材料有哪些？
  8. 直播系统开发技术细节分享
  9. 【数据分发服务DDS】软件定义汽车【四】-行业现状
  10. ansys显示没有提供服务器,ansys链接不到本地服务器