小米闪购首页实战（HTML+CSS+JS）

左手的ㄟ右手 2022-03-19 03:40 334阅读 0赞

**1.效果图如下**  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]  
**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;
    }
    /*头部导航栏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;
    }
    /*主体设计样式*/
    .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;/*鼠标形状*/
    	
    }
    .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;/*显示点*/
    	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.矢量图标CSS样式（iconfont.css）**  
说明：这个可以自己去阿里巴巴的网页下载，[网站链接][Link 1]，且里面有使用说明，需要将iconfont.css和iconfont.eot都放在CSS文件夹下面。  
**阿里巴巴网站的页面图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]  
**4.js代码如下（xm.js）**

// JavaScript Document
    //JS控制标签切换显示
    //获取ul里的li标签
    var tabs=document.getElementById("tabs").getElementsByTagName("li");
    var lists=document.getElementById("lists").getElementsByTagName("ul");
    //给每一个li绑定单击响应事件
    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)//如果正在点击此li
    		{
    		tabs[i].className="active";//则赋值active
    		//JS控制商品切换显示
    		lists[i].className="clearfix active";
    		}
    		else
    		{
    		tabs[i].className="";//否则赋值为空
    		lists[i].className="clearfix";
    		}
    	}
    }
    //JS控制菜单固定
    var sck=document.getElementById("seckillNav");
    window.onscroll=function()
    {
      var sc=document.documentElement.scrollTop ||documet.body.scrollTop || window.pageYOffset;//解决浏览器兼容问题
      if(sc>=260)
      {
    	  sck.className="seckill-nav seckill-fixed";
      }
      else
      {
    	  sck.className="seckill-nav";
    	  
      }
    };

**5.完整代码**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>小米闪购-小米商城</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="">云服务</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="">下载app</a><span>|</span>
    <a href="">Select Region</a><span>|</span>
    </div>
    <div class="topbar-cart">
    <a href=""><i class="iconfont"></i>购物车（0）</a>
    </div>
    <div class="topbar-info  clearfix">
    <a href="">登录</a><span>|</span>
    <a href="">注册</a><span>|</span>
    <a href="">消息通知</a><span>|</span>
    </div>
    </div>
    </div>
    
    <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="">全部商品分类</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="">智能硬件</a></li>
     <li class="nav-item"> <a href="">服务</a></li>
     <li class="nav-item">  <a href="">社区</a></li>
    </ul>
    </div>
    <div class="header-search">
    <form class="search-form">
    <input type="search" name="keyword" class="search-text">
    <input type="submit" value="" 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>抢购中<br>距结束 01:22:47</em></span></li> 
    <li><em>00:00</em><span> 明日开始</span></li>
     <li><em>10:00</em><span> 明日开始</span></li>
     <li><em> 12:00</em><span> 明日开始</span></li>
     <li><em>14:00</em><span> 明日开始</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柔软米兔抱枕 蓝色</a> 
    <p class="tips">大尺寸趴姿米兔</p>
    <p class="price">25元 <del>129元</del></p>
    <a href="" class="btn">登录后抢购</a>
    <p class="person">已有1245人设置提醒</p>
    </div>
    </li>
    <li>
    <div class="bg"><img src="img/xm2.jpg"></div>
    <div class="info">
    <a href="" class="name">米兔遥控小飞机套装</a> 
    <p class="tips">迷你酷玩具，溜到起飞</p>
    <p class="price">458.00元 <del>488元</del></p>
    <a href="" class="btn">登录后抢购</a>
    <p class="person">已有12465人设置提醒</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>
    <a href="" class="btn">登录后抢购</a>
    <p class="person">已有465人设置提醒</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 智能台灯 典雅白</a> 
    <p class="tips">照明之上，光的艺术品</p>
    <p class="price">158.00元 <del>169元</del></p>
    <a href="" class="btn">提醒我</a>
    <p class="person">已有145人设置提醒</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">新增移动支付功能</p>
    <p class="price">539.00元 <del>599元</del></p>
    <a href="" class="btn">登录后抢购</a>
    <p class="person">已有15人设置提醒</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>
    <a href="" class="btn">提醒我</a>
    <p class="person">已有45人设置提醒</p>
    </div>
    </li>
    <li>
    <div class="bg"><img src="img/xm4.jpg"></div>
    <div class="info">
    <a href="" class="name">小米手环3 黑色</a> 
    <p class="tips">全新OLED可触摸大屏</p>
    <p class="price">9.90元 <del>169元</del></p>
    <a href="" class="btn">登录后抢购</a>
    <p class="person">已有18015人设置提醒</p>
    </div>
    </li>
    </ul>
    <ul class="clearfix">
    <li>
    <div class="bg"><img src="img/xm8.jpg"></div>
    <div class="info">
    <a href="" class="name">经典款米兔（25cm） 白色 </a> 
    <p class="tips">Q萌升级，做你的贴心玩伴</p>
    <p class="price">9.90元 <del>49元</del></p>
    <a href="" class="btn">提醒我</a>
    <p class="person">已有245人设置提醒</p>
    </div>
    </li>
    </ul>
    <ul class="clearfix">
    <li>
    <div class="bg"><img src="img/xm9.jpg"></div>
    <div class="info">
    <a href="" class="name">小米活塞耳机 清新版 黑色 </a> 
    <p class="tips">新鲜绽放，五色可选</p>
    <p class="price">9.90元 <del>29元</del></p>
    <a href="" class="btn">提醒我</a>
    <p class="person">已有3675人设置提醒</p>
    </div>
    </li>
    </ul>
    </div>
    <p class="seckill-notice">*小米闪购活动规则：小米闪购商品不享受该商品在小米商城的其他优惠政策（包括但不限于优惠券、赠品、满减、满赠等）
    <br/>温馨提示：因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现，如您发现活动商品标价或促销信息有异常，请您立即联系小米客服，以便我们及时补正。</p>
    </div>
    </div>
    <script src="myjs/xm.js" type="text/javascript"></script>
    </body>
    </html>

**6.图片素材**  
m.jpg  
![小米图标][20190214210404886.jpg]  
xm1.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]  
xm2.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 3]  
xm3.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 4]  
xm4.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 5]  
xm5.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 6]  
xm6.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 7]  
xm7.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 8]  
xm8.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 9]  
xm9.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70]: /images/20220319/44431bcd9ffd492c8a5de8df8145320d.png
[Link 1]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 1]: /images/20220319/948211c54a18472ba658671320a4642e.png
[20190214210404886.jpg]: /images/20220319/86d2e356603b41399d7e00c8b6ffe346.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 2]: /images/20220319/a29236c192374c7d8964a938493f11fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 3]: /images/20220319/88e0cca55d814cf7b292052ffcf2e686.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 4]: /images/20220319/c2a2a1d1f8da4e168961e25d6675a1e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 5]: /images/20220319/d364382e643b4afb9176a429871612bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 6]: /images/20220319/dbe7b45b7a3943f4b8dedc60cacd1d33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 7]: /images/20220319/292bab1c000846fba8004af803e18989.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 8]: /images/20220319/96321f4211cd4a268f79a288c006f537.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 9]: /images/20220319/dbdcbf1cd1cb4e49aaf6ea447f8ff004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_16_color_FFFFFF_t_70 10]: /images/20220319/ca892de12668432fae61cd154d193e2d.png