前言：
（前端小白）最近为了稍微复习一下html和css，决定写一个页面练练手，最后决定仿写一下小米官网的首页，静态页面实现的差不多，再就写了一下轮播图效果，零零散散的时间加起来，大致用了一天半时间。有很多不足的地方，欢迎大家给出指导！

最终效果：

结构：
       
源码：

  1. index.html
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小米首页</title><link rel="shortcut icon" href="./image/favicon.ico" type="image/x-icon"><link rel="stylesheet" href="./iconfont/iconfont.css"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/head.css"><link rel="stylesheet" href="./css/footer.css"><link rel="stylesheet" href="./css/index.css"><script src="./js/jquery.min.js"></script><script src="./js/banner.js"></script>
</head><body><div id="head"><div class="topImg"><a href="*"><img src="./image/topim.jpg" alt="小米大促"></a></div><div class="topbar"><!-- head_上 --><div class="site_topbar"><div class="container"><ul class="left"><li><a href="*">小米商品</a></li><li class="split"></li><li><a href="*">MIUI</a></li><li class="split"></li><li><a href="*">IOT</a></li><li class="split"></li><li><a href="*">云服务</a></li><li class="split"></li><li><a href="*">金融</a></li><li class="split"></li><li><a href="*">有品</a></li><li class="split"></li><li><a href="*">小爱开放平台</a></li><li class="split"></li><li><a href="*">企业团购b</a></li><li class="split"></li><li><a href="*">资质证照</a></li><li class="split"></li><li><a href="*">协议规则</a></li><li class="split"></li><li><a href="*">下载app</a></li><li class="split"></li><li><a href="*">智能生活</a></li><li class="split"></li><li><a href="*">Select Location</a></li></ul><ul class="left"><li><a href="*">登陆</a></li><li class="split"></li><li><a href="*">注册</a></li><li class="split"></li><li><a href="*">消息通知</a></li></ul><ul class="right"><li><img src="./image/cart.png" alt=""><em>购物车</em><em>(0)</em></li></ul></div></div><!-- head_下 --><div class="top_headbar"><div class="container"><div class="logo"><a href="*"><img src="./image/logo-footer.png" alt="logo"></a></div><div class="list"><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><div class="search"><form action=""><input type="text" name="search" class="search-text" placeholder="&nbsp;&nbsp;耳机" /><a href="*"><span class="search-btn iconfont icon-sousuo"></span></a></form></div></div></div></div></div><div id="home"><div class="container"><div class="home_main"><div class="top_row"><!-- 轮播图 --><div id="banner"><ol><a href="*"><li class="active"></li></a><a href="*"><li></li></a><a href="*"><li></li></a><a href="*"><li></li></a><a href="*"><li></li></a></ol><ul id="ul1"><li><a href="*"><img src="./image/banner/1.jpg" alt=""></a></li><li><a href="*"><img src="./image/banner/2.jpg" alt=""></a></li><li><a href="*"><img src="./image/banner/3.jpg" alt=""></a></li><li><a href="*"><img src="./image/banner/4.jpg" alt=""></a></li><li><a href="*"><img src="./image/banner/5.jpg" alt=""></a></li><li><a href="*"><img src="./image/banner/1.jpg" alt=""></a></li></ul></div><!-- 左侧列表 --><div class="left_home"><ul><li class="i"><a href="*">手机 电话卡</a><span class="iconfont icon-arrow-right-bold"></span><div class="top_goods"><ul><li><img src="./image/topgoods1.jpg"> </li><li><img src="./image/s2.jpg"> </li><li><img src="./image/s3.jpg"> </li><li><img src="./image/s4.jpg"> </li><li><img src="./image/s5.jpg"> </li><li><img src="./image/s3.jpg"> </li><li><img src="./image/s4.jpg"> </li><li><img src="./image/s6.jpg"> </li><li><img src="./image/s7.jpg"> </li><li><img src="./image/s8.jpg"> </li><li><img src="./image/s6.jpg"> </li><li><img src="./image/s3.jpg"> </li><li><img src="./image/topgoods1.jpg"> </li><li><img src="./image/s3.jpg"> </li><li><img src="./image/topgoods1.jpg"> </li><li><img src="./image/topgoods1.jpg"> </li><li><img src="./image/s2.jpg"> </li><li><img src="./image/s3.jpg"> </li><li><img src="./image/s4.jpg"> </li><li><img src="./image/s5.jpg"> </li><li><img src="./image/s4.jpg"> </li><li><img src="./image/s5.jpg"> </li></ul></div></li><li class="i"><a href="*">电视 盒子</a><span class="iconfont icon-arrow-right-bold"></span></li><li class="i"><a href="*">笔记本 显示器</a><span class="iconfont icon-arrow-right-bold"></span></li><li class="i"><a href="*">家电 插线板</a><span class="iconfont icon-arrow-right-bold"></span></li><li class="i"><a href="*">出行 穿戴</a><span class="iconfont icon-arrow-right-bold"></span></li class="i"><li class="i"><a href="*">智能 路由器</a><span class="iconfont icon-arrow-right-bold"></span></li><li class="i"><a href="*">电源 配件</a><span class="iconfont icon-arrow-right-bold"></span></li><li class="i"><a href="*">健康 儿童</a><span class="iconfont icon-arrow-right-bold"></span></li><li class="i"><a href="*">耳际 音响</a><span class="iconfont icon-arrow-right-bold"></span></li><li class="i"><a href="*">生活 箱包</a><span class="iconfont icon-arrow-right-bold"></span></li></ul></div></div><div class="sub_row"><div class="row_li6"><li><a href="*"><img src="./image/span1.png" alt=""><br><span>米粉卡</span></a></li><li><a href="*"><img src="./image/span2.png" alt=""><br><span>小米秒杀</span></a></li><li><a href="*"><img src="./image/span3.png" alt=""><br><span>以旧换新</span></a></li><li><a href="*"><img src="./image/span4.png" alt=""><br><span>F码通道</span></a></li><li><a href="*"><img src="./image/span5.png" alt=""><br><span>话费充值</span></a></li><li><a href="*"><img src="./image/span6.png" alt=""><br><span>企业团购</span></a></li></div><div class="row_li3"><ul><li><img src="./image/li1.jpg" alt="" /></li><li><img src="./image/li2.jpg" alt="" /></li><li><img src="./image/li3.jpg" alt="" /></li></ul></div></div></div></div><div id="page_main"><div class="container"><div class="page_sale"><div class="top"><p class="title">小米闪购</p><div class="swiper_controls"><span class="swiper_pre"><a href="*"><i class="iconfont icon-zuo"></i></a></span><span class="swiper_next"><a href="*"><i class="iconfont icon-you"></i></a></span></div></div><div class="flash_buy"><ul><li><div class="round">14:00 场</div><span class="iconfont icon-shandian"></span><p class="des">距离结束还有</p><div class="interval"><span>01</span><b>:</b><span>56</span><b>:</b><span>09</span></div></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/f1.jpg" alt=""></div><h3>小米快充 续航时间长 值得拥有</h3><p class="desc">变频 节能 省电环保</p><p class="price"><span class="color_orange"><b>198元</b></span><del>398元</del></p></div></a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/f8.png" alt=""></div><h3>巨省电 | 小米新1级空调A大1匹</h3><p class="desc">变频节能巨省电，自清洁</p><p class="price"><span class="color_orange"><b>1099元</b></span><del>1290</del></p></div></a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/f6.jpg" alt=""></div><h3>米家踢脚线电暖器 白色</h3><p class="desc">通电即热，冬日取暖神器</p><p class="price"><span class="color_orange"><b>569元</b></span><del>599元</del></p></div></a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/f5.png" alt=""></div><h3>Pinlo迷你三明治机 白色</h3><p class="desc">小巧身材，一机多用</p><p class="price"><span class="color_orange"><b>198元</b></span><del>208元</del></p></div></a></li></ul></div></div><div class="banner_ad_box"><a href="*"><img src="./image/banner_ad3.jpg" alt=""></a></div><div class="brick_box"><div class="top"><h2 class="title">手机</h2><div class="more right"><p>查看全部<a href="*"><span class="iconfont icon-xiangyou"></span></a></p></div></div></div><div class="clearfix"><div class="ul_left left"><ul><li><a href="*"><img src="./image/changtu.jpg" alt=""></a></li></ul></div><div class="ul_right left"><ul><li><a href="*"><div class="content"><div class="thumb"><img src="./image/w1.png" alt=""></div><h3>小米10至尊版</h3><p class="desc">120X变焦/120W秒冲/120Hz屏幕</p><p class="price"><span class="color_orange"><b>5299元起</b></span></p></div </a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/w2.jpg" alt=""></div><h3>Redmi K30 至尊版</h3><p class="desc">120Hz弹出全面屏，天玑1000+</p><p class="price"><span class="color_orange"><b>1299元起</b></span></p></div </a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/w3.jpg" alt=""></div><h3>腾讯黑鲨3s</h3><p class="desc">骁龙865处理器，120Hz刷新率</p><p class="price"><span class="color_orange"><b>3499元起</b></span></p></div </a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/w4.jpg" alt=""></div><h3>Redmi 9A</h3><p class="desc">5000mAh循环大电量</p><p class="price"><span class="color_orange"><b>599元起</b></span></p></div </a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/w5.png" alt=""></div><h3>小米10青春版5G</h3><p class="desc">120X变焦/轻薄5G手机</p><p class="price"><span class="color_orange"><b>1899元起</b></span></p></div </a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/w6.png" alt=""></div><h3>小米10</h3><p class="desc">120W秒冲/120Hz屏幕</p><p class="price"><span class="color_orange"><b>3799元起</b></span></p></div </a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/w7.jpg" alt=""></div><h3>Redmi K30 Pro</h3><p class="desc">双模5G,骁龙865</p><p class="price"><span class="color_orange"><b>5299元起</b></span></p></div </a></li><li><a href="*"><div class="content"><div class="thumb"><img src="./image/w8.jpg" alt=""></div><h3>小米 Pro至尊版</h3><p class="desc">120Hz屏幕/变焦</p><p class="price"><span class="color_orange"><b>1299元起</b></span></p></div </a></li></ul></div></div><div class="banner_ad_box" style="padding-bottom:24px"><a href="*"><img src="./image/banner_ad5.jpg" alt=""></a></div><!-- <div class="brick_box"><div class="top"><h2 class="title">手机</h2><div class="more right"><p>查看全部<a href="*"><span class="iconfont icon-xiangyou"></span></a> </p>   </div></div></div> --><!-- <div class="clearfix"></div> --></div></div><div id="footer"><div class="site_footer"><div class="container"><div class="footer_service"><ul><li><a href="*"><em class="iconfont icon-banshou"></em>预约维修服务</a></li><li><a href="*"><em class="iconfont icon-7tiantuihuanhuo"></em>预约维修服务</a></li><li><a href="*"><em class="iconfont icon-15tianwuliyoutuihuo"></em>预约维修服务</a></li><li><a href="*"><em class="iconfont icon-gift-box"></em>预约维修服务</a></li><li><a href="*"><em class="iconfont icon-dizhi"></em>预约维修服务</a></li></ul></div><div class="footer_links"><dl class="col_links"><dt>帮助中心</dt><dd><a href="*">账户管理</a></dd><dd><a href="*">购物指南</a></dd><dd><a href="*">订单操作</a></dd></dl><dl class="col_links"><dt>服务支持</dt><dd><a href="*">售后政策</a></dd><dd><a href="*">自助服务</a></dd><dd><a href="*">相关下载</a></dd></dl><dl class="col_links"><dt>线下门店</dt><dd><a href="*">小米之家</a></dd><dd><a href="*">服务网点</a></dd><dd><a href="*">授权体验店</a></dd></dl><dl class="col_links"><dt>关于小米</dt><dd><a href="*">了解小米</a></dd><dd><a href="*">加入小米</a></dd><dd><a href="*">投资者关系</a></dd><dd><a href="*">企业社会关系关系</a></dd><dd><a href="*">廉洁举报</a></dd></dl><dl class="col_links"><dt>关注我们</dt><dd><a href="*">新浪微博</a></dd><dd><a href="*">官方微信</a></dd><dd><a href="*">练习我们</a></dd><dd><a href="*">公益基金会</a></dd></dl><dl class="col_links"><dt>特色服务</dt><dd><a href="*">F码通道</a></dd><dd><a href="*">礼物码</a></dd><dd><a href="*">防伪查询</a></dd></dl><div class="col-contact"><p class="phone color_orange">400-100-5678</p><p class="tips">周一8:00-18:00（仅收市话费）</p><a class="service color_orange" href="*" target="_blank"><em class="iconfont icon-duanxin"></em>人工客服</a><p class="connect">关注小米：<a href="*"><span class="iconfont icon-weibo"></span></a><a href="*"><span class="iconfont icon-weixing"></span></a></p>  </div></div></div></div><div class="site_info"><div class="container"><div class="logo"></div><div class="info-text"><p class="article"><a href="*" target="_blank">小米商城</a><span class="sep">|</span><a href="*" target="_blank">MIUI</a><span class="sep">|</span><a href="*" target="_blank">米家</a><span class="sep">|</span><a href="*" target="_blank">米聊</a><span class="sep">|</span><a href="*" target="_blank">多看</a><span class="sep">|</span><a href="*" target="_blank">游戏</a><span class="sep">|</span><a href="*" target="_blank">路由器</a><span class="sep">|</span><a href="*" target="_blank">米粉卡</a><span class="sep">|</span><a href="*" target="_blank">政企服务</a><span class="sep">|</span><a href="*" target="_blank">小米天猫店</a><span class="sep">|</span><a href="*" target="_blank">小米集团隐私政策</a><span class="sep">|</span><a href="*" target="_blank">小米商城隐私政策</a><span class="sep">|</span><a href="*" target="_blank">小米商城用户协议</a><span class="sep">|</span><a href="*" target="_blank">问题反馈</a><span class="sep">|</span><a href="*" target="_blank">廉正举报</a><span class="sep">|</span><a href="*" target="_blank">诚信合规</a><span class="sep">|</span><a href="javascript:void(0);">Select Location</a></p><p class="ads">&copy;<a href="*" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号<a href="*" target="_blank">京ICP备10046444号</a><a rel="nofollow" href="*" target="_blank">京公网安备11010802020134号 </a><a href="*" target="_blank">京网文[2017]1530-131号</a> <br><a href="*" target="_blank">（京）网械平台备字（2018）第00005号</a><a href="*" target="_blank">互联网药品信息服务资格证 (京) -非经营性-2014-0090</a><a href="*" target="_blank">营业执照</a><a href="*" target="_blank">医疗器械公告</a><br><a href="*" target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案（京）【2018】WLSPJYBAHF-12 &nbsp;<a href="*" target="_blank">食品经营许可证</a><br>违法和不良信息举报电话：185-0130-1238 <a href="*" target="_blank">知识产权侵权投诉</a>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p></div><div class="info-links"><a href="*" target="_blank"><img src="./image/v-logo-1.png" alt="TRUSTe Privacy Certification" /></a><a href="*" target="_blank"><img src="./image/v-logo-2.png" alt="诚信网站" /></a><a href="*" target="_blank"><img src="./image/v-logo-3.png" alt="可信网站" /></a><a href="*" target="_blank"><img src="./image/v3.png" alt="网上交易保障中心" /></a><a href="*" target="_blank"><img src="./image/v7.png" alt="诚信经营 放心消费" /></a></div><div class="slogan"><img src="./image/slogan2020.png" alt=""></div></div></div></div><div id="tool_bar"><a href="*"><div><span class="iconfont icon-character"></span></div></a><a href="*"><div><span class="iconfont icon-mobile-phone"></span></div></a><a href="*"><div><span class="iconfont icon-banshou"></span></div></a><a href="*"><div><span class="iconfont icon-kefu-ermai"></span></div></a><a href="*"><div><span class="iconfont icon-icon4"></span></div></a><a href="#"><div style="margin-top:14px"><span class="iconfont icon-xiangshang"></span></div></a></div></div>
</body></html>
  1. base.css
