<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/reset.css" />
<style>
/*滑动门部分技术难点分析
1.第一部分解析，/*滑动门开始*//*通过绝对定位和给.banner>.wrap设置相对定位，值为left:0;top:实现巧妙定位，思路很清晰的定位;
代码展示：.slide{
width: 234px;
height: 460px;
background: rgba(105,101,101,.6);
position: absolute;
left: 0;
top: 0;
padding: 20px 0;
box-sizing: border-box;记住设置怪异盒模型
}
.banner>.wrap{
position: relative;
}
2.第二部分解析，当我们创建li的时候，这段代码可以有效帮我们节省时间，/*ul>li*10>a[href=#]{手机 电话卡}>i.iconfont{>}
3.第三部分解析，开始创建滑动门，.slide-list，采用绝对定位定位到相应位置，
.slide li:hover>.slide-list{/*当鼠标悬停到slide里面的li时候，子元素div以block展现
display: block;
}
4.盒阴影.slide-list里面的四个数值分别表示：box-shadow: 0 8px 16px rgba(0,0,0,.18);/*水平，垂直，模糊度，颜色
5.第五部分滑动门内容，/*滑动门第一部分结束，复制粘贴到第二个li里面（电视盒子），然后发现一个问题，三个和两个的我们不知道怎么办了，继续复制到相应的li上，删除一组ul，还剩三组，最主要的是要改div的宽度，
需要再去一个名字设置宽度，设置slide-list1{
width:744px;height:不用设;
}
6.记得在最后一个滑动门由三个ul组成的里面，div类名设置 slide-list slide-list1才能生效*/
*{
margin: 0;
padding: 0;
list-style-type: none;
text-decoration: none;
}
.wrap{
width: 1226px;
height: 40px;
font-size: 12px;
margin: 0 auto;
}
.cart-list{/*默认跟父元素左左对齐*//*然后设置right0像素*/
width: 316px;
height: 0px;
box-shadow: 0 2px 10px rgba(0,0,0,.15);
position: absolute;
right: 0px;/*相对于已定位的父元素定位*/
top: 40px;
text-align: center;
line-height: 100px;
color: #424242;
overflow: hidden;
background-color: #FFF;
}
.cart:hover>.cart-list{/*鼠标悬停的时候把高度给出来，没悬停的时候是0*/
height: 108px;
transition: all .3s linear;
}
.cart:hover{
background-color: #fff;
}
.cart:hover a{/*实现了共用*/
color: #FF6700;
}
.nav{
position: relative;
width: 100%;
height: 100px;
background-color: #fff;
}
.logo{
width: 56px;
height: 56px;
float: left;
margin-top: 22px;
}
.logo img{
width: 56px;
height: 56px;
}
.logo img:hover{
transform: translateX(2px);
}
.search{
width: 300px;
height: 50px;
position: relative;
float: left;
margin-top: 25px;
}
.nav-bar{
width: 868px;
height: 100px;
float: left;
padding-left: 172px;
box-sizing: border-box;/*怪异不由内容撑开*/
}
.nav-bar>ul>li{/*儿子的儿子*/
float: left;
font-size: 16px;
padding: 38px 10px;
}
.nav-bar>ul>li>a:hover{
color: #FF6700;
}
.search>input{
width: 245px;
height: 50px;
padding: 0 10px;
border: 1px solid #e0e0e0;
box-sizing: border-box;
float: left;
border-right: 0;
outline: none;
}
.search>a{
width: 50px;
height: 50px;
float: left;/*设置浮动的目的，可转换成成块级，并在同 一行显示*/
border: 1px solid #e0e0e0;
box-sizing: border-box;
line-height: 55px;color: #616161;
font-size: 24px;
color: #616161;
}
.search> a:hover{
background-color: #FF6700;
transition: all .3s linear;
border-color: #FF6700;
color: #fff;
}
/*获取焦点元素*/
.search>input:hover,.search>input:hover+a{
border-color: #b0b0b0;
}
.search>input:focus,.search>input:focus+a{
border-color: #ff6700;
}
/*下拉列表*/
.nav-bar-list{
width: 100%;
height: 229px;
background-color: #fff;
border-top: 1px solid #e0e0e0;
box-shadow: 0 3px 4px rgba(0,0,0,.18);
position: absolute;
left: 0;
top: 100px;
display: none;
z-index: 850;
}
.nav-bar li:hover>.nav-bar-list{
display: block;
}
.nav-bar-list li{
width: 204px;
height: 200px;
padding-top: 35px;
float: left;
}
.img-box{
width: 100%;
height: 110px;
border-right:1px solid #E0E0E0 ;
box-sizing: border-box;
margin-bottom: 16px;
}
.img-box img{
height: 110px;
}
.name1,.price1{
font-size: 12px;
line-height: 20px;
}
.price1{
color: #ff6700;
}
.img-box-last{
border-right: none;
}
/*下拉搜索框开始*/
.search-list{
width: 246px;
height: 241px;
border: 1px solid #ff6700;
border-top: none;
background-color: #FFFFFF;
box-sizing: border-box;
position: absolute;
top: 50px;left: 0;
display: none;
z-index: 800;
}
.search>input:focus~.search-list{
display: block;
}
.search-list>ul>li>a{
width: 243px;
height: 30px;
padding: 6px 15px;
display: block;
font-size: 12px;
text-align: left;
box-sizing: border-box;
}
.search-list li:hover{
background-color: #e0e0e0;
}
/*banner开始*/
.banner{
height: 460px;
width: 100%;
}
.banner-box{
width: 1226px;
height: 460px;
background-color: deepskyblue;
background-image: url(img/红米K50大图片.jpg);
background-size:100%;
background-repeat: no-repeat;
/*通过annimation调用banner-box*/
animation: banner-box 10s linear infinite;
}
.banner-box:hover{/*通过animation-play-state:paused;控制动画移动到banner-box实现动画暂停*/
animation-play-state:paused ;
cursor: pointer;
}
@keyframes banner-box{
0%{
background-image: url(img/红米K50大图片.jpg);
}
25%{
background-image: url(img/轮播图02.webp);
}
50%{
background-image: url(img/轮播图04.webp);
}
75%{
background-image: url(img/轮播图05.webp);
}
100%{
background-image: url(img/轮播图02.webp);
}
}
/*banner结束*/
/*滑动门开始*//*通过绝对定位和给.banner>.wrap设置相对定位，值为left:0;top:实现巧妙定位，思路很清晰的定位;*/
.slide{
width: 234px;
height: 460px;
background: rgba(105,101,101,.6);
position: absolute;
left: 0;
top: 0;
padding: 20px 0;
box-sizing: border-box;
}
.slide>ul>li{
width: 234px;
height: 42px;
line-height: 42px;
text-align: left;
padding-left: 30px;
box-sizing: border-box;
}
.slide>ul>li>a{
color: #fff;
font-size: 14px;
}
.slide>ul>li:hover{
background-color: #ff6700;
}
/*ul>li*10>a[href=#]{手机 电话卡}>i.iconfont{>}*/
.banner>.wrap{
position: relative;
}
.slide i{
float: right;
margin-right: 20px;
font-size: 22px;
}
.slide-list{
width: 992px;
height: 456px;
border: 1px solid #e0e0e0;
border-left: none;
box-shadow: 0 8px 16px rgba(0,0,0,.18);/*水平，垂直，模糊度，颜色*/
background-color: #fff;
position: absolute;
top: 0;
left: 234px;
padding-top: 2px;
box-sizing: border-box;
display: none;
}
.slide li:hover .slide-list{/*当鼠标悬停到slide里面的li时候，子元素div以block展现*/
display: block;
}
/*滑动门结束*/
/*滑动门内容开始*/
.slide-list>ul{/*给每一个ul让它们左浮动，高由内容撑开*/
width: 247px;
float: left;
}
.slide-list li{/*写完一个li，然后把剩下的l*/
width: 100%;
height: 76px;
padding: 18px 0 18px 20px;
box-sizing: border-box;
}
.slide-list img{
margin-right: 12px;
width: 40px;
height: 40px;
float: left;
}
.slide-list span{
line-height: 40px;
font-size: 14px;
/*下面是没理解部分*/
white-space: nowrap;/*一行文字溢出，省略号*/
overflow: hidden;
text-overflow: ellipsis;
}
.slide-list li:hover span{/*当鼠标悬停到li上时，span变色*/
color: #FF6700;
}
.slide-list1{
width:745px ;
}
/*滑动门内容结束*/
/*滑动门第一部分结束，复制粘贴到第二个li里面（电视盒子），然后发现一个问题，三个和两个的我们不知道怎么办了，继续复制到相应的li上，删除一组ul，还剩三组，最主要的是要改div的宽度，
需要再去一个名字设置宽度，设置slide-list1{
width:744px;height:不用设;
}
6.记得在最后一个滑动门由三个ul组成的里面，div类名设置 slide-list slide-list1才能生效*/
</style>
</head>
<body>
<div class="nav">
<div class="wrap">
<div class="logo">
<img data-lazy-src="img/logo-mi2.png" />
</div>
<div class="nav-bar">
<ul>
<li>
<a href="#">Xiaomi手机</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box-last">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#">Redmi红米</a>
<div class="nav-bar-list">
<div class="wrap">
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/02.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<div class="img-box-last">
<img src="img/01.webp"/>
</div>
<p class="name1">xiaomi civi 1s</p>
<p class="price1">2299元起</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="search">
<input type="text" placeholder="手机"/>
<a href="#" class="iconfont">
<svg t="1655554525177" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2177" width="24" height="24"><path d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z" fill="#3D3D3D" p-id="2178"></path>
</svg>
</a>
<div class="search-list">
<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</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--banner样式开始-->
<div class="banner">
<div class="wrap">
<div class="banner-box">
</div>
<div class="slide">
<ul>
<li>
<a href="#">手机 电话卡<i class="iconfont">></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">手机 电话卡<i class="iconfont">></i></a>
<div class="slide-list">
<ul>
<li>
<a href="#">
<img data-lazy-src="img/Redmi X65 2022款.webp" />
<span>Redmi X65 2022款</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
</div>
</li>
<li>
<a href="#">手机 电话卡<i class="iconfont">></i></a>
<div class="slide-list slide-list1">
<ul>
<li>
<a href="#">
<img data-lazy-src="img/Redmi X65 2022款.webp" />
<span>Redmi X65 2022款</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
<li>
<a href="#">
<img data-lazy-src="img/手机1.webp" />
<span>Note 11T Pro+</span>
</a>
</li>
</ul>
</div>
</li>
<li><a href="#">手机 电话卡<i class="iconfont">></i></a></li>
<li><a href="#">手机 电话卡<i class="iconfont">></i></a></li>
<li><a href="#">手机 电话卡<i class="iconfont">></i></a></li>
<li><a href="#">手机 电话卡<i class="iconfont">></i></a></li>
<li><a href="#">手机 电话卡<i class="iconfont">></i></a></li>
<li><a href="#">手机 电话卡<i class="iconfont">></i></a></li>
<li><a href="#">手机 电话卡<i class="iconfont">></i></a></li>
</ul>
</div>
</div>
</div>
<!--banner样式结束-->
</body>
</html>
859
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
