小米官网搜索框部分详解
<!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>
小米官网搜索框部分详解相关推荐
- html css 模仿小米官网搜索框
写网页效果,掌握html,css,唯一的捷径就是多模仿,多练习.小米官网的搜索框效果看似简单,实际写代码的时候才发现要掌握好多css知识才能完成效果.浮动.导航条.鼠标经过.定位.文字框效果实现.js ...
- Outline，Input样式的设置，小米官网搜索框
在做小米项目右上角的搜索框的时候,发现了该问题,现总结如下: outline outline和border类似,只不过outline不占用空间,而border占用空间 #box1{width: 300 ...
- HTML/CSS实现小米官网搜索框效果
效果图: 需求分析: 1.输入框焦点事件 onfocus:成为焦点, 点击输入框的时候,出现闪烁光标,此时可以输入内容. onblur :失去焦点, 点击页面空白区域,光标消失.此时不可以输入内容. ...
- 搜索框(SearchView)详解
搜索框(SearchView)详解 ONE Goal, ONE Passion ! 整理一下一些系统常用的小组件.先说说搜索框吧. SearchView是 搜索框组件,它可以让用户在文本框内输入文字, ...
- OpenLayers 官网例子的中文详解
当你希望实现某种功能的时候,即使你对 openlayers 几乎一窍不通,照着官网的例子做,也可以很快的实现想要的效果. 问题在于,官网的例子都是英文啊,不能很快定位到想要的效果是在哪个例子里面!!( ...
- layer添加元素 openlayer_OpenLayers 官网例子的中文详解
当你希望实现某种功能的时候,即使你对 openlayers 几乎一窍不通,照着官网的例子做,也可以很快的实现想要的效果. 问题在于,官网的例子都是英文啊,不能很快定位到想要的效果是在哪个例子里面!!( ...
- Html5+Css实战前端小米官网左侧导航（思路+详解+素材）
实战后的效果 大家好,我是小叶同学,如今都大二了,跟着学校老师只学到皮毛,不如自己自学,说起来也惭愧,今天实战Html+CSS小米官网左侧导航开发,后面也会一点点对小米官网全部开发,欢迎前来坐坐沙发 ...
- 前端700行代码项目练习--小米官网（仅html、css实现）
目录 一.效果展示 二.准备工具 1.css重置样式 2.awesome图标字体 3.各图片 4.title网站图标 三.代码 一.效果展示 二.准备工具 1.css重置样式 请自行查找,CSDN上一 ...
- 前端学习之仿小米官网HTML+CSS
一个简单的仿小米官网 index.css /* 主页index.html样式表 */ .topbar-wrapper{width: 100%;background-color:#333;height: ...
最新文章
- CentOS部署JAVA程序、安装Tomcat以及安装导入mysql文件的方法
- 调用支付jsapi缺少参数appid_服务商模式下的小程序微信支付
- vue each_Vue 应用单元测试的策略与实践 05 - 测试奖杯策略
- 2021第一季度云智能生态技术服务能力盘点
- 数据库SQL语句学习笔记（4）-过滤数据
- 监听js变量的变化_JS监听事件型爬虫
- 使用akka构建高并发程序_如何使用Akka Cluster创建简单的应用程序
- Python3 —— if/while/input
- php 使用curl模拟登录人人(校内)网
- 数据库-MySQL-数据库和表
- [swift] LeetCode 136. Single Number
- UVa12545 - Bits Equalizer
- 狗汪汪玩转无线电 -- GPS Hacking (上）
- shell split分析日志文件
- 计算机网络水晶头博客,网线水晶头接法顺序图解分享，这个简单口诀记好了（超实用）...
- c语言关于多边形的所有算法,教你如何在C语言中进行点在多边形内算法
- 嗅探技术---网络安全入门笔记DAY5
- 云服务器突发性能型t6和共享型n4比较选择哪个好？
- Arduino提高篇07—超声波测距
- Pintos project2 实验报告
热门文章
- excel转pdf的在线免费转换技巧，超实用
- 杜兰特全部比赛录像合集【百度网盘高清分享】
- BMP与JPG图片格式的互相转换
- 工业机器人编程语言入门_人工智能和机器学习入门的5种编程语言
- 【网络通信】【GNS3】Window10 下 GNS3 安装与配置
- 五年企稳上升的阿里，还能再涨吗？
- 【友情链接NO.0000?】大佬们的博客(°ー°〃)
- 2021-CVPR-图像修复论文导读《TransFill: Reference-guided Image Inpainting by Merging Multiple Color and ~~~》
- 区块链安全————区块链技术安全讨论
- 009 向量：定义、内积、相关性与线性表示及性质