1.效果圖如下

2.CSS代碼如下（style.css）

body,ul,li {margin:0;padding:0;} body {height:2500px; } ul {list-style:none; } /*解決高度塌陷*/ .container::before,.container::after,.clearfix::before,.clearfix::after {content:"";display:table; } .container::after,.clearfix::after {clear:both; } /*頂部CSS樣式*/ .topbar {background-color:#333;height:40px;} .container {margin:0 auto;width:1226px;} .topbar-nav {float:left;height:40px;line-height:40px;font-size:0; } .topbar-info,.topbar-cart {float:right;height:40px;line-height:40px;font-size:0;} .topbar span { font-size:12px; color:#666; font-family:sans-serif;margin:0.5em; } a {text-decoration:none;} .topbar a {color:#999;font-size:12px;} .topbar a:hover {color:#FFF; } .topbar-cart a:hover {background-color:#FFF;color:#ff6700 } .topbar-info {margin-right:25px; } /*頭部導(dǎo)航欄CSS樣式*/ .header {height:100px;} .header-logo {float:left;width:62px;margin-top:22px;} .header-logo img {height:55px;width:55px; }.header-nav {float:left;width:820px;height:100px; } .header-nav .nav-list {width:820px;height:88px;font-size:16px;padding:12px 0 0 30px; } .header-nav .nav-list .nav-category {float:left;width:127px;padding:0 15px 0 0; } .header-nav .nav-list .nav-category a {display:block;text-align:right;padding:26px 0 38px;color:#333; } .header-nav .nav-list .nav-item {float:left; } .header-nav .nav-list .nav-item a {display:block;padding:26px 10px 38px;color:#333;} .header-nav .nav-list .nav-item a:hover {color:#ff6700;} .header-search {float:right;width:296px;height:50px;margin-top:25px; } /*最右邊的搜索框樣式*/ .header-search .search-form {display:block;width:296px;height:50px;position:relative; } .header-search .search-form .search-text {display:block;position:absolute;top:0;right:51px;width:245px;height:50px;line-height:50px;border:1px solid #e0e0e0;outline:0; } .header-search .search-form .search-button {display:block;position:absolute;top:0;right:0;width:52px;height:50px;border:1px solid #e0e0e0;font-size:24px;line-height:24px;background:#fff;color:#616161;outline:0;} .header-search .search-form .search-button:hover {background-color:#ff6700;color:#fff; } /*主體設(shè)計(jì)樣式*/ .seckill {background-color:#f5f5f5; } .seckill-header {background:url(../img/mm.jpg) no-repeat 50% 0;height:170px;margin-top:19px; } .seckill-nav {margin:-68px 0 22px; } .seckill-navfixed {position:fixed;top:60px; } .seckill-nav em {display:inline-block;font-style:normal;font-size:18px;line-height:1;/*和字體一樣大*/vertical-align:middle;margin-left:30px; } .seckill-nav span {display:inline-block;margin-left:15px;text-align:left;line-height:1;vertical-align:middle;font-size:14px; } .seckill-nav ul {height:68px;background:#414141; } .seckill-nav ul li span em {display:inline-block;font-size:14px;margin-left:0;font-style:normal;text-align:left;line-height:20px; } .seckill-nav li {display:block;color:#fff;width:20%;text-align:center;float:left;height:68px;line-height:68px;cursor:pointer;/*鼠標(biāo)形狀*/} .seckill-nav .active {background-color:#F00; } .seckill-goods ul {margin-right:-13px;display:none;/*隱藏多余商品*/ } .seckill-goods .active {display:block; }.seckill-goods li {float:left;width:400px;height:190px;background-color:#fff;margin-right:13px;margin-bottom:13px; } .seckill-goods .bg {float:left;width:190px;height:190px;} .seckill-goods .bg img {height:190px; } .seckill-goods .info {margin-left:210px;width:190px;height:190px;padding-top:30px;} .seckill-goods .info .name {font-size:16px;color:#333;height:16px;display:block;white-space:nowrap;/*取消換行*/overflow:hidden;/*隱藏多余部分*/text-overflow:ellipsis;/*顯示點(diǎn)*/line-height:16px;} .seckill-goods .info .tips {font-size:12px;line-height:12px;color:#b0b0b0;margin-top:10px; } .seckill-goods .info .price {font-size:16px;line-height:16px;color:#f1393a;margin-top:14px;margin-bottom:0; } .seckill-goods .info .price del {color:#999;font-size:12px;line-height:12px;margin-left:10px; } .seckill-goods .info .btn {display:inline-block;width:118px;height:28px;line-height:28px;text-align:center;background-color:#f1393a;font-size:14px;color:#fff;margin-top:19px;border:1px solid #f1393a;} .seckill-goods .info .person {font-size:12px;line-height:12px;color:#999;margin-top:10px; } .seckill-notice {font-size:12px;color:#999;margin-top:100px;padding-bottom:35px; }

3.矢量圖標(biāo)CSS樣式（iconfont.css）
說(shuō)明：這個(gè)可以自己去阿里巴巴的網(wǎng)頁(yè)下載，網(wǎng)站鏈接，且里面有使用說(shuō)明，需要將iconfont.css和iconfont.eot都放在CSS文件夾下面。
阿里巴巴網(wǎng)站的頁(yè)面圖

4.js代碼如下（xm.js）

// JavaScript Document //JS控制標(biāo)簽切換顯示 //獲取ul里的li標(biāo)簽 var tabs=document.getElementById("tabs").getElementsByTagName("li"); var lists=document.getElementById("lists").getElementsByTagName("ul"); //給每一個(gè)li綁定單擊響應(yīng)事件 for(var i=0;i<tabs.length;i++) {tabs[i].onclick=showlist; } function showlist() {for(var i=0;i<tabs.length;i++){if(tabs[i]===this)//如果正在點(diǎn)擊此li{tabs[i].className="active";//則賦值active//JS控制商品切換顯示lists[i].className="clearfix active";}else{tabs[i].className="";//否則賦值為空l(shuí)ists[i].className="clearfix";}} } //JS控制菜單固定 var sck=document.getElementById("seckillNav"); window.onscroll=function() {var sc=document.documentElement.scrollTop ||documet.body.scrollTop || window.pageYOffset;//解決瀏覽器兼容問(wèn)題if(sc>=260){sck.className="seckill-nav seckill-fixed";}else{sck.className="seckill-nav";} };

5.完整代碼

<!doctype html> <html> <head> <meta charset="utf-8"> <title>小米閃購(gòu)-小米商城</title> <link rel="stylesheet" href="mycss/style.css"> <link rel="stylesheet" href="mycss/iconfont.css"> </head> <body> <!--頂部菜單欄--> <div class="topbar"> <div class="container"> <div class="topbar-nav"> <a href="">小米商城</a><span>|</span> <a href="">MIUI</a><span>|</span> <a href="">IoT</a><span>|</span> <a href="">云服務(wù)</a><span>|</span> <a href="">金融</a><span>|</span> <a href="">有品</a><span>|</span> <a href="">小愛(ài)開(kāi)放平臺(tái)</a><span>|</span> <a href="">政企服務(wù)</a><span>|</span> <a href="">資質(zhì)證照</a><span>|</span> <a href="">協(xié)議規(guī)則</a><span>|</span> <a href="">下載app</a><span>|</span> <a href="">Select Region</a><span>|</span> </div> <div class="topbar-cart"> <a href=""><i class="iconfont">&#xe622;</i>購(gòu)物車(chē)（0）</a> </div> <div class="topbar-info clearfix"> <a href="">登錄</a><span>|</span> <a href="">注冊(cè)</a><span>|</span> <a href="">消息通知</a><span>|</span> </div> </div> </div> <!--頭部導(dǎo)航欄--> <div class="header"> <div class="container"> <div class="header-logo"><img src="img/m.jpg"></div> <div class="header-nav"> <ul class="nav-list clearfix"><li class="nav-category"> <a href="">全部商品分類(lèi)</a></li><li class="nav-item"> <a href="">小米手機(jī)</a></li><li class="nav-item"> <a href="">紅米</a></li><li class="nav-item"><a href="">電視</a></li><li class="nav-item"><a href=""> 筆記本</a></li><li class="nav-item"> <a href="">家電</a></li><li class="nav-item"><a href=""> 新品</a></li><li class="nav-item"><a href=""> 路由器</a></li><li class="nav-item"><a href="">智能硬件</a></li><li class="nav-item"> <a href="">服務(wù)</a></li><li class="nav-item"> <a href="">社區(qū)</a></li> </ul> </div> <div class="header-search"> <form class="search-form"> <input type="search" name="keyword" class="search-text"> <input type="submit" value="&#xe626;" class="search-button iconfont"></form> </div> </div> </div> <div class="seckill"> <div class="seckill-header"></div> <div class="container"> <div class="seckill-nav" id="seckillNav"> <ul id="tabs"> <li class="active"><em>22:00</em><span><em>搶購(gòu)中<br>距結(jié)束 01:22:47</em></span></li> <li><em>00:00</em><span> 明日開(kāi)始</span></li><li><em>10:00</em><span> 明日開(kāi)始</span></li><li><em> 12:00</em><span> 明日開(kāi)始</span></li><li><em>14:00</em><span> 明日開(kāi)始</span></li> </ul> </div> <div class="seckill-goods" id="lists"> <ul class="clearfix active"> <li> <div class="bg"><img src="img/xm1.jpg"></div> <div class="info"> <a href="" class="name">60cm柔軟米兔抱枕 藍(lán)色</a> <p class="tips">大尺寸趴姿米兔</p> <p class="price">25元 <del>129元</del></p><!--del為刪除線標(biāo)簽--> <a href="" class="btn">登錄后搶購(gòu)</a> <p class="person">已有1245人設(shè)置提醒</p> </div> </li> <li> <div class="bg"><img src="img/xm2.jpg"></div> <div class="info"> <a href="" class="name">米兔遙控小飛機(jī)套裝</a> <p class="tips">迷你酷玩具，溜到起飛</p> <p class="price">458.00元 <del>488元</del></p><!--del為刪除線標(biāo)簽--> <a href="" class="btn">登錄后搶購(gòu)</a> <p class="person">已有12465人設(shè)置提醒</p> </div> </li> <li> <div class="bg"><img src="img/xm3.jpg"></div> <div class="info"> <a href="" class="name">小黃雞米兔 黃色</a> <p class="tips">Q萌造型 讓心融化</p> <p class="price">9.90元 <del>49元</del></p><!--del為刪除線標(biāo)簽--> <a href="" class="btn">登錄后搶購(gòu)</a> <p class="person">已有465人設(shè)置提醒</p> </div> </li> </ul> <ul class="clearfix"> <li> <div class="bg"><img src="img/xm6.jpg"></div> <div class="info"> <a href="" class="name">米家 LED 智能臺(tái)燈 典雅白</a> <p class="tips">照明之上，光的藝術(shù)品</p> <p class="price">158.00元 <del>169元</del></p><!--del為刪除線標(biāo)簽--> <a href="" class="btn">提醒我</a> <p class="person">已有145人設(shè)置提醒</p> </div> </li> <li> <div class="bg"><img src="img/xm5.jpg"></div> <div class="info"> <a href="" class="name">米兔兒童手表3 4G 紅色</a> <p class="tips">新增移動(dòng)支付功能</p> <p class="price">539.00元 <del>599元</del></p><!--del為刪除線標(biāo)簽--> <a href="" class="btn">登錄后搶購(gòu)</a> <p class="person">已有15人設(shè)置提醒</p> </div> </li> </ul> <ul class="clearfix"> <li> <div class="bg"><img src="img/xm7.jpg"></div> <div class="info"> <a href="" class="name">13.3"小米筆記本Air 銀色 </a> <p class="tips">雙核i3 8G 128G 集顯</p> <p class="price">25元 <del>129元</del></p><!--del為刪除線標(biāo)簽--> <a href="" class="btn">提醒我</a> <p class="person">已有45人設(shè)置提醒</p> </div> </li> <li> <div class="bg"><img src="img/xm4.jpg"></div> <div class="info"> <a href="" class="name">小米手環(huán)3 黑色</a> <p class="tips">全新OLED可觸摸大屏</p> <p class="price">9.90元 <del>169元</del></p><!--del為刪除線標(biāo)簽--> <a href="" class="btn">登錄后搶購(gòu)</a> <p class="person">已有18015人設(shè)置提醒</p> </div> </li> </ul> <ul class="clearfix"> <li> <div class="bg"><img src="img/xm8.jpg"></div> <div class="info"> <a href="" class="name">經(jīng)典款米兔（25cm） 白色 </a> <p class="tips">Q萌升級(jí)，做你的貼心玩伴</p> <p class="price">9.90元 <del>49元</del></p><!--del為刪除線標(biāo)簽--> <a href="" class="btn">提醒我</a> <p class="person">已有245人設(shè)置提醒</p> </div> </li> </ul> <ul class="clearfix"> <li> <div class="bg"><img src="img/xm9.jpg"></div> <div class="info"> <a href="" class="name">小米活塞耳機(jī) 清新版 黑色 </a> <p class="tips">新鮮綻放，五色可選</p> <p class="price">9.90元 <del>29元</del></p><!--del為刪除線標(biāo)簽--> <a href="" class="btn">提醒我</a> <p class="person">已有3675人設(shè)置提醒</p> </div> </li> </ul> </div> <p class="seckill-notice">*小米閃購(gòu)活動(dòng)規(guī)則：小米閃購(gòu)商品不享受該商品在小米商城的其他優(yōu)惠政策（包括但不限于優(yōu)惠券、贈(zèng)品、滿(mǎn)減、滿(mǎn)贈(zèng)等） <br/>溫馨提示：因可能存在系統(tǒng)緩存、頁(yè)面更新導(dǎo)致價(jià)格變動(dòng)異常等不確定性情況出現(xiàn)，如您發(fā)現(xiàn)活動(dòng)商品標(biāo)價(jià)或促銷(xiāo)信息有異常，請(qǐng)您立即聯(lián)系小米客服，以便我們及時(shí)補(bǔ)正。</p> </div> </div> <script src="myjs/xm.js" type="text/javascript"></script> </body> </html>

6.圖片素材
m.jpg

xm1.jpg

xm2.jpg

xm3.jpg

xm4.jpg

xm5.jpg

xm6.jpg

xm7.jpg

xm8.jpg

xm9.jpg

總結(jié)

以上是生活随笔為你收集整理的小米闪购首页实战（HTML+CSS+JS）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。