<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/reset.css" />
<style>
/*搜索下拉部分技术难点分析
1.首先呢，我们需要在search，a的下方定义一个div名为search-list，通过绝对定位和怪异盒模型和display:none;实现搜索框架效果
2.第二步通过~这个选择器，实现焦点点击input的时候，隐藏的search-list展现block
.search>input:focus~.search-list{/*不是相邻兄弟，a才是相邻兄弟，它是兄弟的兄弟，所以用~符号*
display: block;
3.第三部分技术难点代码展示，
.search-list>ul>li>a{/*子元素选择器，选中了它的子元素a，需要一层一层对应到最终的子元素，精准定位
width: 243px;
height: 30px;
padding: 6px 15px;
display: block;
font-size: 12px;
text-align: left;
box-sizing: border-box;
}子选择器需要层层对应，直到最终子元素，实现精准对应
4.第四步技术难点分析展示/*下载app和购物车出现层叠问题，找到download，设置层叠为900，购物车cart-list，z-index为850
}*/
*{
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;
}
.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;
}
.search>input:focus~.search-list{/*不是相邻兄弟，a才是相邻兄弟，它是兄弟的兄弟，所以用~符号*/
display: block;
}
.search-list>ul>li>a{/*子元素选择器，选中了它的子元素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;
}
/*下载app和购物车出现层叠问题，找到download，设置层叠为900，购物车cart-list，z-index为850*/
</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>
</body>
</html>
507
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
