小米商城——HTML，CSS（附：源码）

百科大全

更新时间：2025-10-05 16:18:5938

admin管理员组
文章数量:1794759

小米商城——HTML，CSS（附：源码）

大家好，作为刚接触前端不久的一个学生来说，我第一次学习完HTML5和CSS的时候，我就自己学习着自己做了一个小米官网，之前一直没有展现出来，最近一直写博客，这才想起来。

源代码会放在最后。

接下来是我自己的一点个人的感受，我们都知道，写一个网页的时候，我们都要从他的名称，每个标签的命名等等开始，很遗憾，我第一次写这样的代码的时候，就没有发现这样的一个问题。因此，在这里给一个很宝贵的意见就是，以后再写代码的时候一定要自己的写注释。因为代码是你自己写的，过一段时间，我们就会忘记，当时的结构和命名规则，所以在这里一定要自己写注释。

接下来给大家来看一下自己的HTML部分源代码。

<body> <div class="header"> <div class="header-font-first" onclick="window.open('www.mi/index.html')">小米商城</div> <div class="header-font" onclick="window.open('home.miui/')">MIUI</div> <div class="header-font" onclick="window.open('iot.mi/')">loT</div> <div class="header-font" onclick="window.open('i.mi/')">云服务</div> <div class="header-font" onclick="window.open('airstar/home')">天星数科</div> <div class="header-font" onclick="window.open('www.xiaomiyoupin/')">有品</div> <div class="header-font" onclick="window.open('xiaoai.mi/')">小爱开放平台</div> <div class="header-font" onclick="window.open('qiye.mi/')">企业团购</div> <div class="header-font" onclick="window.open('www.mi/aptitude/list?id=88')">资质证照</div> <div class="header-font" onclick="window.open('www.mi/aptitude/list')">协议规则</div> <div class="header-font" onclick="window.open('www.mi/appdownload')">下载app</div> <div class="header-font" onclick="window.open('xiaomishare.mi/?from=micom#/')">智能生活</div> <div class="header-font-last">seselect Location</div> <div class="header-font-first2">登录</div> <div class="header-font">注册</div> <div class="header-font-last">消通知</div> </div> <div class="header2"> <div class="header2-logo"></div> <div class="header2-font">Xiaomi手机</div> <div class="header2-font-list"></div> </div> <div class="header3"> <div class="header3-list"> <div class="header3-list-square"></div> </div> <div class="header3-photo"></div> </div> <div class="bigherder4"> <div class="header4"> <div class="header4-box" onclick="window.open('api.jr.mi/activity/scene/scenePCsearch.html?from=search')"> <img src="./img/box1.png" class="header4-box-photo"> <div class="header4-box-font">保障服务</div> </div> <div class="header4-box" onclick="window.open('qiye.mi/')"> <img src="./img/box2.png" class="header4-box-photo"> <div class="header4-box-font">企业团购</div> </div> <div class="header4-box" onclick="window.open('www.mi/order/fcode')"> <img src="./img/box3.png" class="header4-box-photo"> <div class="header4-box-font">F码通道</div> </div> <div class="header4-box" onclick="window.open('www.mi/mimobile')"> <img src="./img/box4.png" class="header4-box-photo"> <div class="header4-box-font">米粉卡</div> </div> <div class="header4-box" onclick="window.open('www.mi/a/h/16769.html')"> <img src="./img/box5.png" class="header4-box-photo"> <div class="header4-box-font">以旧换新</div> </div> <div class="header4-box" onclick="window.open('account.xiaomi/fe/service/login/password?_locale=zh_CN&sid=recharge&qs=%253Fcallback%253Dhttp%25253A%25252F%25252Frecharge.10046.mi%25252Fsts%25253Fsign%25253DbC%2525252Bk1yrraTJbriZ0UbiV7hfzHz4%2525253D%252526followup%25253Dhttp%2525253A%2525252F%2525252Frecharge.10046.mi%2525252F%2526sid%253Drecharge%2526_locale%253Dzh_CN&callback=http%3A%2F%2Frecharge.10046.mi%2Fsts%3Fsign%3DbC%252Bk1yrraTJbriZ0UbiV7hfzHz4%253D%26followup%3Dhttp%253A%252F%252Frecharge.10046.mi%252F&_sign=P%2BzbqaqaY2j9zuZTC7mrhVJnmJo%3D&serviceParam=%7B%22checkSafePhone%22%3Afalse%2C%22checkSafeAddress%22%3Afalse%2C%22lsrp_score%22%3A0.0%7D&showActiveX=false&theme=&needTheme=false&bizDeviceType=')"> <img src="./img/box6.png" class="header4-box-photo"> <div class="header4-box-font">话费充值</div> </div> </div> <div class="header4-advert1" onclick="window.open('www.mi/mi11ultra')"> </div> <div class="header4-advert2" onclick="window.open('www.mi/mixfold')"> </div> <div class="header4-advert3" onclick="window.open('www.mi/buy/detail?product_id=14903')"> </div> </div> <div class="header5" onclick="window.open('www.mi/redmik40')"> <div class="header5-photo"></div> </div> <div class="box1"> <p class="box1-font1">手机</p> <div class="box1-font2" onclick="window.open('www.mi/p/1915.html')">查看更多</div> </div> <div class="box2"> <div class="box2-photo" onclick="window.open('www.mi/mixfold')"></div> <div class="box2-list"> <div class="box2-list-phone" onclick="window.open('www.mi/mi11le-5g-ne')"> <div class="box2-list-phone-photo1"></div> <div class="box2-list-phone-photo-font1">Xiaomi 11 青春活力版</div> <div class="box2-list-phone-photo-font2">轻薄5G，内外皆出彩</div> <div class="box2-list-phone-photo-font3">1999元起</div> </div> <div class="box2-list-phone" onclick="window.open('www.mi/redminote11pro')"> <div class="box2-list-phone-photo2"></div> <div class="box2-list-phone-photo-font1">Redmi note 11 Pro系列</div> <div class="box2-list-phone-photo-font2">Redmi note 11 Pro系列</div> <div class="box2-list-phone-photo-font3">1799元起</div> </div> <div class="box2-list-phone" onclick="window.open('www.mi/redminote11')"> <div class="box2-list-phone-photo3"></div> <div class="box2-list-phone-photo-font1">Redmi note 11 5G</div> <div class="box2-list-phone-photo-font2">5000mAh大量电池</div> <div class="box2-list-phone-photo-font3">1199元起</div> </div> <div class="box2-list-phone" onclick="window.open('www.mi/redminote11-4g')"> <div class="box2-list-phone-photo4"></div> <div class="box2-list-phone-photo-font1">Redmi note 11 4G</div> <div class="box2-list-phone-photo-font2">5000mAh大量电池</div> <div class="box2-list-phone-photo-font3">999元起</div> </div> <div class="box2-list-phone" onclick="window.open('www.mi/blackshark4spro')"> <div class="box2-list-phone-photo5"></div> <div class="box2-list-phone-photo-font4">黑鲨4S PRO</div> <div class="box2-list-phone-photo-font5">磁动力升降肩键</div> <div class="box2-list-phone-photo-font3">4799元起</div> </div> <div class="box2-list-phone" onclick="window.open('www.mi/blackshark4s')"> <div class="box2-list-phone-photo6"></div> <div class="box2-list-phone-photo-font6">黑鲨4S</div> <div class="box2-list-phone-photo-font5">磁动力升降肩键</div> <div class="box2-list-phone-photo-font3">2699元起</div> </div> <div class="box2-list-phone" onclick="window.open('www.mi/xiaomicivi')"> <div class="box2-list-phone-photo7"></div> <div class="box2-list-phone-photo-font7">Xiaomi Civi</div> <div class="box2-list-phone-photo-font8">3200万高清质感自拍</div> <div class="box2-list-phone-photo-font3">2599元起</div> </div> <div class="box2-list-phone" onclick="window.open('www.mi/mix4')"> <div class="box2-list-phone-photo8"></div> <div class="box2-list-phone-photo-font9">Xiaomi MIX 4</div> <div class="box2-list-phone-photo-font10">CUP全面屏</div> <div class="box2-list-phone-photo-font3">4199元起</div> </div> </div> </div> <div class="box3"> <p class="box3-font1">智能穿戴</p> <div class="box3-font2">热门</div> <div class="box3-font3">穿戴</div> </div> <div class="box4"> <div class="box4-photo" onclick="window.open('www.mi/xiaomiwatchcolor2')"></div> <div class="box4-list"> <div class="box4-list-watch" onclick="window.open('www.mi/redmiwatch2')"> <div class="box4-list-watch-photo"></div> <div class="box4-list-watch-photo-font1">Redmi 手表 2</div> <div class="box4-list-watch-photo-font2">AMOLED高清大屏</div> <div class="box4-list-watch-photo-font3">399元起</div> </div> <div class="box4-list-watch" onclick="window.open('www.mi/shouhuan6/nfc')"> <div class="box4-list-watch-photo2"></div> <div class="box4-list-watch-photo-font1">小米手环6 NFC版</div> <div class="box4-list-watch-photo-font2">全屏实力</div> <div class="box4-list-watch-photo-font3">269元起</div> </div> <div class="box4-list-watch" onclick="window.open('www.mi/redmi-watch-mulan')"> <div class="box4-list-watch-photo3"></div> <div class="box4-list-watch-photo-font1">Redmi手表</div> <div class="box4-list-watch-photo-font2">35g超清/1.4大屏/多功能NFC</div> <div class="box4-list-watch-photo-font3">269元起</div> </div> <div class="box4-list-watch" onclick="window.open('www.mi/xiaomibuds3pro')"> <div class="box4-list-watch-photo4"></div> <div class="box4-list-watch-photo-font1">Xiaomi 真无线降噪耳机 3 Pro</div> <div class="box4-list-watch-photo-font2">动态降噪静听曼妙</div> <div class="box4-list-watch-photo-font3">689元起</div> </div> <div class="box4-list-watch" onclick="window.open('www.mi/buy/detail?product_id=14903')"> <div class="box4-list-watch-photo5"></div> <div class="box4-list-watch-photo-font1">Redmi buds</div> <div class="box4-list-watch-photo-font2">轻巧半入耳，舒适有天分</div> <div class="box4-list-watch-photo-font3">189元起</div> </div> <div class="box4-list-watch" onclick="window.open('www.mi/buy/detail?product_id=15217')"> <div class="box4-list-watch-photo6"></div> <div class="box4-list-watch-photo-font1">Redmi Buds 3 青春版</div> <div class="box4-list-watch-photo-font2">轻巧无线，持久动听</div> <div class="box4-list-watch-photo-font3">99元起</div> </div> <div class="box4-list-watch" onclick="window.open('www.mi/buy/detail?product_id=14243')"> <div class="box4-list-watch-photo7"></div> <div class="box4-list-watch-photo-font1">Redmi AirDots 3 Pro</div> <div class="box4-list-watch-photo-font2">智能降噪，超低延迟</div> <div class="box4-list-watch-photo-font3">289元起</div> </div> <div class="box4-list-watch-last" onclick="window.open('www.mi/search?keyword=%E6%89%8B%E8%A1%A8%E6%89%8B%E7%8E%AF')"> <div class="box4-list-watch-last-font"> <div class="box4-list-watch-last-font1">浏览更多</div> <div class="box4-list-watch-last-font2">热门</div> </div> </div> </div> </div> <div class="box5"> <p class="box5-font1">家电</p> <div class="box5-font2">热门</div> <div class="box5-font3">电视影音</div> </div> <div class="box6"> <div class="box6-photo"> <div class="box6-photo2"></div> <div class="box6-photo3"></div> </div> <div class="box6-list"> <div class="box6-list-tv" onclick="window.open('www.mi/buy/detail?product_id=14779')"> <div class="box6-list-tv-photo"></div> <div class="box6-list-tv-photo-font1">小米电视6 65'' OLED</div> <div class="box6-list-tv-photo-font2">小米电视6 65'' OLED</div> <div class="box6-list-tv-photo-font3">6999元</div> </div> <div class="box6-list-tv" onclick="window.open('www.mi/buy/detail?product_id=14438')"> <div class="box6-list-tv-photo2"></div> <div class="box6-list-tv-photo-font1">小米电视6 至尊版 65英寸</div> <div class="box6-list-tv-photo-font2">画质新境界</div> <div class="box6-list-tv-photo-font3">7499元</div> </div> <div class="box6-list-tv" onclick="window.open('www.mi/buy/detail?product_id=14417')"> <div class="box6-list-tv-photo3"></div> <div class="box6-list-tv-photo-font1">小米电视 ES55 2022款</div> <div class="box6-list-tv-photo-font2">多分区，画质轻旗舰</div> <div class="box6-list-tv-photo-font3">2999元</div> </div> <div class="box6-list-tv" onclick="window.open('www.mi/buy/detail?product_id=13168')"> <div class="box6-list-tv-photo4"></div> <div class="box6-list-tv-photo-font1">米家互联网对开门 540L</div> <div class="box6-list-tv-photo-font2">重磅新品福利特惠</div> <div class="box6-list-tv-photo-font3">2799元</div> </div> <div class="box6-list-tv" onclick="window.open('www.mi/buy/detail?product_id=12849')"> <div class="box6-list-tv-photo5"></div> <div class="box6-list-tv-photo-font1">小米全面屏电视65英寸 E65X</div> <div class="box6-list-tv-photo-font2">全面屏设计</div> <div class="box6-list-tv-photo-font3">2699元</div> </div> <div class="box6-list-tv" onclick="window.open('www.mi/mitv4c/32')"> <div class="box6-list-tv-photo6"></div> <div class="box6-list-tv-photo-font1">小米电视4C 32英寸</div> <div class="box6-list-tv-photo-font2">高清液晶屏，人工智能系统</div> <div class="box6-list-tv-photo-font3">849元</div> </div> <div class="box6-list-tv" onclick="window.open('www.mi/buy/detail?product_id=12809')"> <div class="box6-list-tv-photo7"></div> <div class="box6-list-tv-photo-font1">Redmi智能电视A55</div> <div class="box6-list-tv-photo-font2">澎湃音效影院级体验</div> <div class="box6-list-tv-photo-font3">1799元</div> </div> </div>

