- 小米官网制作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 小米商城 - 小米11、Redmi Note 9、小米MIX Alpha，小米电视官方网站</title> <meta name="description" content="小米官网直营小米公司旗下所有产品，包括小米手机系列小米11 、小米10 Pro、小米MIX Alpha，Redmi 红米系列Redmi Note 9、Redmi K30，小米电视、笔记本、米家智能家居等，同时提供小米客户服务及售后支持."> <meta name="keywords" content="小米,redmi,小米11,Redmi Note 9,小米MIX Alpha,小米商城"> <link rel="shortcut icon" href=" favicon.ico" /> <!-- 引入页面的css--> <link rel="stylesheet" href="index.css"> <!-- 引入base页面--> <link rel="stylesheet" href="base.css"> </head> <body> <div class="tu"></div> <section class="shortcut"> <div class="w"> <div class="fl"> <ul> <li><a href="#">小米商城</a></li> <li></li> <li><a href="#">MIUI</a></li> <li></li> <li><a href="#">IoT</a></li> <li></li> <li><a href="#">云服务</a></li> <li></li> <li><a href="#">天星数科</a></li> <li></li> <li><a href="#">有品</a></li> <li></li> <li><a href="#">小爱开放平台</a></li> <li></li> <li><a href="#">企业团购</a></li> <li></li> <li><a href="#">资质证照</a></li> <li></li> <li><a href="#">协议规则</a></li> <li></li> <li><a href="#">下载app</a></li> <li></li> <li><a href="#">智能生活</a></li> <li></li> <li><a href="#">Select Location</a></li> </ul> </div> <div class="fr"> <ul> <li><a href="#">消息通知</a></li> <li></li> <li><a href="#">注册</a></li> <li></li> <li><a href="#">登录</a></li> </ul> </div> </div> </section> <!--header模块制作--> <header> <div class="nav w"> <div class="logo"> <h1> <a href="#"><img src="images/logo.png" alt=""></a> </h1> </div> <div class="hotwords"> <a href="#">小米手机</a> <a href="#">Redmi红米</a> <a href="#">电视</a> <a href="#">笔记本</a> <a href="#">家电</a> <a href="#">路由器</a> <a href="#">智能硬件</a> <a href="#">服务</a> <a href="#">社区</a> </div> <div class="search"> <input type="text" placeholder="小米11"> <button>搜索</button> </div> </div> </div> </header> <!--bignav模块制作--> <div class="bignav"> <div class="w"> <div class="main"> <div class="l"> <ul> <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> <li><a href="#">健康 儿童</a></li> <li><a href="#">耳机 音箱</a></li> <li><a href="#">生活 箱包</a></li> </ul> </div> <div class="zuo"> <a href="#"> < </a> </div> <div class="you"> <a href="#"> > </a> </div> <ul class="niu"> <li></li> <li></li> <li></li> <li class="four"></li> <li></li> </ul> </div> </div> </div> <!--guding模块制作--> <div class="guding"> <ul> <li><img src="images/shouji2.png" alt=""> <p>手机app</p> </li> <li><img src="images/people2.png" alt=""> <p>个人中心</p> </li> <li> <img src="images/gongju2.png" alt=""> <p>售后服务</p> </li> <li><img src="images/music2.png" alt=""> <p>人工客服</p> </li> <li><img src="images/shop2.png" alt=""> <p class="last">购物车</p> </li> </ul> </div> <!--fours模块制作--> <div class="fours"> <div class="w"> <div class="imp"> <ul class="six"> <li> <a href="#"><img src="images/1.png" alt="">小米秒杀</a> </li> <li> <a href="#"><img src="images/2.png" alt="">企业团购</a> </li> <li> <a href="#"><img src="images/3.png" alt="">F码通道</a> </li> <li> <a href="#"><img src="images/4.png" alt="">米粉卡</a> </li> <li> <a href="#"><img src="images/5.png" alt="">以旧换新</a> </li> <li> <a href="#"><img src="images/6.png" alt="">话费充值</a> </li> </ul> <div class="bd"> <ul class="three"> <li class="one"><a href="#"><img src="images/mi.jpg" alt="" width="316" height="170"></a></li> <li class="two"><a href="#"><img src="images/mi2.jpg" alt="" width="316" height="170"></a></li> <li class="three1"><a href="#"><img src="images/mi3.jpg" alt="" width="316" height="170"></a></li> </ul> </div> </div> </div> </div> <!--container模块制作--> <div class="container"> <div class="w"> <div class="con_hd"> <h2>小米秒杀</h2> <div class="list"> <a href="#" class="one"> > </a> <a href="#" class="two"> < </a> </div> </div> <div class="con_bd"> <div class="first"> <div class="round"> 10:00场 </div> <img src="images/shan.png" alt=""> <div class="desc"> 距离结束还有 </div> <div class="shu"> <span>02</span> <i>:</i> <span>48</span> <i>:</i> <span>06</span> </div> </div> <div class="img"> <div class="i1"> <a href="#"><img src="images/bing1.webp" alt="" width="160px" height="160px"> <h3>Redmi全自动波轮洗衣机1S 8kg 灰色</h3> <h4>洗衣机用的安全 洗的放心</h4> <p> <span class="new1">499元</span> <span class="new2">699元</span> </p> </a> </div> <div class="i2"> <a href="#"> <img src="images/bing2.webp" alt="" width="160" height="160"> <h3>小米智能门锁 青春版 左开门 黑</h3> <h4>一步推拉，高端智能锁门</h4> <p> <span class="new1">1088元</span> <span class="new2">1288元</span> </p> </a> </div> <div class="i3"> <a href="#"> <img src="images/bing3.webp" alt="" width="160" height="160"> <h3>8H释压舒弹纤维枕 抗菌对装 白色</h3> <h4>杜邦Sorona纤维/高弹支撑/可机洗</h4> <p> <span class="new1">99元</span> <span class="new2">129元</span> </p> </a> </div> <div class="i4"> <a href="#"> <img src="images/bing.webp" alt="" width="160" height="160"> <h3>米家迷你超级无敌保温杯 白色</h3> <h4>小巧便携/保温锁冷/轻量杯身/ 350ml容量</h4> <p> <span class="new1">49元</span> <span class="new2">59元</span> </p> </a> </div> </div> </div> <div class="bigimg"> <a href="#"><img src="images/bigimg.webp" alt=""></a> </div> <!-- floor模块制作--> <div class="floor"> <div class="fl_hd"> <h2>手机</h2> <div class="list_con"> <a href="#">查看全部</a> </div> </div> <div class="fl_bd clearfix" > <div class="one"> <a href="#"><img src="images/img1.webp" alt="" width="234" height="614"></a> </div> <ul class="two"> <li class="first"> <a href="#"><img src="images/img2.webp" alt="" width="160px" height="160px"> <h3>小米11</h3> <h4>骁龙888 | 2k四曲面屏</h4> <p> <span class="new1">3999元起</span> </p> </a> </li> <li class="second"> <a href="#"><img src="images/img3.webp" alt="" width="160px" height="160px"> <h3>小米10</h3> <h4>骁龙865处理器 / 1亿像素相机</h4> <p> <span class="new1">3399元起</span> <span class="new2">3999元</span> </p> </a> </li> <li class="third"> <a href="#"><img src="images/img4.webp" alt="" width="160px" height="160px"> <h3>Note 9 pro</h3> <h4>一亿像素夜景相机，120Hz六档变速高刷屏</h4> <p> <span class="new1">1599元起</span> </p> </a> </li> <li> <a href="#"><img src="images/img5.webp" alt="" width="160px" height="160px"> <h3>Note 9</h3> <h4>天玑 800U处理器,5000mAh电池</h4> <p> <span class="new1">1299元起</span> </p> </a> </li> <li class="five"> <a href="#"><img src="images/img6.webp" alt="" width="160px" height="160px"> <h3>Note 9 4G</h3> <h4>6000mAh超长续航</h4> <p> <span class="new1">999元起</span> </p> </a> </li> <li class="six"> <a href="#"><img src="images/img7.webp" alt="" width="160px" height="160px"> <h3>Redmi 9A</h3> <h4>5000mAh长循环大电量,6.53"超大护眼屏幕</h4> <p> <span class="new1">499元起</span> </p> </a> </li> <li class="seven"> <a href="#"><img src="images/img8.webp" alt="" width="160px" height="160px"> <h3>Redmi K30S 至尊纪念版</h3> <h4>144Hz[7档]变速高刷屏 </h4> <p> <span class="new1">2599元起</span> </p> </a> </li> <li class="eight"> <a href="#"><img src="images/img9.webp" alt="" width="160px" height="160px"> <h3>Redmi K30 至尊纪念版</h3> <h4>120Hz弹出全面屏,天玑1000+旗舰处理器 </h4> <p> <span class="new1">1999元起</span> </p> </a> </li> </ul> </div> </div> <div class="bigimgtwo"> <a href="#"><img src="images/bigimg2.webp" alt=""></a> </div> <div class="floortwo"> <div class="two_hd"> <h2>家电</h2> <div class="list_hd"> <ul> <li class="first">热门</li> <li>电视影音</li> </ul> </div> </div> <div class="two_bd clearfix"> <ul> <li class="one"> <a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a> </li> <li class="only"> <a href="#"><img src="images/2.webp" alt=""width="160" height="160"> <h3>小米全面屏电视65寸 E65X</h3> <h4>全面屏设计</h4> <p> <span class="new1">2999元</span> <span class="new2">3099元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/3.webp" alt=""width="160" height="160"> <h3>全面屏电视E43k</h3> <h4>全面屏设计,海量内容</h4> <p> <span class="new1">1399元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/4.webp" alt=""width="160" height="160"> <h3>小米电视4A 70英寸</h3> <h4>大屏更享受</h4> <p> <span class="new1">3399元</span> <span class="new2">3999元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/5.jpg" alt=""width="160" height="160"> <h3>米家空调</h3> <h4>出众静音,快速制冷热</h4> <p> <span class="new1">1699元</span> <span class="new2">1799元</span> </p> </a> </li> <li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li> <li class="only"> <a href="#"><img src="images/7.webp" alt=""width="160" height="160"> <h3>米家互联网洗烘一体机 Pro 10kg</h3> <h4>智能洗烘，省心省力</h4> <p> <span class="new1">2899元</span> <span class="new2">3299元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/8.webp" alt=""width="160" height="160"> <h3>Redmi全自动波轮洗衣机1A 8kg</h3> <h4>一键操作,父母都爱用</h4> <p> <span class="new1">799元</span> <span class="new2">899元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/9.webp" alt=""width="160" height="160"> <h3>Air 13.3" 2019款</h3> <h4>新一代独立显卡</h4> <p> <span class="new1">5399元起</span> </p> </a> </li> <li class="ten s"> <a href="#"><img src="images/10.webp" alt=""width="80" height="80"> <h3>米家互联网烟灶套装(天然气)</h3> <p> <span class="new1">2099元</span> </p> </a> </li> <li class="eleven"> <a href="#"> <div class="imo"> 浏览更多 <small>热门</small> </div> <div class="figure"> <i></i> </div> </a> </li> </ul> </div> </div> <div class="bigimgthree"> <a href="#"><img src="images/bigimg3.webp" alt=""></a> </div> <div class="floortwo"> <div class="two_hd"> <h2>智能</h2> <div class="list_hd"> <ul> <li class="first">热门</li> <li class="second">安防</li> <li>出行</li> </ul> </div> </div> <div class="two_bd clearfix"> <ul> <li class="one"> <a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a> </li> <li class="only"> <a href="#"><img src="images/2.webp" alt=""width="160" height="160"> <h3>小米全面屏电视65寸 E65X</h3> <h4>全面屏设计</h4> <p> <span class="new1">2999元</span> <span class="new2">3099元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/3.webp" alt=""width="160" height="160"> <h3>全面屏电视E43k</h3> <h4>全面屏设计,海量内容</h4> <p> <span class="new1">1399元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/4.webp" alt=""width="160" height="160"> <h3>小米电视4A 70英寸</h3> <h4>大屏更享受</h4> <p> <span class="new1">3399元</span> <span class="new2">3999元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/5.jpg" alt=""width="160" height="160"> <h3>米家空调</h3> <h4>出众静音,快速制冷热</h4> <p> <span class="new1">1699元</span> <span class="new2">1799元</span> </p> </a> </li> <li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li> <li class="only"> <a href="#"><img src="images/7.webp" alt=""width="160" height="160"> <h3>米家互联网洗烘一体机 Pro 10kg</h3> <h4>智能洗烘，省心省力</h4> <p> <span class="new1">2899元</span> <span class="new2">3299元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/8.webp" alt=""width="160" height="160"> <h3>Redmi全自动波轮洗衣机1A 8kg</h3> <h4>一键操作,父母都爱用</h4> <p> <span class="new1">799元</span> <span class="new2">899元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/9.webp" alt=""width="160" height="160"> <h3>Air 13.3" 2019款</h3> <h4>新一代独立显卡</h4> <p> <span class="new1">5399元起</span> </p> </a> </li> <li class="ten s"> <a href="#"><img src="images/10.webp" alt=""width="80" height="80"> <h3>米家互联网烟灶套装(天然气)</h3> <p> <span class="new1">2099元</span> </p> </a> </li> <li class="eleven"> <a href="#"> <div class="imo"> 浏览更多 <small>热门</small> </div> <div class="figure"> <i></i> </div> </a> </li> </ul> </div> </div> <div class="bigimgthree"> <a href="#"><img src="images/bigimg4.webp" alt=""></a> </div> <div class="floortwo"> <div class="two_hd"> <h2>搭配</h2> <div class="list_hd"> <ul> <li class="first">热门</li> <li>耳机音箱</li> </ul> </div> </div> <div class="two_bd clearfix"> <ul> <li class="one"> <a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a> </li> <li class="only"> <a href="#"><img src="images/2.webp" alt=""width="160" height="160"> <h3>小米全面屏电视65寸 E65X</h3> <h4>全面屏设计</h4> <p> <span class="new1">2999元</span> <span class="new2">3099元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/3.webp" alt=""width="160" height="160"> <h3>全面屏电视E43k</h3> <h4>全面屏设计,海量内容</h4> <p> <span class="new1">1399元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/4.webp" alt=""width="160" height="160"> <h3>小米电视4A 70英寸</h3> <h4>大屏更享受</h4> <p> <span class="new1">3399元</span> <span class="new2">3999元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/5.jpg" alt=""width="160" height="160"> <h3>米家空调</h3> <h4>出众静音,快速制冷热</h4> <p> <span class="new1">1699元</span> <span class="new2">1799元</span> </p> </a> </li> <li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li> <li class="only"> <a href="#"><img src="images/7.webp" alt=""width="160" height="160"> <h3>米家互联网洗烘一体机 Pro 10kg</h3> <h4>智能洗烘，省心省力</h4> <p> <span class="new1">2899元</span> <span class="new2">3299元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/8.webp" alt=""width="160" height="160"> <h3>Redmi全自动波轮洗衣机1A 8kg</h3> <h4>一键操作,父母都爱用</h4> <p> <span class="new1">799元</span> <span class="new2">899元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/9.webp" alt=""width="160" height="160"> <h3>Air 13.3" 2019款</h3> <h4>新一代独立显卡</h4> <p> <span class="new1">5399元起</span> </p> </a> </li> <li class="ten s"> <a href="#"><img src="images/10.webp" alt=""width="80" height="80"> <h3>米家互联网烟灶套装(天然气)</h3> <p> <span class="new1">2099元</span> </p> </a> </li> <li class="eleven"> <a href="#"> <div class="imo"> 浏览更多 <small>热门</small> </div> <div class="figure"> <i></i> </div> </a> </li> </ul> </div> </div> <div class="bigimgthree"> <a href="#"><img src="images/bigimg5.webp" alt=""></a> </div> <div class="floortwo"> <div class="two_hd"> <h2>配件</h2> <div class="list_hd"> <ul> <li class="first">热门</li> <li>充电器</li> </ul> </div> </div> <div class="two_bd clearfix"> <ul> <li class="one"> <a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a> </li> <li class="only"> <a href="#"><img src="images/2.webp" alt=""width="160" height="160"> <h3>小米全面屏电视65寸 E65X</h3> <h4>全面屏设计</h4> <p> <span class="new1">2999元</span> <span class="new2">3099元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/3.webp" alt=""width="160" height="160"> <h3>全面屏电视E43k</h3> <h4>全面屏设计,海量内容</h4> <p> <span class="new1">1399元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/4.webp" alt=""width="160" height="160"> <h3>小米电视4A 70英寸</h3> <h4>大屏更享受</h4> <p> <span class="new1">3399元</span> <span class="new2">3999元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/5.jpg" alt=""width="160" height="160"> <h3>米家空调</h3> <h4>出众静音,快速制冷热</h4> <p> <span class="new1">1699元</span> <span class="new2">1799元</span> </p> </a> </li> <li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li> <li class="only"> <a href="#"><img src="images/7.webp" alt=""width="160" height="160"> <h3>米家互联网洗烘一体机 Pro 10kg</h3> <h4>智能洗烘，省心省力</h4> <p> <span class="new1">2899元</span> <span class="new2">3299元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/8.webp" alt=""width="160" height="160"> <h3>Redmi全自动波轮洗衣机1A 8kg</h3> <h4>一键操作,父母都爱用</h4> <p> <span class="new1">799元</span> <span class="new2">899元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/9.webp" alt=""width="160" height="160"> <h3>Air 13.3" 2019款</h3> <h4>新一代独立显卡</h4> <p> <span class="new1">5399元起</span> </p> </a> </li> <li class="ten s"> <a href="#"><img src="images/10.webp" alt=""width="80" height="80"> <h3>米家互联网烟灶套装(天然气)</h3> <p> <span class="new1">2099元</span> </p> </a> </li> <li class="eleven"> <a href="#"> <div class="imo"> 浏览更多 <small>热门</small> </div> <div class="figure"> <i></i> </div> </a> </li> </ul> </div> </div> <div class="bigimgthree"> <a href="#"><img src="images/bigimg6.webp" alt=""></a> </div> <div class="floortwo"> <div class="two_hd"> <h2>周边</h2> <div class="list_hd"> <ul> <li class="first">热门</li> <li>出行</li> </ul> </div> </div> <div class="two_bd clearfix"> <ul> <li class="one"> <a href="#"><img src="images/1.webp" alt=""width="234" height="300"></a> </li> <li class="only"> <a href="#"><img src="images/2.webp" alt=""width="160" height="160"> <h3>小米全面屏电视65寸 E65X</h3> <h4>全面屏设计</h4> <p> <span class="new1">2999元</span> <span class="new2">3099元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/3.webp" alt=""width="160" height="160"> <h3>全面屏电视E43k</h3> <h4>全面屏设计,海量内容</h4> <p> <span class="new1">1399元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/4.webp" alt=""width="160" height="160"> <h3>小米电视4A 70英寸</h3> <h4>大屏更享受</h4> <p> <span class="new1">3399元</span> <span class="new2">3999元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/5.jpg" alt=""width="160" height="160"> <h3>米家空调</h3> <h4>出众静音,快速制冷热</h4> <p> <span class="new1">1699元</span> <span class="new2">1799元</span> </p> </a> </li> <li class="six"><img src="images/6.webp" alt="" width="234" height="300"></li> <li class="only"> <a href="#"><img src="images/7.webp" alt=""width="160" height="160"> <h3>米家互联网洗烘一体机 Pro 10kg</h3> <h4>智能洗烘，省心省力</h4> <p> <span class="new1">2899元</span> <span class="new2">3299元</span> </p></a> </li> <li class="only"> <a href="#"><img src="images/8.webp" alt=""width="160" height="160"> <h3>Redmi全自动波轮洗衣机1A 8kg</h3> <h4>一键操作,父母都爱用</h4> <p> <span class="new1">799元</span> <span class="new2">899元</span> </p> </a> </li> <li class="only"> <a href="#"><img src="images/9.webp" alt=""width="160" height="160"> <h3>Air 13.3" 2019款</h3> <h4>新一代独立显卡</h4> <p> <span class="new1">5399元起</span> </p> </a> </li> <li class="ten s"> <a href="#"><img src="images/10.webp" alt=""width="80" height="80"> <h3>米家互联网烟灶套装(天然气)</h3> <p> <span class="new1">2099元</span> </p> </a> </li> <li class="eleven"> <a href="#"> <div class="imo"> 浏览更多 <small>热门</small> </div> <div class="figure"> <i></i> </div> </a> </li> </ul> </div> </div> <div class="bigimgthree"> <a href="#"><img src="images/big7.webp" alt=""></a> </div> <div class="floorthree"> <div class="th_hd"> <h2>视频</h2> <div class="th_list"> <a href="#"> <span>查看全部</span> <i></i> </a> </div> </div> <div class="th_bd clearfix"> <ul> <li><a href="#"> <div class="vedio"><img src="images/vedio1.webp" alt="Redmi 10X系列发布会" width="296" height="180"> <span> <i></i> </span></div> <h3>Redmi 10X系列发布会</h3> <p>Redmi 10X系列发布会</p> </a></li> <li> <a href="#"> <div class="vedio"><img src="images/vedio2.webp" alt="Redmi 10X系列发布会" width="296" height="180"> <span> <i></i> </span></div> <h3>小米10 青春版 发布会</h3> </a> </li> <li> <a href="#"> <div class="vedio"><img src="images/vedio3.webp" alt="Redmi 10X系列发布会" width="296" height="180"> <span> <i></i> </span></div> <h3>小米10 8k手机拍大片</h3> </a> </li> <li> <a href="#"> <div class="vedio"><img src="images/vedio4.webp" alt="Redmi 10X系列发布会" width="296" height="180"> <span> <i></i> </span></div> <h3>小米10发布会</h3> </a> </li> </ul> </div> </div> </div> </div> <!--底部模块制作--> <footer> <div class="w"> <div class="footer_service"> <ul class="clearfix"> <li class="first"> <a href="#"> <em></em> 预约维修服务 </a> </li> <li class="second"> <a href="#"> <em></em> 7天无理由退货 </a> </li> <li class="third"> <a href="#"> <em></em> 15天免费换货 </a> </li> <li class="four"> <a href="#"> <em></em> 满99元包邮 </a> </li> <li class="five"> <a href="#"> <em></em> 520余家售后网点 </a> </li> </ul> </div> <div class="footer_links clearfix"> <dl> <dt>帮助中心</dt> <dd><a href="#">账户管理</a></dd> <dd><a href="#">购物指南</a></dd> <dd><a href="#">订单操作</a></dd> </dl> <dl> <dt>帮助中心</dt> <dd><a href="#">账户管理</a></dd> <dd><a href="#">购物指南</a></dd> <dd><a href="#">订单操作</a></dd> </dl> <dl> <dt>帮助中心</dt> <dd><a href="#">账户管理</a></dd> <dd><a href="#">购物指南</a></dd> <dd><a href="#">订单操作</a></dd> </dl> <dl> <dt>帮助中心</dt> <dd><a href="#">账户管理</a></dd> <dd><a href="#">购物指南</a></dd> <dd><a href="#">订单操作</a></dd> </dl> <dl> <dt>帮助中心</dt> <dd><a href="#">账户管理</a></dd> <dd><a href="#">购物指南</a></dd> <dd><a href="#">订单操作</a></dd> </dl> <dl> <dt>帮助中心</dt> <dd><a href="#">账户管理</a></dd> <dd><a href="#">购物指南</a></dd> <dd><a href="#">订单操作</a></dd> </dl> <div class="contect"> <p class="iphone">400-100-5678</p> <p>8:00-18:00(仅收市话费)</p> <a href="#" class="dis"> <em></em> 人工客服 </a> <div class="fllow"> 关注小米： <a href="#" class="one"></a> <a href="#" class="two"></a> </div> </div> </div> <div class="last"> <div class="logo"></div> <div class="text"> <p class="one"> <a href="#">小米商城</a> <span>|</span> <a href="#">miui</a> <span>|</span> <a href="#">米家</a> <span>|</span> <a href="#">米聊</a> <span>|</span> <a href="#">多看</a> <span>|</span> <a href="#">游戏</a> <span>|</span> <a href="#">政企服务</a> <span>|</span> <a href="#">小米天猫店</a> <span>|</span> <a href="#">小米集团隐私政策</a> <span>|</span> <a href="#">小米公司儿童信息保护规则</a> <span>|</span> <a href="#">小米商城隐私政策</a> <span>|</span> <a href="#">小米商城用户协议</a> <span>|</span> <a href="#">问题反馈</a> <span>|</span> <a href="#">Select Location</a> </p> <p class="two"> <a href="#">北京互联网法院法律服务工作站</a> <span>|</span> <a href="#">中国消费者协会</a> <span>|</span> <a href="#">北京市消费者协会</a> </p> <p> © <a href="#">mi.com</a> 京ICP证110507号 <a href="#">京ICP备10046444号</a> <a href="#">京公网安备11010802020134号</a> <a href="#">京网文[2020]0276-042号</a><br> <a href="#">（京）网械平台备字（2018）第00005号</a> <a href="#">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="#">营业执照</a> <a href="#">医疗器械质量公告</a> <a href="#">增值电信业务许可证</a> 网络食品经营备案 京食药网食备202010048 <a href="#">食品经营许可证</a><br> 违法和不良信息举报电话：171-5104-4404 <a href="#">知识产权侵权投诉</a> 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试 </p> </div> <div class="links"> <a href="#"> <img src="images/truste.png" alt=""> </a> <a href="#"> <img src="images/v-logo-2.png" alt=""> </a> <a href="#"> <img src="images/icon3.png" alt=""> </a> <a href="#"> <img src="images/c.png" alt=""> </a> <a href="#"> <img src="images/192.png" alt=""> </a> </div> </div> </div> </footer> </body> </html>
2.小米官网css制作
@font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?aa4r0l'); src: url('fonts/icomoon.eot?aa4r0l#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?aa4r0l') format('truetype'), url('fonts/icomoon.woff?aa4r0l') format('woff'), url('fonts/icomoon.svg?aa4r0l#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } .tu { width: 100%; height: 120px; background: url("images/big.jpg") no-repeat 50%; background-size: auto 120px; } .shortcut { position: relative; height: 40px; line-height: 40px; background-color: #333333; } .fl ul li { color: #b0b0b0; font-size: 12px; float: left; } .fl ul li:nth-child(2n) { height: 16px; border: 0.5px solid #666666; margin: 12px 13px 0; } .fl { float: left; } .fr { float: right; } .fr ul li { color: #b0b0b0; font-size: 12px; float: right; } .fr ul li:nth-child(even) { height: 16px; border: 0.5px solid #666666; margin: 12px 13px 0; } .w { width: 1226px; margin: 0 auto; } .nav { position: relative; height: 100px; /*background-color: pink;*/ } .logo { position: absolute; top: 22px; left: 0; } .hotwords { position: absolute; top: 6px; left: 220px; } .hotwords a { display: inline-block; /*width: 75px;*/ height: 88px; line-height: 88px; text-align: center; margin: 0 10px; font-size: 16px; color: black; } .search { position: absolute; top: 24px; left: 921px; width: 305px; height: 50px; border: 1px solid #e0e0e0; } .search input { float: left; width: 238px; height: 48px; } .search button { float: right; width: 65px; height: 48px; } .bignav .l { width: 220px; height: 420px; background-color: #3f3d3d; } .bignav .l ul li { position: relative; padding-left: 30px; height: 42px; line-height: 42px; } .bignav ul li a { display: block; font-size: 16px; color: #ffff; width: 190px; height: 42px; } .bignav ul li:hover { background-color: #ff6700; } .l ul li::after { position: absolute; top: 1px; right: 20px; font-family: icomoon; content: "\e90c"; color: #dedede; font-size: 18px; } .main { position: relative; background: url("images/niu.png") no-repeat 0px -40px; } .zuo, .you { position: absolute; top: 50%; margin-top: -25px; width: 30px; height: 50px; line-height: 50px; background-color: rgba(0,0,0,.5); text-align: center; font-size: 20px; } .zuo a { display: block; height: 50px; color: #ffffff; } .you a { display: block; height: 50px; color: #ffffff; } .zuo { left: 220px; } .you { right: 0; } .niu { position: absolute; bottom: 15px; right: 50px; width: 70px; height: 13px; background: rgba(255,255,255,0.3); border-radius: 7px; } .niu li { float: left; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; margin: 3px; } .niu .four { background-color: #ff5000; } .guding { position: fixed; top: 125px; right: 0px; background-color: #fff; width: 80px; height: 450px; text-align: center; } .guding li { position: relative; border-left: 1px solid #f5f5f5 ; border-bottom: 1px solid #f5f5f5; width: 80px; height: 90px; } .guding img { position: absolute; top: 20px; left: 20px; } .guding p { position: absolute; top: 60px; left: 10px; font-size: 16px; } .guding .last { position: absolute; top: 60px; left: 15px; font-size: 16px; } .fours .imp { position: relative; margin-top: 10px; height: 170px; } .imp .six { width: 220px; height: 170px; background-color: #5f5750; } .imp .six li { float: left; width: 73px; height: 82px; padding: 0 3px; border-right:1px solid #665e57 ; border-bottom:1px solid #665e57; text-align: center; } .imp .six li img { display: block; width: 24px; height: 24px; margin: 20px auto 4px; } .imp .six li a:hover{ color: #fff; } .bd { width: 988px; height: 170px; } .bd { position: absolute; left: 238px; top: 0; } .three { position: relative; } .three .one { position: absolute; left: 0; } .three .two { position: absolute; left: 336px; } .three .three1 { position: absolute; left: 672px; } .container { width: 100%; background-color: #f5f5f5; margin-top: 20px; } .con_hd { position: relative; height: 58px; } .con_hd h2 { float: left; line-height: 58px; color: #333333; } .list .one{ position: absolute; top: 16px; right: 0; display: inline-block; width: 36px; font-size: 24px; border: 1px solid #e0e0e0; line-height: 24px; text-align: center; } .list .two { position: absolute; top: 16px; right: 36px; display: inline-block; width: 36px; font-size: 24px; border: 1px solid #e0e0e0; border-right: none; line-height: 24px; text-align: center; } .con_bd { position: relative; height: 340px; } .con_bd .first { float: left; width: 234px; height: 340px; background-color: #f1eded; padding-top: 39px; border-top: 1px solid #e53935; text-align: center; } .con_bd .first .round { font-size: 21px; color: #ef3a3b; padding-top: 15px; } .con_bd .first img { margin: 25px auto; } .con_bd .first .desc { color: rgba(0,0,0,.54); font-size: 15px; } .con_bd .shu { width: 168px; height: 46px; margin: 32px; } .shu span { float: left; width: 46px; height: 46px; background: #605751; color: #fff; font-size: 24px; line-height: 46px; } .shu i { width: 15px; float: left; height: 46px; line-height: 46px; color: #605751; font-size: 28px; } .con_bd .img .i1{ position: absolute; left: 244px; width: 234px; height: 339px; border-top: 1px solid #00c0a5; background-color: #fafafa; } .con_bd .img .i1 a { display: inline-block; width: 234px; height: 339px; } .con_bd .img .i1 a:hover { color: #666;; } .con_bd .img img { margin-top: 50px; margin-left: 37px; } .con_bd .img h3 { color: #4f4f4f; font-size: 16px; font-weight: 400; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: 20px; margin-right: 20px; margin-top: 10px; margin-bottom: 10px; } .img h4 { text-align: center; color: #adadad; font-weight: 400; margin-bottom: 20px; } .img .i1 p { text-align: center; font-size: 16px; } .img .i1 .new1 { color: #fa6509; } .img .i1 .new2 { text-decoration: line-through; color: #b0b0b0; } .con_bd .img .i2{ position: absolute; left: 494px; width: 234px; height: 339px; border-top: 1px solid #ffac13; background-color: #fafafa; } .con_bd .img .i2 a { display: inline-block; width: 234px; height: 339px; } .con_bd .img .i2 a:hover { color: #666; } .img .i2 p { text-align: center; font-size: 16px; } .img .i2 .new1 { color: #fa6509; } .img .i2 .new2 { text-decoration: line-through; color: #b0b0b0; } .con_bd .img .i3{ position: absolute; left: 744px; width: 234px; height: 339px; border-top: 1px solid #83c44e; background-color: #fafafa; } .con_bd .img .i3 a { display: inline-block; width: 234px; height: 339px; } .con_bd .img .i3 a:hover { color: #666; } .img .i3 p { text-align: center; font-size: 16px; } .img .i3 .new1 { color: #fa6509; } .img .i3 .new2 { text-decoration: line-through; color: #b0b0b0; } .con_bd .img .i4{ position: absolute; left: 994px; width: 234px; height: 339px; border-top: 1px solid #2196f3; background-color: #fafafa; } .con_bd .img .i4 a { display: inline-block; width: 234px; height: 339px; } .con_bd .img .i4 a:hover { color: #666; } .img .i4 p { text-align: center; font-size: 16px; } .img .i4 .new1 { color: #fa6509; } .img .i4 .new2 { text-decoration: line-through; color: #b0b0b0; } .bigimg img{ margin-top: 15px; width: 1226px; height: 120px; } .floor .fl_hd { position: relative; height: 58px; /*background-color: pink;*/ margin-top: 10px; } .fl_hd h2 { line-height: 58px; color: #333333; } .fl_hd .list_con { position: absolute; right: 0; top: 0; line-height: 58px; font-size: 16px; } .fl_hd .list_con a { color: #424242; } .list_con i { width: 12px; height: 12px; padding: 4px; border-radius:50%; font-size: 12px; line-height: 12px; background: #b0b0b0; color: #fff; } .list_con a::after { font-family: icomoon; content: "\ea42"; margin-left: 8px; line-height: 58px; } .list_con a:hover { color: #fa6509; transition: all .3s; } .fl_bd .one { float: left; width: 234px; } .fl_bd .one:hover { transform: translatez(3px); transform: translateY(-3px); box-shadow: 0 5px 10px #cccccc; transition: all .3s; } .fl_bd .one a { display: block; width: 100%; height: 100%; } .container .fl_bd .two li { margin-left: 14px; margin-bottom: 14px; float: left; width: 234px; height: 300px; background-color: #fafafa; } .fl_bd .two li:hover { transform: translatez(3px); transform: translateY(-3px); box-shadow: 0 5px 10px #cccccc; transition: all .3s; } .fl_bd .two li h3 { color: #4f4f4f; font-size: 16px; font-weight: 400; margin: 0 90px; } .fl_bd .two li h4 { text-align: center; color: #adadad; font-weight: 400; margin-bottom: 5px; } .fl_bd .two li a { display: inline-block; width: 234px; height: 300px; } .fl_bd .two li a:hover { color: #666; } .fl_bd .two li p { text-align: center; font-size: 16px; } .fl_bd .two li .new1 { color: #fa6509; } .fl_bd .two li img { margin-top: 35px; margin-left: 37px; margin-bottom: 10px; } .fl_bd .two .new2 { text-decoration: line-through; color: #b0b0b0; } .fl_bd .two .third h3 { color: #4f4f4f; font-size: 16px; font-weight: 400; margin: 0 75px; } .fl_bd .two .third h4 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: 20px; margin-right: 20px; } .fl_bd .two .five h3 { color: #4f4f4f; font-size: 16px; font-weight: 400; margin: 0 77px; } .fl_bd .two .six h3 { color: #4f4f4f; font-size: 16px; font-weight: 400; margin: 0 79px; } .fl_bd .two .six h4 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: 20px; margin-right: 20px; } .fl_bd .two .seven h3 { color: #4f4f4f; font-size: 16px; font-weight: 400; margin: 0 28px; } .fl_bd .two .eight h3 { color: #4f4f4f; font-size: 16px; font-weight: 400; margin: 0 33px; } .fl_bd .two .eight h4 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: 20px; margin-right: 20px; } .bigimgtwo img{ margin-top: 15px; width: 1226px; height: 120px; } .two_hd { position: relative; height: 58px; margin-top: 10px; } .two_hd h2 { line-height: 58px; color: #333333; } .two_hd .list_hd { position: absolute; right: 0; top: 0; } .two_hd .list_hd ul { padding: 20px 0 0; } .two_hd .list_hd ul li { display: inline-block; font-size: 16px; cursor: pointer; transition: border .3s; } .two_hd .list_hd .first { margin-right: 30px; color: #ff6700; border-bottom: 2px solid #ff6700; } .two_hd .list_hd .second { margin-right: 30px; } .two_hd .list_hd ul li:hover { color: #ff6700; border-bottom: 2px solid #ff6700; } .container .two_bd ul li { margin-left: 14px; margin-bottom: 14px; float: left; width: 234px; height: 300px; background-color: #fafafa; } .container .two_bd ul .one { margin-left: 0; } .container .two_bd ul .six { margin-left: 0; } .container .two_bd ul .ten { position: relative; height: 143px; } .container .two_bd ul .eleven { position: relative; height: 143px; } .two_bd ul li:hover { transform: translatez(3px); transform: translateY(-3px); box-shadow: 0 5px 10px #cccccc; transition: all .3s; } .two_bd ul .only img { margin-top: 35px; margin-left: 37px; margin-bottom: 10px; } .two_bd ul li h3 { text-align: center; color: #333; font-size: 14px; font-weight: 400; } .two_bd ul li h4 { text-align: center; color: #adadad; font-weight: 400; margin-bottom: 5px; } .two_bd ul li a { display: inline-block; width: 234px; } .two_bd ul li a:hover { color: #666; } .two_bd ul li p { text-align: center; font-size: 16px; } .two_bd ul li .new1 { color: #fa6509; } .two_bd ul .new2 { text-decoration: line-through; color: #b0b0b0; } .two_bd ul .s h3 { margin:35px 112px 5px 30px; font-size: 14px; font-weight: 400; } .two_bd ul .ten img { position: absolute; right: 15px; top: 25px; } .two_bd ul .s p { margin: 0 110px 0 30px; } .eleven .figure i::before { font-family: icomoon; content: "\ea42"; } .eleven .figure i { font-size: 48px; } .eleven .figure { position: absolute; right: 35px; top: 35px; color: #ff6700; } .eleven .imo { display: block; margin: 50px 110px 0 30px; font-size: 18px; color: #333; } .eleven small { display: block; font-size: 12px; color: #757575; } .bigimgthree img{ margin-top: 15px; width: 1226px; height: 120px; } .floorthree .th_hd { position: relative; height: 58px; margin-top: 10px; } .th_hd h2 { line-height: 58px; color: #333333; } .th_hd .th_list { position: absolute; right: 0; top: 0; line-height: 58px; font-size: 16px; } .th_hd .th_list a { color: #424242; } .th_list i::after { position: absolute; right: 0; top: 1px; font-family: icomoon; content: "\ea42"; display: block; font-size: 18px; } .th_hd span { position: absolute; right: 22px; width: 64px; } .th_list a:hover { color: #fa6509; transition: all .3s; } .th_bd ul li i::before { font-family: icomoon; content: "\ea1c"; } .th_bd ul li i { font-size: 18px; line-height: 15px; } .th_bd ul li:first-child { margin-left: 0; } .th_bd ul li { position: relative; float: left; width: 296px; height: 285px; margin-left: 14px; margin-bottom: 14px; text-align: center; background: #fff; } .th_bd ul li:hover { transform: translatez(3px); transform: translateY(-3px); box-shadow: 0 5px 10px #cccccc; transition: all .3s; } .th_bd ul li .vedio { position: relative; width: 296px; height: 180px; margin: 0 0 28px; } .th_bd ul li span { position: absolute; left: 20px; bottom: 10px; width: 32px; height: 20px; border: 2px solid #fff; border-radius: 12px; background-color: #424242; background-color: rgba(0,0,0,.6); color: #fff; transition: all .2s; overflow: hidden; } .th_bd ul li a:hover { color: #757575; background-color: rgba(0,0,0,0); } .th_bd ul li a:hover span { background-color: #ff6700; border: #ff6700; } .footer_service { padding: 27px 0; border-bottom: 1px solid #e0e0e0; } .footer_service ul li:first-child { border-left: 0px; } .footer_service ul li { float: left; width: 19.8%; height: 25px; border-left: 1px solid #e0e0e0; font-size: 16px; line-height: 25px; text-align: center; } .footer_service ul .first em::before { font-family: icomoon; content: "\e991"; } .footer_service ul .second em::before { font-family: icomoon; content: "\e90d"; } .footer_service ul .third em::before { font-family: icomoon; content: "\e906"; } .footer_service ul .four em::before { font-family: icomoon; content: "\e99f"; } .footer_service ul .five em::before { font-family: icomoon; content: "\e947"; } .footer_links { padding: 40px 0; } .footer_links dl { float: left; width: 160px; margin: 0px; } .footer_links dl dt { margin: -1px 0 26px; font-size: 14px; color: #424242; } .footer_links dl dd { margin: 10px 0 0; font-size: 12px; } .contect { float: right; width: 251px; border-left: 1px solid #e0e0e0; text-align: center; color: #616161; } .contect .iphone { font-size: 22px; color: #ff6700; } .contect p { font-size: 12px; margin: 0 0 5px 0; } .contect em::before { font-family: icomoon; content: "\e906"; } .contect .dis { display: inline-block; border: 1px solid #b0b0b0; text-align: center; width: 118px; height: 28px; font-size: 12px; line-height: 28px; color: #ff6700; border-color: #ff6700; } .fllow a { width: 24px; height: 24px; display: inline-block; vertical-align: middle; margin-left: 6px; } .fllow .one { background: url("images/wb.png") 50% 0 no-repeat; background-size: cover; } .fllow .two { background: url("images/wx.png") 50% 0 no-repeat; background-size: cover; } .last { position: relative; } .last .logo { position: absolute; top: 0; left: 0; width: 57px; height: 57px; margin-right: 10px; background:url("images/logo-footer.png") no-repeat 50% 50%; } .text { padding-left: 67px; color: #b0b0b0; } .text p a:hover { color: #ff6700; } .links { height: 28px; margin: 4px 0 15px; padding-left: 67px; } .links img { height: 28px; }
- 初始化制作
/* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0; /*css3盒子模型*/ box-sizing: border-box; } /* em 和 i 斜体的文字不倾斜 */ em, i { font-style: normal } /* 去掉li 的小圆点 */ li { list-style: none } img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ vertical-align: middle } button { /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */ cursor: pointer } a { color: #666; text-decoration: none } a:hover { color: #c81623 } button, input { /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */ font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; /*默认有灰色边框，我们需要手动去掉*/ border: 0; outline: none; } body { /* CSS3 抗锯齿形 让文字显示的更加清晰 */ -webkit-font-smoothing: antialiased; background-color: #fff; font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; color: #666 } .hide, .none { display: none } /* 清除浮动 */ .clearfix:after { visibility: hidden; clear: both; display: block; content: "."; height: 0 } .clearfix { *zoom: 1 }
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)