xiaomiShop.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/xiaomiShop.css">
</head>
<body>
<div class="head-nav">
<!--加个container容器是因为小米商城的内容都是在同一宽度内的
左右两边都有一定的安全距离，便以container为基准，把内容放里面
-->
<div class="container">
<div class="head-nav-left">
<a href="#">小米官网</a>
<span class="sep">|</span>
<a href="#">小米商城</a>
<span class="sep">|</span>
<a href="#">MIUI</a>
<span class="sep">|</span>
<a href="#">IoT</a>
<span class="sep">|</span>
<a href="#">云服务</a>
<span class="sep">|</span>
<a href="#">天星数科</a>
<span class="sep">|</span>
<a href="#">有品</a>
<span class="sep">|</span>
<a href="#">小爱开放平台</a>
<span class="sep">|</span>
<a href="#">企业团购</a>
<span class="sep">|</span>
<a href="#">资质证照</a>
<span class="sep">|</span>
<a href="#">协议规则</a>
<span class="sep">|</span>
<a href="#" class="download">下载app
<div class="appcode">
<img src="img/download.png" alt="">
<p>小米商城APP</p>
</div>
</a>
<span class="sep">|</span>
<a href="#">Select Location</a>
</div>
<div class="head-nav-right">
<ul>
<li>
<a href="#">登录</a>
<span class="sep">|</span>
</li>
<li>
<a href="#">注册</a>
<span class="sep">|</span>
</li>
<li class="message">
<a href="#">消息通知</a>
<div class="dropmenu">
<div class="dropmenu-inner">
<p class="nomessage">暂无消息通知</p>
</div>
</div>
</li>
<li class="cart">
<a href="#"><i class="cart-icon"></i>购物车<span>( 0 )</span></a>
<div class="dropmenu">
<div class="dropmenu-inner">
<p class="nogoods">购物车中还没有商品，赶紧选购吧！</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="neck">
<div class="container">
<div class="neck-logo">
<a href="#">
<img src="img/logo-mi2.png" alt="">
</a>
</div>
<div class="neck-nav">
<ul>
<li>
<a href="#">Xiaomi手机</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">
<input type="text">
<span><i></i></span>
<div class="search-category">
<ul>
<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>
<li>
<a href="#">黑鲨5 Pro</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="banner">
<div class="container">
<div class="banner-swiper">
<ul id="banner-ul">
<!--li的图片要叠在一起，就要用到绝对定位-->
<li>
<a href="#">
<img src="img/banner1.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/banner2.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/banner3.jpg" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img/banner4.jpg" alt="">
</a>
</li>
</ul>
<!--小圆点也要绝对定位，所以相对定位设置在swiper身上-->
<div id="banner-dot">
<span class="active" data-idx="0"></span>
<span data-idx="1"></span>
<span data-idx="2"></span>
<span data-idx="3"></span>
</div>
</div>
</div>
</div>
<div class="ad">
<!--设置安全距离-->
<div class="container">
<a href="#">
<img src="img/ad1.jpg" alt="">
</a>
</div>
</div>
<div class="product-phone">
<div class="container">
<div class="phone-top">
<h2>手机</h2>
<div class="show-more">
<a href="#">查看更多</a>
<!--图标有背景和图片组成，span负责背景，i负责图片-->
<span class="phone-background">
<i></i>
</span>
</div>
</div>
<div class="phone-bottom">
<div class="phone-bottom-left">
<ul>
<li>
<a href="">
<img src="img/type-img1.jpg" alt="">
</a>
</li>
</ul>
</div>
<div class="phone-bottom-right">
<ul>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--左侧两张图-->
<div class="product-phone">
<div class="container">
<div class="phone-top">
<h2>手机</h2>
<div class="show-more">
<a href="#">查看更多</a>
<!--图标有背景和图片组成，span负责背景，i负责图片-->
<span class="phone-background">
<i></i>
</span>
</div>
</div>
<div class="phone-bottom">
<div class="phone-bottom-left">
<ul>
<li class="li-2">
<a href="">
<img src="img/type-img1.jpg" alt="">
</a>
</li>
<li class="li-2">
<a href="">
<img src="img/type-img1.jpg" alt="">
</a>
</li>
</ul>
</div>
<div class="phone-bottom-right">
<ul>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li>
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li class="li-2r">
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
<li class="li-2r">
<a href="#">
<img src="img/type-good-img1.png" alt="">
<div class="phone-name">
Redmi Buds 3半入耳真无线蓝牙耳机
</div>
<div class="phone-desc">
轻巧真无线 | 猫耳状稳固设计 | 18小时长续航
</div>
<div class="phone-price">
799元 <span>1999元</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/xiaomiShop.js"></script>
</body>
</html>
xiaomiShop.css
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
/* 保证布局不乱 */
min-width: 1226px;
background-color: #f5f5f5;
}
ul,li{
list-style: none;
}
.head-nav{
height: 40px;
background-color: rgb(51,51,51);
}
.container{
width: 1226px;
margin: 0 auto;
/* 居中： container是div元素且宽度为1226px
父元素body也是有宽度至少为1226px，所以当在更大屏幕的电脑打开时
body>1226px时container就有水平居中的必要 */
}
.head-nav-left{
float: left;
/* line-height: 40px; */
padding: 8px 0;/*不能用line-height，不然下面的p就有高度*/
/*字体12px再加上行高总共16px
要想头部导航栏的文字垂直居中，就要设置好距离
（40-16）/2=12px*/
/*但是left的height是45px*/
}
.head-nav .container{
height: 40px;
/*head-nav-left和head-nav-left浮动造成高度塌陷，
因此设置高度*/
/* 之所以不在上面直接写height，这是针对头部布局的container高度塌陷的
后续其他布局也有container，最好分开来写各自的container样式
overflow:hidden作用是当元素内的内容溢出的时候使它隐藏溢出的部分，即超出部分隐藏。
因为浮动会造成父元素高度为0，而浮动可以理解成溢出的部分，
在父元素设置overflow:hidden就会使溢出的浮动效果消除
至于为什么不用overflow:hidden，是因为浮动后父元素container高度塌陷，
而溢不溢出取决于父元素的父元素的高度，这里是nav，高为50px
也就是说超过50px，container里展示的内容就会被隐藏
而container里appcode里的照片属于container的内容，同时图片还以download为默认参照物
图片的祖先元素没有高度，图片也不会显示，且图片明显高度超过50px
所以如果用overflow:hidden图片会被隐藏
事实上如果用overflow:hidden，悬停在下载app时只会显示小三角（与图片无关，是另外的样式）
方案2：既然高度塌陷，那就给它高度
方案3：用clear:both;
*/
/*父元素高度为1px也能显示图片
图片要引入外部资源，加载时需要时间的，所以页面在渲染的时候不会留空间，
因此图片的父元素是固定不了图片的大小的,也限制不了图片的大小，图片加载后才知道大小,才会在img哪里显示
这也就是为什么如果给img的父元素设置了宽高，但是图片还是按照自己的尺寸大小显示，想要控制大小必须设置在img元素身上才有效果
这就相当于你知道这里放了一张椅子，椅子大小是固定的，人来了，才知道够不够坐，瘦人有剩余，胖人不够坐，
人要使用的空间大小和椅子的空间大小无关
*/
}
.head-nav-left>a{
font-size: 12px;
color: #B0B0B0;
text-decoration: none;
}
.head-nav-left>.sep{
margin: 0 .3em;/*span是内联元素，margin只能设置其左右*/
color: rgb(66,66,66);
}
.download{
position: relative;
}
.appcode{
position: absolute;
/*居中 left是移动父元素的50%的距离*/
left: 50%;
/*translateX平移的时候设置百分比是根据自身的大小*/
transform: translateX(-50%);
/*设置盒子大小，方便图片位置调整、文本居中等操作*/
width: 124px;
background-color: #fff;
box-shadow: 0 3px 5px rgba(0,0,0,.1);
top: 28px;
/* height: 150px; 合适的高度*/
height: 0;/*从零开始渐变*/
/* display: none;
渐变处理的元素不能用display转换，否则渐变不会生效，所以采用高度渐变
*/
overflow: hidden;
/*高度设为0后还是能显示图片，所以用hidden隐藏起来
但同时也把appcode里面的三角也隐藏掉了，所以把三角挪出去，与download同级
*/
transition: height .3s linear;/*通过高度来渐变*/
z-index: 2;
}
.appcode img{
/*因为图片加载的特性浏览器事先不知道它的大小
所以常常手动给图片设置宽度来限制图片大小*/
width: 90px;
margin: 18px 17px 12px;
}
.appcode p{
font-size: 14px;
color: rgb(51,51,51);
text-align: center;
}
.head-nav-left>a:hover{
color: white;
}
.download::before{
content: "";/*别忘了加这个，否则三角不会出来*/
position: absolute;
/* width: 0;
height: 0; */
border: 8px solid transparent;
border-bottom-color: white;
left: 50%;
transform: translateX(-50%);
top: 10px;
display: none;
}
/*当悬停在下载app的情况下高度变为184px，也间接把图片显示出来*/
.download:hover>.appcode{
height: 150px;
}
/*当鼠标悬停在下载app上时才去对伪元素设置效果*/
.download:hover:before{/*hover和before位置不能换*/
display: block;
/*设置的效果是将伪元素转换为块元素，block能将隐藏的元素显示出来*/
}
.head-nav-right{
float: right;
}
.head-nav-right ul>li{
float: left;
}
.head-nav-right li>a{
text-decoration: none;
color: #B0B0B0;
font-size: 12px;
height: 40px;
display: inline-block;/*会产生幽灵空白，a的高度会略微超出50px*/
vertical-align: top;/*只要不是默认的base-line都行，现在a的高度就不会超出了*/
line-height: 40px;
}
.head-nav-right .sep{
margin: 0 .3em;
line-height: 40px;
}
.cart{
position: relative;
}
.cart-icon{
display: inline-block;
vertical-align: middle;
background: url(../img/cart-show.png) no-repeat;
padding-bottom: 5px;
width: 20px;
height: 20px;
background-size: 100%;
}
.cart:hover .cart-icon{
background:url(../img/cart-hover.png) no-repeat;
padding-bottom: 5px;
width: 20px;
height: 20px;
background-size: 100%;
}
.cart>a{
width: 120px;
margin-left: 20px;
box-sizing: border-box;
background-color: rgb(66,66,66);
text-align: center;
}
.head-nav-right li>a:hover{
color: #fff;
}
.cart:hover>a{
color: #FA6600 !important;
background-color: #fff;
}
.dropmenu{/*为了后续方便扩展下拉栏而把下拉栏绝对定位*/
position: absolute;
box-shadow: 0 3px 5px rgba(0,0,0,.1);
/* top: 30px; */
height: 0;
overflow: hidden;
transition: height .3s linear;
background-color: #fff;/*不设置的话会被ad的图片挡住*/
z-index: 2;
}
li:hover .dropmenu{
min-width: 316px;
min-height: 100px;
}
.head-nav-right .dropmenu-inner{
text-align: center;
line-height: 100px;
}
.cart .dropmenu{
right: 0;
width: 316px;
/* height: 100px; *//*合适的高度*/
}
.cart .nogoods{
font-size: 12px;
}
.cart:hover>.dropmenu{
height: 100px;
}
.head-nav-right .message{
position: relative;
}
.message .dropmenu{
right: 0;
width: 316px;
}
.message .nomessage{
font-size: 12px;
}
.message:hover .dropmenu{
height: 100px;
}
.ad{
margin-top: 30px;
}
.ad a{
display: block;/*想要调整宽高就要先转为块元素*/
width: 100%;/*父元素宽度的100%，即1226px*/
}
.ad img{
width: 100%;
/*照片这种资源在加载时网页不清楚它的大小，需要自己设置
同时inline-block元素网页会给它加个幽灵空白，用F12检查元素会发现
照片下面有一些高出3px左右的部分*/
vertical-align: top;/*清除幽灵空白*/
}
.product-phone{
margin-top: 30px;
}
.product-phone .phone-top{
position: relative;
}
.product-phone h2{
height:58px;
/* 内容垂直居中 一行 */
line-height:58px;
font-size:22px;
font-weight:200;
color:#333;
}
.product-phone .show-more{
position: absolute;
right: 0;
/* 设置行高是为了增大show-more的区域的高度，方便top:0跟手机居中 */
line-height:58px;
top:0;
}
.product-phone .show-more a{
text-decoration: none;
font-size:16px;
color:#424242;
transition: all .3s linear;/*颜色渐变*/
}
.product-phone .phone-background{
display: inline-block;
width: 26px;
height: 26px;
background:#B0B0B0;
border-radius:13px;
vertical-align: middle;
transition: all .3s linear;/*颜色渐变*/
}
.phone-background>i{
display: inline-block;/*i标签也是内联元素*/
width: 26px;
height: 26px;
background: url(../img/arrow-right.png) no-repeat;
/* 设置背景图片的大小 == 该元素宽度的100% */
background-size: 100%;
vertical-align: top;
/*因为span里只有一个没有内容的i标签，如果i标签的对齐方式是top
那么i标签就与span在同一水平线上。而span又居中于查看更多，
所以i也居中于查看更多*/
}
.show-more:hover>a{
color: #FA6600;
}
.show-more:hover .phone-background{
background-color: #FA6600;
}
.phone-bottom img{
width: 234px;
vertical-align: top;
}
.phone-bottom-left{
float: left;
}
.phone-bottom{
height: 628px;/*清除浮动*/
/*不用overflow:hidden来解决塌陷是因为图片要求有阴影效果，
阴影会略微超过盒子大小，如果用hidden就会隐藏掉一部分阴影效果*/
}
.phone-bottom-left a{/*使整张照片都能点击链接*/
display: block;
}
.phone-bottom-left .li-2 img{
height: 300px;
}
.phone-bottom-left li{
margin-bottom: 14px;
}
.phone-bottom-right{
float: right;
width: 992px;
}
.phone-bottom-right li{
float: left;
text-align: center;
/*通过继承让子元素都居中，不用在子元素中一个个写居中*/
width: 234px;
height:300px;
background:#fff;
margin-left:14px;
margin-bottom:14px;
}
.phone-bottom-right img{
width: 160px;
}
.phone-bottom-right li a{
text-decoration: none;
display: block;
padding:24px 16px;
height:100%;/*使整个li盒子都能点击链接*/
box-sizing: border-box;
text-decoration: none;
}
.phone-bottom-right .phone-name{
color: #333;
font-size: 14px;
/* 让文本强制一行显示 */
white-space: nowrap;
/* 设置溢出隐藏 */
overflow: hidden;
/* 设置文本溢出的样式...*/
text-overflow: ellipsis;
}
.phone-bottom-right .phone-desc{
font-size:12px;
color:#b0b0b0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 10px;
}
.phone-bottom-right .phone-price{
font-size:14px;
color:#FF6A00;
margin-top:20px;
}
.phone-bottom-right .phone-price span{
color:#b0b0b0;
text-decoration: line-through;/*文本划掉效果*/
}
.phone-bottom-right .li-2r{
height:143px;
}
.phone-bottom-right .li-2r img{
float:right;
width:80px;
height:80px;
}
/* 对 type-bottom下面的li盒子施加阴影效果*/
.phone-bottom li:hover{
box-shadow: 0 5px 14px rgba(0,0,0,.1);
transform: translateY(-3px);
}
.phone-bottom li{
transition: all .2s linear;
}
.banner{
background-color: #fff;
}
.banner-swiper{
position: relative;
height: 460px;/*absolute脱离文档流，父元素高度塌陷*/
}
#banner-ul{
height: 100%;
}
#banner-ul li{
position: absolute;
opacity: 0;/*透明度，0就看不见了，1就是正常*/
transition: all .5s linear;/*点击切图的效果渐变*/
}
#banner-ul li:first-child{
/* 选中class="banner-ul“下面的第一个li */
opacity: 1;
}
#banner-ul img{
width:100%;
}
#banner-dot{
position: absolute;
bottom:20px;
right:15px;
}
#banner-dot span{
display: inline-block;
vertical-align: top;
width:6px;
height:6px;
border:2px solid #A7A8AA;
background:#373734;
border-radius:5px;
margin-left:3px;
}
#banner-dot .active{
background:#fff;
border-color:#8B8B8D;
}
.neck{
background: #fff;
padding-top: 12px;
}
.neck-logo{
float: left;
}
.neck-logo a{
display: block;
height: 88px;
padding-top: 10px;
box-sizing: border-box;
}
.neck-nav{
float: left;
margin-left: 166px;
}
.search{
float: right;
font-size: 0;
/*消除搜索栏和搜索图标间的幽灵空白，但是子元素的字号也会变0，
要单独设置*/
margin-top: 12px;
position: relative;
}
.neck .container{
height: 88px;
}
.neck-logo img{
width: 56px;
}
.neck-nav li{
float: left;
}
.neck-nav li a{
display: block;
text-decoration: none;
height: 88px;
color:rgb(51 51 51);
padding: 26px 10px 38px;
box-sizing: border-box;
}
.neck-nav li:hover a{
color: #FF6A00;
}
.neck-nav ul{
height: 88px;
/* line-height: 88px; */
}
.search input{
/*input是inline-block*/
width: 245px;
height: 50px;
padding: 0 10px;
box-sizing: border-box;
vertical-align: middle;/*跟span对齐*/
border:1px solid rgb(224,224,224);
transition: all .3s linear;
outline:none;/**/
}
.search span{
display: inline-block;
width: 50px;
height: 48px;
border: 1px solid rgb(224,224,224);
border-left:0;
/*input跟span左右边重叠使得重叠部分加粗了
消除一边使得重叠部分看起来像平常的1px边界一样*/
vertical-align: middle;/*跟input对齐*/
transition: all .3s linear;
}
.search span i{
display: inline-block;/*i标签是内联元素*/
width: 50px;
height: 48px;
background: url(../img/icon-search.png) no-repeat;
background-size: 33%;/* 控制背景图片大小 */
background-position: center;/* 控制背景图片的位置 */
transition: all .3s linear;
}
.search:hover input{
border-color: #B8B8B8;
outline:none;
}
.search:hover span{
border-color: #B8B8B8;
}
.search span:hover{
background:#FF6A00;
border-color:#FF6A00;
}
.search span:hover i{
/* background:url(./icon-seach-active.png) no-repeat;
background-size:50%;
background-position:center;
这种方式要重新设置一次背景太麻烦，直接换背景图就行*/
background-image: url(../img/icon-seach-active.png);
}
.search input:focus{
border-color: #FF6A00;
outline:none;/*不显示元素轮廓*/
/*对于input、button这样的组件，没有outline:none时focus改变不了
边界颜色等*/
}
.search input:focus + span{
/*兄弟选择器，a+b
a和b是兄弟，会选择a下面紧贴着的一个b*/
border-color: #FF6A00;
}
.search-category ul{
z-index: 1;
position: absolute;
background-color: #fff;
border:1px solid #FF6A00;
border-top: 0;/*ul跟input重叠，消除一边以消除重叠加粗*/
width: 243px;
display: none;/*没点击搜索栏就隐藏*/
}
.search-category li>a{
display: block;
font-size: 12px;
color: #424242;
text-decoration: none;
padding: 6px 15px;
}
.search-category li a:hover{
background-color: rgb(250,250,250);
}
.search input:focus + span + div ul{
display: block;/*点击搜索栏才显示*/
}
xiaomiShop.js
window.onload=function(){
//实现点击圆点切换图片
//选择id为banner-dot的元素
var bannerDots=document.getElementById("banner-dot");
//banner-dot的子元素span的集合，用来控制idx
var spanElems=bannerDots.children;
//banner-ul的子元素li集合，用来控制opacity
var liElems=document.getElementById("banner-ul").children;
//点击圆点切换图片
bannerDots.onclick=function(e){
//过滤span
if(e.target.nodeName=="SPAN"){
//获取当前点击对象的序号
var idx=e.target.getAttribute("data-idx");
}
var i;
for(i=0;i<spanElems.length;i++){
if(i==idx){
//对应的span的类名改为active
spanElems[i].className="active";
//对应li的opacity改为1
liElems[i].style.opacity=1;
}
else{
//对应的span的类名改为空
spanElems[i].className="";
//对应li的opacity改为0
liElems[i].style.opacity=0;
}
activeId=idx;//点击的时候才会给activeId赋值当前的idx
}
}
//定时器轮播
//通过类名选择元素，最后要用[]下标选择
var bannerSwiper=document.getElementsByClassName("banner-swiper")[0];
//页面加载轮播
var activeId=0;//用来记录span自动轮播到了哪里,从0开始，与idx对应
var bannerInterval = setInterval(function(){
activeId++;
if(activeId>3){
activeId=0;//超过3回到0，一直循环0123
}
var i;
for(i=0;i<spanElems.length;i++){
if(i==activeId){
//对应的span的类名改为active
spanElems[i].className="active";
//对应li的opacity改为1
liElems[i].style.opacity=1;
}
else{
//对应的span的类名改为空
spanElems[i].className="";
//对应li的opacity改为0
liElems[i].style.opacity=0;
}
}
},3000);
//鼠标移入停止轮播
bannerSwiper.onmouseenter=function(e){
clearInterval(bannerInterval);
}
//鼠标移出继续轮播
bannerSwiper.onmouseleave=function(e){
bannerInterval = setInterval(function(){
activeId++;
if(activeId>3){
activeId=0;//超过3回到0，一直循环0123
}
var i;
for(i=0;i<spanElems.length;i++){
if(i==activeId){
//对应的span的类名改为active
spanElems[i].className="active";
//对应li的opacity改为1
liElems[i].style.opacity=1;
}
else{
//对应的span的类名改为空
spanElems[i].className="";
//对应li的opacity改为0
liElems[i].style.opacity=0;
}
}
},3000);
}
}