相信大家在看到这些代码的时候，我们可以清楚地看到这些代码看上去还是比较整齐的。希望大家可以借鉴。

接下来是部分的css代码：

*{ margin:0px; padding:0px; } .header{ width:auto; height:50px; background-color: #333333; } .header .header-font-first{ margin-left:170px; margin-top: 19px; padding-left: 10px; padding-right: 10px; border-right: 2px solid #3f3f37; color:#8e908d; float: left; font-size: 14px; } .header .header-font{ margin-top: 19px; padding-left: 10px; padding-right: 10px; color:#8e908d; border-right: 2px solid #3f3f37; font-size: 14px; float: left; } .header-font-last{ border:none; margin-top: 19px; padding-left: 10px; padding-right: 10px; color:#8e908d; font-size: 14px; float: left; } .header-font-first:hover { color:#b2aead; cursor:pointer; } .header-font:hover { color:#b2aead; cursor:pointer; } .header-font-last:hover { color:#b2aead; cursor:pointer; } .header-font-first2{ padding-left: 178px; float: left; margin-top: 19px; font-size: 14px; color:#8e908d; } .header-font-first2{ cursor:pointer; color:#b2aead; } .header2{ height: 125px; width:auto; /* background-color:#e24b4b; */ /* position:relative; */ } .header2 .header2-logo{ width: 56px; height:56px; background-image: url(./img/logo-1.jpg); background-size: contain; margin-top: 28px; margin-left: 182px; float: left; } .header2 .header2-font{ font-size: 20px; float: left; margin-left: 210px; margin-top: 50px; padding-left: 10px; } .header2 .header2-font:hover{ color:#ff6705; } .header2 .header2-font-list{ width:auto; height:287px; border-top: 1px solid #dfdfdf; background-color: aqua; position: absolute; top:125px; } .header3{ width:1226px; height: 460px; /* border:1px solid #8a501e; */ margin-left:179px; } .header3 .header3-list{ width: 233px; height:438px; /* position:relative; */ background-color: #3f3d3d; opacity:0.5; padding-top: 20px; } .header3 .header3-list .header3-list-spuare{ width:230px; height:42px; color:#dd0606; display: block; z-index: 2; } .header3 .header3-list .header3-list-spuare:hover{ background-color: #ff6705; } .header3 .header3-photo{ width: 991px; height: 458px; position:absolute; left:412px; top: 175px; background-image: url(./img/xiaomi11.jpg); } .bigheader4{ height: 168px; width:1226px; position: relative; } .header4{ width: 228px; height: 168px; padding-top: 2px; padding-left: 3px; margin-left: 179px; margin-top: 14px; background-color: #5f5750; opacity:0.7; cursor:pointer; /* float: left; */ } .header4 .header4-box{ width:73px; height: 80px; border:1px solid #665e57; float: left; } .header4 .header4-box .header4-box-photo{ width: 24px; display: inline-block; padding-left: 23px; padding-right: 23px; padding-top: 19px; padding-bottom: 5px; } .header4 .header4-box .header4-box-font{ font-size: 13px; text-align: center; color:#c3c0bd; } .header4 .header4-box:hover .header4-box-photo{ filter:drop-shadow(0 0 0 #ffffff); } .header4 .header4-box:hover .header4-box-font{ color:#ffffff; } .header4-advert1{ width: 316px; height: 170px; background-image: url(./img/box7.png); margin-left: 14px; margin-top: 14px; position:absolute; top:635px; left:410px; z-index:1; cursor:pointer; } .header4-advert2{ width: 316px; height: 170px; background-image: url(./img/box8.jpg); background-size: contain; margin-left: 14px; margin-top: 14px; position:absolute; top:635px; left:742px; cursor:pointer; } .header4-advert3{ width: 316px; height: 170px; background-image: url(./img/box9.jpeg); background-size: contain; margin-left: 14px; margin-top: 14px; position:absolute; top:635px; left:1073px; cursor:pointer; } .header5{ height: 92px; width:auto; background-color: #f5f5f5; padding-left: 179px; padding-top: 26px; padding-bottom: 22px; } .header5 .header5-photo{ height:120px; width: 1226px; background-image: url(./img/box10.png); background-size:cover; } .header5:hover{ cursor:pointer; } .box1{ height: 58px; width:auto; background: #f5f5f5; padding-left: 179px; position:relative; } .box1 .box1-font1{ font-size: 22px; display: inline-block; padding-top: 18px; } .box1 .box1-font2{ position: absolute; right:179px; bottom:20px; padding-top: 25px; }

给大家来看一下效果

抖音效果是这样的：

www.douyin/user/MS4wLjABAAAAdsvKMlcKtxvd0DMxl8gcowlkPsuwA0ZsLH3ccczAl_M?modal_id=7045440838893178143

链接: pan.baidu/s/1n9q4-lD8MblD-a3hLsHSrw

提取码: we23 复制这段内容后打开百度网盘手机App，操作更方便哦

本文标签：小米源码商城 html css

版权声明：本文标题：小米商城——HTML，CSS（附：源码）内容由林淑君副主任自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686813623a106146.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。