*{margin:0;padding:0}
a{text-decoration:none;color:#333}
ul, ol{list-style-type:none}
img{border:0}
body,ul,li,h1,h2,h3,h4,h5,h6{font-size: 12;font-weight:normal}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
body,button,input,select,textarea{font:14px/1.5 tahoma, \5b85\4f53, sans-serif;}.left{float:left}
.right{float:right}.container{width:1228px;margin:0 auto}
.color_orange{color:#FF6700}
  1. footer.css
#footer .site_footer{overflow:hidden}
#footer .site_footer .footer_service{height:80px;margin-top:24px;border-bottom: 1px solid #e0e0e0;}
#footer .site_footer .footer_service li{float:left;width:244px;text-align:center;height: 25px;border-left: 1px solid #e0e0e0;font-size: 16px;line-height: 25px;padding-top:6px}
#footer .site_footer .footer_service li:first-child{border-left:0}
#footer .site_footer .footer_service a{color:#616161;}
#footer .site_footer .footer_service .iconfont{font-size:26px;padding-right:4px}
#footer .site_footer .footer_links .col_links{ float:left;width:160px;margin:0;padding-top:42px}
#footer .site_footer .footer_links .col_links dt{padding-bottom:32px}
#footer .site_footer .footer_links .col_links dd{padding-bottom:16px;color:#757575;font-size:12px}
#footer .site_footer .footer_links .col-contact{float: right;width: 246px;border-left: 1px solid rgb(224, 224, 224);text-align: center;color: rgb(97, 97, 97);margin-top:70px}
#footer .site_footer .footer_links .col-contact .phone{font-size:18px}
#footer .site_footer .footer_links .col-contact .tips{font-size:10px}
#footer .site_footer .footer_links .col-contact .service{font-weight:bold;display:block;width:122px;height:30px;border:1px solid #FF6700;margin-left:64px;margin-top:10px;padding-top:4px}
#footer .site_footer .footer_links .col-contact .connect{font-size:12px;}
#footer .site_footer .footer_links .col-contact .connect .iconfont{font-size:24px;padding-top:-2px}
#footer .site_footer .footer_links .col-contact .connect .iconfont:hover{color:#FF6700}#footer .site_footer .footer_links .col-contact .service:hover{background-color:#FF6700;color:white}
#footer .site_info{padding: 30px 0;font-size: 12px;background: #fafafa;position:relative;}
#footer .site_info .logo{ width:57px;height:57px;margin-right:10px;background:url('../image/logo-footer.png') no-repeat 50% 50%;position:absolute;top:30px;left:60px;}
#footer .site_info .info-text{position:absolute;top:30px;left:132px;}
#footer .site_info .info-text .article{color:#757575}
#footer .site_info .info-text .ads,.ads a{color:#B0B0B0;}
#footer .site_info .info-links{position:absolute;top:120px;left:130px}
#footer .site_info .info-links a:nth-child(5) img{width:106px;height:42px;margin-top:6px}
#footer .site_info .slogan{position:absolute;top:200px;left:490px;margin-bottom:30px}#footer .ads a:hover{color:#FF6700}
#footer dd a:hover{color: #FF6700;}
#footer .article a:hover{color: #FF6700;}#tool_bar{width:28px;height:260px;position:fixed;bottom:38px;right:32px}
#tool_bar div{width:100%;height:40px;border:1px solid #F5F5F5;background-color:#FFFFFF}
#tool_bar div span{font-size:18px;padding:4px;line-height:40px;color:#999999}
#tool_bar .iconfont:hover{color:#FF6700}
  1. head.css
#head .site_topbar{width:100%;height:42px;background-color:#333333;margin-top:-6px}
#head .site_topbar ul:nth-child(2){margin-left:140px}
#head .site_topbar ul:nth-child(2) li{margin-left:8px}
#head .site_topbar ul:nth-child(3){opacity:.5;}
#head .site_topbar img{width:30px;height:30px}
#head .site_topbar .split{width:1px;height:16px;background-color:#ffffff;margin-top:15px}
#head .site_topbar ul li{float:left;margin-right:8px;line-height:42px}
#head .site_topbar ul li a {font-size:10px;color:#ffffff}
#head .site_topbar ul li em{color:#ffffff;font-size:14px}#head .top_headbar{height:100px;}
#head .top_headbar .logo img{width:55px;height:55px;margin:24px 0 24px 0}
#head .top_headbar{position:relative}
#head .top_headbar .list{position:absolute;left:304px;top:34px;}
#head .top_headbar .list li{float:left;margin-right:18px}
#head .top_headbar .list a{color:rgb(10, 9, 9);font-size:16px}
#head .top_headbar .search{position:absolute;top:26px;right:58px;}
#head .top_headbar .search .search-text{width:244px;height:50px;border:1px solid gray;position:absolute;
top:-1px;left:-251px}
#head .top_headbar .search a{display:block;width:50px;height:50px;}
#head .top_headbar .search a:hover .search-btn{color:#ffffff;background-color:#FF6700}
#head .top_headbar .search .search-btn{display:inline-block;border:1px solid gray;width:30px;height:50px;margin-left:-6px;background-color:#ffffff;margin-top:-1px;}
#head .top_headbar .search .icon-sousuo{font-size:18px;font-weight:bold;line-height:50px;padding-left:18px;color:#2E1F1F}
  1. index.css
#head img{width:100%;height:120px}#home .home_main{position:relative}
#home .top_row{height:462px;}  /* 高度塌陷*/
#home .top_row div{height:462px;position:absolute;left:0;top:0}
#home .left_home{width:234px;background-color:#9B9B9D;opacity:.8;line-height:42px;}#home .left_home a{color:#ffffff;font-size:16px}#banner{width:100%;}
#banner ul li img{width:1228px;height:462px}#banner{overflow:hidden;width:1228px;height:462px;}
#banner ul{position:absolute;}
#banner ul li a{display: block;width:100%;height:100%}
#banner ul li{float:left;}
#banner ul li a{opacity:1}
#banner ol{position:absolute;bottom:20px;right:34px;z-index:2;cursor: pointer;}
ol li{float:left;width:6px;height:6px;border-radius:50%;border:2px solid #899093;background-color:#79818B;z-index:1;margin-left:5px}
.active{background-color:#ffffff;}#home .left_home ul li{float:left;width:100%;height:42px;position:relative}
#home .left_home ul .i:hover{background-color:#FF6700}
#home .left_home ul .i:first-child{margin-top:22px}
#home .left_home ul .i a{font-size:14px;padding-left:30px;}
#home .left_home .icon-arrow-right-bold{font-size:16px;font-weight:bold;color:#ffffff;position:absolute;right:20px;top:2px}#home .sub_row{overflow:hidden;margin-top:16px;margin-bottom:28px}
#home .sub_row .row_li6{width:234px;height:172px;float:left}
#home .sub_row .row_li6 li{float:left;width:80px;height:88px;background-color:#5F5750;margin:-2px;list-style-type: none;border:1px solid white}
#home .sub_row .row_li6 li img{width:24px;height:24px;margin:24px 0 0 28px;}
#home .sub_row .row_li6 li span{color:#ffffff;font-size:10px;padding:0 0 32px 16px}
#home .sub_row .row_li3{width:982px;height:172px;float: left;margin-left:12px}
#home .sub_row .row_li3 li{float:left;width:318px;height:172px;margin-right:14px}
#home .sub_row .row_li3 li:last-child{margin-right:0}
#home .sub_row .row_li3 li img{width:100%;height:100%}.top_goods{width:800px;height:300px;margin-left:232px;margin-top:-22px;display:flex;display:none}
#home .top_goods ul li{width:198px;height:66px;background-color:#ffffff;}
#home .top_goods ul li img{display:inline-block;width:60px;height:60px;margin-left:15px;margin-top:5px}
#home .top_goods ul li span{line-height:66px}
.i:hover .top_goods{display:block}#page_main{background-color:#f5f5f5;position:relative;}
.top{height:62px}
.title{font-size:22px;font-weight:200;line-height:58px;color:#333}
#page_main .page_sale .top .swiper_controls{position:absolute;top:26px;right:60px;}
#page_main .page_sale .top .swiper_controls span{display:inline-block;width:34px;height:22px;border:1px solid #E0E0E0;line-height:22px}
#page_main .page_sale .top .swiper_controls .swiper_pre{margin-right:-5px;}
#page_main .page_sale .top .swiper_controls .swiper_pre a{display:block;width:34px;height:22px;}
#page_main .page_sale .top .swiper_controls span i{padding-left:8px;}#page_main .page_sale .flash_buy{overflow:hidden}  /* 解决子元素浮动带来的父元素高度塌陷问题 */
#page_main .page_sale .flash_buy ul li{float:left;height:342px;width:234px;border-top:2px solid green;background:#FFFFFF;margin-right:14px}
#page_main .page_sale .flash_buy ul li:first-child{border-top:2px solid red}
#page_main .page_sale .flash_buy ul li:nth-child(2){border-top:2px solid blue}
#page_main .page_sale .flash_buy ul li:nth-child(3){border-top:2px solid pink}
#page_main .page_sale .flash_buy ul li:last-child{margin-right:0px;border-top:2px solid brown}.content .thumb{ width:160px;margin: 44px auto 22px;}
.content .thumb img{height:160px;width:160px;}
.content .thumb img a{width:234px;height:342px;display:block;color:black;}
.content .desc,.price,h3{text-align:center}
.content .desc{height: 18px;margin: 2px 20px 12px; font-size: 12px;color: #b0b0b0;overflow: hidden;white-space: nowrap;}
.clearfix .content img{width:100%;height:100%}#page_main .page_sale .flash_buy .round{ font-size: 21px;color: #ef3a3b;margin-top:62px;text-align:center}
#page_main .page_sale .flash_buy .icon-shandian{color:red;font-size:50px;padding-left:100px}
#page_main .page_sale .flash_buy .des{color:#6F6D6D;text-align:center;padding-top:30px}
#page_main .page_sale .flash_buy .interval{margin:26px 0 0 34px}
#page_main .page_sale .flash_buy .interval span{display:inline-block;width:48px;height:44px;background-color:#605751;color:#ffffff;text-align:center;font-size:24px;padding-top:4px;}#page_main .banner_ad_box{height:120px;margin-top:22px}
#page_main .banner_ad_box img{width:100%;height:100%}
#page_main .brick_box{position:relative}
#page_main .brick_box .more{font-size:16px;position:absolute;top:24px;right:0}
#page_main .icon-xiangyou{font-size:18px}.clearfix{height:616px;overflow:hidden}
#page_main .clearfix .ul_left{width:232px;height:100%}
#page_main .clearfix .ul_left img{width:100%;height:616px}
#page_main .clearfix .ul_right{width:994px;overflow:hidden;}
#page_main .clearfix .ul_right li{float:left;width:230.5px;height:300px;margin-left:18px;
background: #fff;margin-bottom:16px}/* 小米盒子阴影 */
.clearfix ul li{border-radius: 5px;transition: .5s;}
.clearfix ul li:hover{box-shadow:0px 6px 8px 3px #ccc;}
  1. banner.js
$(function () {var oBtns = null;var oImgs = null;var isNow = 0; //记录当前图片的下标var timer = null;// 设置定时器timer = setInterval(function () {isNow++;tab();}, 2500);//封装切换函数function tab() {if (!oImgs) {oImgs = $("#ul1 li").find("a");}if (!oBtns) {oBtns = $("#banner ol li");}if (isNow == 5) {isNow = 0;}oBtns.attr("class", "").eq(isNow).attr("class", "active");if (isNow == oBtns.size()) {oBtns.eq(0).attr("class", "active");//判断，若当前显示图片下标为当前按钮个数时，将oBtns中的第一个按钮的class置为active}oImgs.hide().css("opacity", "0.2").eq(isNow).show().animate({ opacity: 1 }, 500);}//点击小圆点，跳到对应的图片$("#banner ol a").click(function () {isNow = $(this).index();  //获取当前节点在兄弟节点中的下标tab();return false;  //阻止a链接的默认行为})//添加鼠标移入移出$("#banner").mouseenter(function () {clearInterval(timer);}).mouseleave(function () {timer = setInterval(function () {isNow++;tab();}, 2500);})})

完整源码请移步：https://github.com/Gladiola-fei/–XIAOMI/tree/master

前端小白仿写小米官网首页（静态页面+jquery轮播图）相关推荐

  1. 仿写小米官网 简单的HTML+CSS练习

    说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...

  2. 仿写小米官网 右边工具导航栏

    说明: 1.由于本人只学习了部分html和css,所以本文没有涉及到js部分. 2.本文并没有实现小米官网首页的全部功能,还存在很多问题.如果以后技能提升,会继续更新实现未完成的功能. 3.这个练习会 ...

  3. 【Web】HTML+CSS（No.55）实现小米官网首页静态效果

    模仿实现小米官网首页静态布局 需要素材点击图片联系我或私信.评论 效果图 HTML代码 <!DOCTYPE html> <html lang="en"> & ...

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

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

  5. 仿写小米官网（登录、注册页面、首页、详情页、购物车）

    功能介绍 各网页公用功能 返回顶部 调用jquery的方法实现效果,页面滚动超过任意位置时右侧出现返回顶部按钮,点击后平滑返回顶部 注册 用户需要填写手机号.昵称.密码且勾选同意协议,如果是合法数据且 ...

  6. 仿qq音乐官网部分静态页面

    简介: 这是我在刚学html和css的时候看着qq音乐官网自己敲的部分静态页面, 一共有五个静态页面,如下图 首页部分: 歌手部分: 新碟部分: 排行榜部分(可播放音乐): 分类歌单部分:

  7. HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码...

    HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...

  8. HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(HTML+CSS)~动漫主题html5网页模板-HTML期末作业课程设计期末大作业动漫主题html5网页模板-html5网页设计源码

    HTML期末大作业课程设计~仿阴阳师游戏官网首页html模板(DIV+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没 ...

  9. div+css静态网页设计游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板

    HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板 常见网页 ...

  10. HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板

    HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板 常见网页 ...

最新文章

  1. 经纬度坐标转换xy坐标 python_在Python中使用NewtonRaphson迭代将经纬度转换为xy Mollweide地图坐标...
  2. jQuery超炫酷按钮插件及源码
  3. ckeditor5加字数_CKEditor5基本使用
  4. 第五十九期:商用数据库之死：Oracle 面临困境
  5. （操作系统题目题型总结）第二章：处理器管理
  6. 【scala】2.控制结构和函数
  7. LuckyFrame执行Web自动化用例
  8. 【笔记】高效率但却没用过的一些numpy函数
  9. 关于微信小程序的视频的坑
  10. node-cookie- session
  11. 小班语言教案《水果屋》
  12. delphi 访问https 接口
  13. 三次hermite插值多项式例题_数值分析实验六(分段三次Hermite插值)
  14. 基于SSM的大学生就业信息管理系统
  15. 【已解决】ibyaml-cpp.a(memory.cpp.o): relocation R_X86_64_PC32 against symbol `_ZTVSt16_Sp_counted_baseIL
  16. 女子租房有钱交房租 男中介竟然不收她钱_无界财富
  17. 艾默生手操器TREXLFPNAWS1S
  18. Design Compiler初体验
  19. IDE,PATA,SATA,PCIe与SCSI接口
  20. 算法习题集 - Miscellaneous

热门文章

  1. 继续理解socekt具体使用--2
  2. 322. Coin Change
  3. 关于配色常见的几种搭配方式
  4. P34-c++中的代码重用-03多重继承详细介绍
  5. tensorflow roadshow 全球巡回演讲 会议总结
  6. VINS-Mono 论文公式推导与代码解析
  7. 常见的hash算法及其原理
  8. 项目经理怎么写周总结和周计划？
  9. 已知一/27网络中有一个地址是167.199.170.82,问这个网络的网络掩码、网络前缀长度和网络后缀长度是多少,求这个地址块的地址数、首地址以及末地址是多少
  10. 平均获客成本_获客成本5年翻了6倍，布局私域流量的背后隐藏了哪些惊人数据？...