前言：
（前端小白）最近为了稍微复习一下html和css，决定写一个页面练练手，最后决定仿写一下小米官网的首页，静态页面实现的差不多，再就写了一下轮播图效果，零零散散的时间加起来，大致用了一天半时间。有很多不足的地方，欢迎大家给出指导！
最终效果：
结构：
源码：
- 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=" 耳机" />
<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">
©
<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>
网络食品经营备案（京）【2018】WLSPJYBAHF-12
<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>
- 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}
- 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}
- 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}
- 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;}
- 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);
})
})
537
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
