<!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>小米</title>
<link rel="icon" href="../img/favicon.ico">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/小米官网练习.css">
<link rel="stylesheet" href="../css/iconfont.css">
<link rel="stylesheet" href="../css/demo.css">
</head>
<body>
<!--顶部图片 -->
<div class="header">
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/41d16e66381cfeda7b6b39ab67678d5e.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="">
</a>
<!-- 黑色导航div -->
</div>
<div class="nav">
<div class="nav-center">
<ul class="nav-left">
<li><a href="#">小米商城</a><span>|</span></li>
<li><a href="#">MIUI</a><span>|</span></li>
<li><a href="#">loT</a><span>|</span></li>
<li><a href="#">云服务</a><span>|</span></li>
<li><a href="#">天星科技</a><span>|</span></li>
<li><a href="#">有品</a><span>|</span></li>
<li><a href="#">小爱开放平台</a><span>|</span></li>
<li><a href="#">企业团购</a><span>|</span></li>
<li><a href="#">资质证照</a><span>|</span></li>
<li><a href="#">协议规则</a><span>|</span></li>
<li class="app">
<a href="#">下载APP</a>
<span>|</span>
<div class="QRcode">
<img src="../img/93650133310ec1c385487417a472a26c.png" alt="" class="QRcode-img">
<p>小米商城APP</p>
</div>
<div class="sanjiao"></div>
</li>
<li><a href="#">智能生活</a><span>|</span></li>
<li><a href="#">select location</a></li>
</ul>
<ul class="nav-right">
<li class="cart">
<a href="#">购物车（0)</a>
<div class="cart-list">购物车还没有商品，赶紧加入吧</div>
</li>
<li><a href="#">信息通知</a></li>
<li><a href="#">注册</a><span>|</span></li>
<li><a href="#">登录</a><span>|</span></li>
</ul>
</div>
</div>
<!-- 白色导航div -->
<div class="white-nav">
<div class="white-wrap">
<div class="logo-mi">
<a href="#">
<img src="../img/mi-logo.png" alt="" class="mi-logo">
<img src="../img/mi-home.png" alt="" class="mi-home">
</a>
</div>
<div class="white-nav-center">
<ul>
<li>
<a href="#">
<img src="../img/大logo.png" alt="">
</a>
</li>
<li>
<a href="#">小米手机</a>
<div class="pull-down">
<div class="pull-down-center">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="../img/pull-down.jpg" alt="">
</div>
<p>小米10s</p>
<p>3299元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img src="../img/pull-down1.png" alt="">
</div>
<p>小米11</p>
<p>3999元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Redmi 红米</a>
<div class="pull-down">
<div class="pull-down-center">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="../img/pull-down1.png" alt="">
</div>
<p>小米10s</p>
<p>3299元起</p>
</a>
</li>
<li>
<a href="#">
<div class="img-box">
<img src="../img/pull-down.jpg" alt="">
</div>
<p>小米11</p>
<p>3999元起</p>
</a>
</li>
</ul>
</div>
</div>
</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="nav-input">
<input type="text" placeholder="小米之家">
<button class="button">搜索</button>
<div class="nav-input-list"></div>
</div>
</div>
</div>
<!-- 轮播图部分div -->
<div class="banner">
<div class="banner-center">
<div class="center-lfet">
<ul>
<li>
<a href="#">电视 机顶盒<u>▶</u></a>
<div class="center-left-list">
<div class="center-left-list-sub">
<ul>
<li>
<a href="#">
<img src="../img/left.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="../img/left.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="../img/left.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="../img/left.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="../img/left.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">手机 充电器<u>▶</u></a>
<div class="center-left-list">
<div class="center-left-list-sub">
<ul>
<li>
<a href="#">
<img src="../img/left-bottom.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="../img/left-bottom.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="../img/left-bottom.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="../img/left-bottom.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="../img/left-bottom.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
<li>
<a href="#">
<img src="../img/left-bottom.png" alt="">
<span>小米MIX FOLD</span>
</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="#">电视 机顶盒<u>▶</u></a></li>
<li><a href="#">电视 机顶盒<u>▶</u></a></li>
<li><a href="#">电视 机顶盒<u>▶</u></a></li>
<li><a href="#">电视 机顶盒<u>▶</u></a></li>
<li><a href="#">电视 机顶盒<u>▶</u></a></li>
<li><a href="#">电视 机顶盒<u>▶</u></a></li>
<li><a href="#">电视 机顶盒<u>▶</u></a></li>
<li><a href="#">电视 机顶盒<u>▶</u></a></li>
</ul>
</div>
</div>
</div>
<!-- 轮播图部分结束 -->
<!-- 伪对象部分 -->
<div class="weiduixiang">
<!-- 伪对象的六张opacity: ;透明度 -->
<div class="wdx">
<ul>
<li>
<a href="#">
<img src="../img/placeholder-40.png" alt="">
<span>小米之家</span>
</a>
</li>
<li>
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
<span>小米之家</span>
</a>
</li>
<li>
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="">
<span>小米之家</span>
</a>
</li>
<li>
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
<span>小米之家</span>
</a>
</li>
<li>
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
<span>小米之家</span>
</a>
</li>
<li>
<a href="#">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="">
<span>小米之家</span>
</a>
</li>
</ul>
</div>
<!-- 伪对象部分的三张超链接图片 -->
<div class="diyi">
<a href="#">
<img src="../img/weiduixiang.jpg" alt="">
</a>
</div>
<div class="dier">
<a href="#">
<img src="../img/weiduixiang.jpg" alt="">
</a>
</div>
<div class="disan">
<a href="#">
<img src="../img/weiduixiang.jpg" alt="">
</a>
</div>
</div>
<!-- 手机广告部分 -->
<div class="big-shouji">
<div class="h2">
<h2>广告部分</h2>
</div>
<a href="">
<img src="../img/big-img.jpg" alt="">
</a>
<div class="title1">
<h2>手机</h2>
<div class="more">
<a href="#">
<span>查看更多 <u>▶</u></span>
</a>
</div>
</div>
<!-- 居中的手机广告div -->
<div class="shouji-guanggao">
<!-- 左侧div -->
<div class="shouji-left-img">
<a href="#">
<img src="../img/left-img.jpg" alt="">
</a>
</div>
<!-- 右侧的8张图片设置 -->
<ul class="shouji-right">
<li>
<a href="#">
<img src="../img/shouji-rigth.png" alt="">
<h3>小米MIX FOLD</h3>
<p>折叠大屏｜自研芯片</p>
<p>9999元起</p>
</a>
</li>
<li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
<p>折叠大屏｜自研芯片</p>
<p>9999元起</p></a></li>
<li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
<p>折叠大屏｜自研芯片</p>
<p>9999元起</p></a></li>
<li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
<p>折叠大屏｜自研芯片</p>
<p>9999元起</p></a></li>
<li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
<p>折叠大屏｜自研芯片</p>
<p>9999元起</p></a></li>
<li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
<p>折叠大屏｜自研芯片</p>
<p>9999元起</p></a></li>
<li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
<p>折叠大屏｜自研芯片</p>
<p>9999元起</p></a></li>
<li><a href="#"><img src="../img/shouji-rigth.png" alt=""><h3>小米MIX FOLD</h3>
<p>折叠大屏｜自研芯片</p>
<p>9999元起</p></a></li>
</ul>
</div>
<!-- 隔断图 -->
<a href="#">
<img src="../img/隔断图.jpg" alt="">
</a>
<!-- 家电部分的h2让（广告部分）的h2重用了 -->
<div class="jiadian">
<h2>家电</h2>
</div>
<!--家电部分居中div加10个里边的div设置-->
<div class="home">
<div class="home2">
<a href="#">
<img src="../img/家电.jpg" alt="">
</a>
</div>
<div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
<p>全面屏设计</p>
<p><span>2899元</span> <s>3299元</s></p></a></div>
<div class="home1">
<a href="#">
<img src="../img/家电1.jpg" alt="">
<h3>小米全面屏电视65英寸 E65X</h3>
<p>全面屏设计</p>
<p><span>2899元</span> <s>3299元</s></p>
</a>
</div>
<div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
<p>全面屏设计</p>
<p><span>2899元</span> <s>3299元</s></p></a></div>
<div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
<p>全面屏设计</p>
<p><span>2899元</span> <s>3299元</s></p></a></div>
<div class="home2"><a href="#"><img src="../img/家电.jpg" alt=""> </a></div>
<div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
<p>全面屏设计</p>
<p><span>2899元</span> <s>3299元</s></p></a></div>
<div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
<p>全面屏设计</p>
<p><span>2899元</span> <s>3299元</s></p></a></div>
<div class="home1"><a href="#"><img src="../img/家电1.jpg" alt=""><h3>小米全面屏电视65英寸 E65X</h3>
<p>全面屏设计</p>
<p><span>2899元</span> <s>3299元</s></p></a></div>
<!-- 最后一个单独写 -->
<div class="home-last">
<a href="#">
<div class="last1">
<img src="../img/last.webp" alt="">
<p>米家电烤箱</p>
<p>299元</p>
</div>
<div class="last2">
<div>
<p>浏览更多</p>
<p>热门</p>
</div>
</div>
</a>
</div>
</div>
<!-- 视频广告部分开始 -->
<div class="shipin">
<h2>视频</h2>
</div>
<!--第一个超链接视频的设置 -->
<div class="video">
<div class="video1">
<!-- 新开一网站打开 -->
<a href="../video/video.mp4" target="_blank">
<img src="../img/video.jpg" alt="">
<span class="span">
<u>▶</u>
</span>
<a href="../video/video.mp4" target="_blank">
<p>Redmi 10X系列发布会 </p>
</a>
</a>
</div>
<div class="video1"></div>
<div class="video1"></div>
<div class="video1"></div>
</div>
</div>
</body>
</html>
/* 顶部图片隐藏 */
.header{
width: 100%;
height: 100%;
display: none;
}
/* 黑色导航 */
.nav{
width: 100%;
height: 40px;
background-color:#333;
}
/* 居中div */
.nav-center{
width: 1226px;
height: 100%;
margin: 0 auto;
}
/* a的字体颜色 */
a{
color: #b0b0b0;
}
/* 鼠标悬停时字体颜色 */
.nav-center a:hover{
color: #fff;
}
/* 左侧li浮动 定位*/
.nav-left>li{
float: left;
font-size: 12px;
line-height: 40px;
position: relative;
}
/* 右侧li浮动 定位*/
.nav-right>li{
float: right;
font-size: 12px;
line-height: 40px;
position: relative;
}
/* span竖杠(|)的外边距 */
.nav span{
margin: 0 3.6px;
color: #424242;
}
/* 购物车:大小 颜色 外边距 */
.cart{
width: 120px;
height: 40px;
background: #424242;
margin-left: 20px;
}
/* 购物车鼠标悬停时背景颜色 */
.cart:hover{
background: #fff;
}
/* 购物车鼠标悬停时a的的颜色*/
.cart:hover>a{
color: #ff6700;
}
/* 购物车下拉列表的属性，1:相对于右侧li定位，隐藏下拉列表，所有属性:all .3s的过度 */
.cart>.cart-list{
width: 316px;
/* 高度设置为0隐藏下拉列表 */
height: 0px;
background:#fff;
position: absolute;
right: 0px;
top: 40px;
box-shadow: 0 2px 10px #aaa;
color: #424242;
/* 下拉列表的文字溢出部分隐藏 */
overflow: hidden;
/* 过度:所有属性 .3s秒速度显示 */
transition: all .3s;
/* 在白色导航上边显示出来 */
z-index: 1;
}
/* 鼠标悬停时显示下拉列表，字体居中 */
.cart:hover>.cart-list{
height: 100px;
line-height: 100px;
}
/* app下载的属性中的二维码框设置 */
.app>.QRcode{
width: 124px;
/* 高度设置为0隐藏下拉列表 */
height: 0px;
background-color:#fff;
box-shadow: 0 1px 5px #aaa;
/* 相对于左侧li定位 */
position: absolute;
top: 40px;
left: 50%;
margin-left: -66px;
/* 下拉列表的文字溢出部分隐藏 */
overflow: hidden;
/* 过度:所有属性 .3s秒速度显示 */
transition:all .3s;
/* 在白色导航上边显示出来 */
z-index: 1;
}
/* 二维码图片的设置 */
.QRcode>.QRcode-img{
width: 90px;
height: 90px;
margin: 18px 0 0;
}
/* 二维码框中字体的设置 */
.QRcode>p{
font-size: 14px;
line-height: 1;
}
/* 鼠标悬停二维框显示 */
.app:hover>.QRcode{
height: 148px;
}
/* 小三角的设置:绘制特殊图形的方式写 */
.sanjiao{
width: 0;
height: 0;
border-bottom: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
/* 定位小三角并且隐藏 */
position: absolute;
left: 17px;
top: 32px;
display: none;
}
/* 鼠标悬停显示小三角 */
.app:hover>.sanjiao{
display: block;
}
/* 白色导航部分 */
.white-nav{
width: 100%;
height: 100px;
position: relative;
}
/* 居中部分 */
.white-wrap{
width: 1226px;
height: 100px;
margin: 0 auto;
}
/* logo部分 */
.logo-mi{
width: 55px;
height: 55px;
background: #ff6700;
float: left;
margin-top: 22.5px;
/* 定位加隐藏 */
position: relative;
overflow: hidden;
}
/* 中间文字导航部分 */
.white-nav-center{
width: 876px;
height:100px;
float: left;
}
/* 搜索框部分 */
.nav-input{
width: 295px;
height:100px;
float: right;
position: relative;
}
/* logo的图片大小 */
.logo-mi>a>img{
width: 100%;
height: 100%;
/* 定位加过渡*/
position: absolute;
top: 0;
transition: all .3s;
}
/* logo-mi-logo定位的设置 */
.mi-logo{
top: 0;
left: 0px;
}
/* logo-mi-home定位的设置 */
.mi-home{
top: 0;
left: -55px;
}
.logo-mi:hover>a>.mi-home{
left: 0px;
}
.logo-mi:hover>a>.mi-logo{
left: 55px;
}
/* 白色导航中间部分 浮动加字体间距 */
.white-nav-center ul>li{
float: left;
line-height: 100px;
}
/* 设置a的字体 颜色 内边距 */
.white-nav-center>ul>li>a{
font-size: 16px;
color: #333;
padding:0 10px;
}
/* logo右边图标的调整 */
.white-nav-center>ul>li:first-child{
margin-top: 9px;
margin-left: 20px;
margin-right: 40px;
}
/* 鼠标悬停a的文字变橘色 */
.white-nav-center>ul>li>a:hover{
color: #ff6700;
}
/* 白色导航栏的下拉列表的属性 */
.pull-down{
width: 100%;
height: 0px;
background: #fff;
box-shadow: 0 1px 2px #aaa;
position: absolute;
top: 100px;
left: 0;
box-sizing: border-box;
transition: all .3s;
overflow: hidden;
z-index: 2;
outline: none;
}
/* 居中的下拉列表部分 */
.pull-down-center{
width: 1226px;
height: 100%;
background-color: #fff;
margin: 0 auto;
}
.img-box{
width: 204px;
height: 110px;
border-right:1px solid #bdb8b8 ;
box-sizing: border-box;
margin-top: 30px;
margin-bottom: 15px;
}
.img-box img{
width: 160px;
height: 110px;
}
.pull-down-center p{
font-size: 12px;
line-height: 20px;
}
.pull-down-center p:nth-of-type(1){
color: #333;
}
.pull-down-center p:nth-of-type(2){
color:#ff6700;
}
/* 隐藏高度实现过渡效果 */
.white-nav li:hover>.pull-down{
height: 230px;
}
/* input属性 */
.nav-input>input{
width: 220px;
height: 50px;
border: 1px solid #e0e0e0;
box-sizing: border-box;
padding: 0 10px;
margin-top: 23.5px;
float: left;
/* 不显示轮廓线 */
outline: none;
border-right: none;
transition:all .3s;
z-index: 5;
}
/* button按钮属性 */
.nav-input>button{
width: 52px;
height: 50px;
background: #fff;
border: 1px solid #e0e0e0;
box-sizing: border-box;
float: left;
margin-top: 23.5px;
/* 不显示轮廓线 */
outline: none;
transition:all .3s;
}
/* hover鼠标悬停时的状态 */
.nav-input>input:hover,.nav-input>input:hover+button{
border-color: #b0b0b0;
}
/* focus（否卡尔时）鼠标获取焦点时的状态 */
.nav-input>input:focus,.nav-input>input:focus+button{
border-color: #ff6700;
}
/* 鼠标悬停在button按钮上的状态 */
.nav-input>button:hover{
background-color: #ff6700;
border-color: #ff6700;
color: #fff;
}
/* input下拉列表属性 */
.nav-input-list{
width: 219px;
height: 240px;
background-color: #fff;
border: 1px solid #ff6700;
border-top:none ;
/* 在input的div上定位 */
position: absolute;
left: 0;
top: 74px;
display: none;
}
/* 点击获取焦点时下拉列表出现 */
.nav-input>input:focus~.nav-input-list{
display: block;
}
/* 以上白色导航结束 */
/* banner轮播图部分 */
.banner{
width: 100%;
height: 460px;
/* 总高/宽度的设定 */
}
/* banner居中部分 */
.banner>.banner-center{
width: 1226px;
height: 460px;
background-color: #ff6700;
margin: 0 auto;
background-image: url(../img/小米动画练习.webp);
/* 引入动画 1名字 2播放时间 3循环次数(因飞内特) 4播放速度 5播放方向(哦特内特) */
animation: xiaomi 5s infinite ease-in-out alternate;
background-repeat: no-repeat;
background-size: 100% 100%;
}
/* 鼠标悬停动画停止播放 */
div>.banner-center:hover{
animation-play-state: paused;
}
/* 关键帧制作动画 url引入图片 */
@keyframes xiaomi{
0%{
background-image: url(../img/小米动画练习.webp);
}
50%{
background-image: url(../img/113.jpg);
}
100%{
background-image: url(../img/118.jpg);
}
}
/* 左侧的半透明div */
.center-lfet{
width: 234px;
height: 460px;
background-color: rgba(105,101,101,.6);
padding-top: 18px ;
line-height: 40px;
box-sizing: border-box;
position: relative;
}
/* 左侧半透明div里边的a样式 */
.center-lfet>ul>li>a{
font-size: 14px;
color: #fff;
margin-left: -90px;
}
/* 左侧半透明鼠标悬停li的样式 */
.center-lfet>ul>li:hover{
background-color: #ff6700;
}
/* 三角的特殊图形设置 */
.center-lfet>ul>li>a>u{
float:right;
margin-right: 20px;
text-decoration: none;
}
/* 滑动门的设置与定位 */
.center-left-list{
width: 992px;
height: 460px;
background: #fff;
float: left;
position: absolute;
left: 234px;
top: 0;
border: 1px solid #eee;
box-sizing: border-box;
border-left:none ;
display: none;
}
.center-left-list>div>ul>li{
float: left;
}
.center-left-list>div>ul>li>a{
font-size: 14px;
color: #333;
/* 在a里边加入inline-block会变成a的行内块元素img和span就会在a的范围里显示 */
display: inline-block;
height: 65px;
width: 170px;
padding-top: 13px;
padding-left: 10px;
box-sizing: border-box;
}
.center-left-list>div>ul>li a>span{
position: relative;
top: -20px;
left: 05px;
}
.center-left-list>div>ul>li>:hover{
color: #ff6700;
}
.center-lfet>ul>li:hover>.center-left-list{
display: block;
}
/* 伪对象部分css */
.weiduixiang{
width: 1226px;
height: 170px;
margin: 15px auto;
display: flex;
justify-content: space-between;
}
.weiduixiang .diyi,.dier,.disan{
transition: all .3s;
}
.weiduixiang>.diyi:hover,.dier:hover,.disan:hover{
box-shadow: 0 3px 6px #5f5750;
}
/* 第一个伪对象有六个div的设置 */
.weiduixiang>.wdx{
width: 234px;
height: 170px;
background-color: #5f5750;
float: left;
}
.weiduixiang img{
width: 316px;
height: 170px;
}
.wdx>ul>li>a img{
width: 24px;
height: 24px;
display:block;
margin: 0 auto 4px;
}
.wdx>ul>li span{
font-size: 12px;
color: #fff;
}
.wdx>ul>li a{
width: 76px;
height: 82px;
float: left;
padding-top: 20px;
box-sizing: border-box;
transition:all.3s;
border: 1px solid #686262;
border-right: none;
border-bottom: none;
}
.wdx>ul>li a{
opacity: .4;
}
.wdx a:hover{
opacity: 1;
}
/* 广告部分最外层的大div */
.big-shouji{
width: 100%;
height: 100%;
background-color: #f1eded;
}
/* （广告部分）h2的div的设置+加上（家电字体div）的设置 */
.h2,.jiadian{
width: 1226px;
height: 58px;
margin: 0 auto;
text-align: left;
line-height: 58px;
}
/* （广告部分）的字体设置+加上（家电字体）设置 */
.h2>h2,h2{
font-size: 24px;
font-weight: 300;
color: #333;
text-align: left;
}
/* 第一张居中（生生不息）的img图片 */
.big-shouji>a img{
margin: 0 auto;
width: 1226px;
height: 120px;
}
/* h2（手机）的div设置 */
.title1{
text-align: left;
width: 1226px;
height: 58px;
margin: 0 auto;
}
/* h2（手机）的样式设置 */
.title1>h2{
font-size: 24px;
line-height: 58px;
font-weight: 300;
margin-top: -3px;
display: inline-block;
}
/* （查看更多）的a设置 */
.title1>.more{
float: right;
width: 100px;
height: 100%;
}
/* （查看更多）的a设置 */
.title1>.more>a{
font-size: 16px;
line-height: 55px;
color: #333;
transition: all .3s;
}
/* 小三角的设置 */
.title1>.more>a u,u{
text-decoration: none;
}
/* （查看更多）的鼠标悬停设置 */
.title1>.more>a:hover{
color: #ff6700;
}
/* 居中的手机广告div部分 */
.shouji-guanggao{
width:1240px ;
height: 614px;
margin: 0 auto;
}
/* 手机广告里的左侧div设置 */
.shouji-left-img{
width: 234px;
height: 614px;
background-color: aqua;
float: left;
margin-left:8px;
box-sizing: border-box;
transition: all .3s;
}
/* 左侧div的过渡设置+加上右侧8个a鼠标悬停在a上的转换+加上家电部分十个a的鼠标悬停转换+视频部分的4个div转换 */
.shouji-left-img:hover,.shouji-right li a:hover,.home .home1 a:hover,.home2 a:hover,.video>div:hover{
box-shadow: 0 8px 18px rgb(182, 168, 168);
transform:translateY(-2px) ;
}
/* 左侧图片大小 */
.shouji-left-img>a img{
width: 234px;
height: 614px;
}
/* 右侧8张图片的大小+加上家电部分的img大小 */
.shouji-right img,.home1 img{
width: 160px;
height: 160px;
margin-top: 20px;
}
/* 右侧八张超链接a的设置 */
.shouji-right li a{
width: 234px;
height: 300px;
background-color: #fff;
float: left;
margin-left: 13px;
margin-bottom: 14px;
box-sizing: border-box;
transition: all .3s;
}
/* h3字体的设置+加上家电部分h3的设置 */
.shouji-right li a>h3,.home1 h3,p{
margin-top: 15px;
font-size: 14px;
font-weight: 400;
color: #333;
}
/* 字体，第一个p的设置+加上家电部分的第一个p的设置 */
.shouji-right li a>p:nth-of-type(1),.home1 p:nth-of-type(1){
font-size: 12px;
color: #b0b0b0;
margin-top: 5px;
}
/* 字体，第二个p的设置+加上家电部分的第二个p的设置*/
.shouji-right li a>p:nth-of-type(2),.home1 p:nth-of-type(2){
font-size: 14px;
color: #ff6700;
margin-top: 10px;
}
/* 家电部分居中div设置 */
.home{
width: 1226px;
height: 614px;
margin: 0 auto;
}
/* 实在没找到重用的元素，单独写。 */
.home>.home1 a,.home2 a{
width: 234px;
height: 300px;
background-color: #fff;
float: left;
transition: all .3s;
}
/* 定义home1的外边距 */
.home1 a{
margin-left: 14px;
margin-bottom: 15px;
}
/* 删除线 */
s{
color: #aaa;
}
/* 10个中的最后一个div */
.home-last{
width: 234px;
height: 300px;
float: left;
margin-left: 14px;
}
/* 米家电烤箱图片设置 */
.last1 img{
width: 80px;
height: 80px;
margin-left: 100px;
margin-top: 29px;
box-sizing: border-box;
}
/* 第十个中的上边的那一块 */
.last1{
width: 234px;
height: 143px;
background-color: #fff;
margin-bottom: 13px;
box-sizing: border-box;
float: left;
transition: all .3s;
}
/* 第十个中下边的那一块，去掉下外边距 */
.last2{
width: 234px;
height: 143px;
background-color: #fff;
box-sizing: border-box;
float: left;
transition: all .3s;
}
/* 给上边的一个p设置定位 */
.last1 p{
position: relative;
right: 50px;
top: -70px;
}
/* 给上边的第一个p设置样式 */
.last1 p:nth-of-type(1),.last2 p{
color: #333;
font-size: 14px;
}
/* 给上边的第二个p设置样式 */
.last1 p:nth-of-type(2){
color: #ff6700;
font-size: 14px;
position: relative;
right: 63px;
}
/* 给第十个的两个都设置上过渡和阴影 */
.home-last a>div:hover{
box-shadow: 0 8px 18px rgb(182, 168, 168);
transform:translateY(-2px) ;
}
/* 设置下p的距离没写具体内容内容，因为图标不生效 */
.last2 p{
margin-top: 30px;
}
/* 以上手机、家电部分样式完成 */
/* 单独给（视频）字体的样式设置 */
.shipin{
width: 1226px;
height: 58px;
margin: auto;
}
/* 单独给（视频）字体的样式设置 */
.shipin h2{
position: relative;
left: -980px;
line-height: 58px;
}
/* 视频div部分开始 */
/* 居中，视频部分的设置 */
.video{
width: 1226px;
height: 285px;
margin: 0 auto;
/* 写在父元素中的属性 （切记） */
display: flex;
justify-content: space-between;
}
/* 视频中div的设置 */
.video>div{
width: 296px;
height: 285px;
background-color: #fff;
transition: all .3s;
margin-bottom: 14px;
}
/* 视频图片大小 */
.video>div img{
width: 100%;
height: 180px;
}
/* 三角形样式 */
.video>div u{
color: #fff;
}
/* 播放按钮的属性 */
.span{
width: 35px;
height: 25px;
border: 1px solid #fff;
border-radius: 30px;
position: relative;
top: -50px;
left: 20px;
transition: all .2s;
display: block;
}
/* 鼠标悬停在播放按钮上的属性 */
.video>div a:hover>.span{
background-color: #ff6700;
border: none;
}鼠标放在视频的播放按钮上下边的文字会有会跟着上移，并且从手机部分开始后都会有鼠标悬停在div有一瞬间的由灰黑的很快的过程需要仔细看，鼠标移开时也会有一瞬间由灰变黑的过程。
老师帮忙看一下我这输入框和右面图标之间总有缝隙，怎么回事
京公网安备 11011402011233号