前端学习（1803）：前端调试之事件伪类练习二

index.html

<!DOCTYPE html>
<html lang="en"><head><!--系统内置 start--><script type="text/javascript"></script><!--系统内置 end--><meta charset="UTF-8"><title>练习</title><!-- 不要忘记引入index.css --><link rel="stylesheet" href="index.css">
</head><body><div class="search"><input placeholder="红米k20"><div class="right"><div class="giao"></div></div></div><div class="box"><ul><li>小米9</li><li>Redmi K20 pro</li><li>Redmi K20</li><li>Redmi note 7 Pro</li><li>Redmi note 7</li><li>小米电视4c</li><li>电视32英寸</li><li>笔记本Pro</li><li>小爱音箱</li><li>净水器</li></ul></div>
</body></html>

index.css

body {margin: 0;
}
.search{width: 254px;
height: 42px;
background: #FFFFFF;
border: 1px solid #E0E0E0;
box-sizing:border-box;
}
.search>input{font-size: 12px;
line-height: 17px;
color: #AEAEAE;
border:none;
margin-top:13px;
margin-left:20px;
}
.right{float:right;
width: 42px;
height: 42px;
background: #FFFFFF;
border: 1px solid #E0E0E0;
margin-right:-1px;
margin-top:-1px;
box-sizing:border-box;
}
.giao{width: 16px;
height: 16px;
margin-top:13px;
margin-left:13px;
background:url(./images/search-normal.png) no-repeat ;}
.giao:hover{background:url(./images/search-hover.png);}
.box{width: 213px;
height: 282px;
background: #FFFFFF;
border: 1px solid #FD6821;
box-sizing: border-box;
display:none;
}
ul{display:none;
}
.box:hover+ul{display:block;
}
.search:hover{border: 1px solid #FD6821;
}
.right:hover{border: 1px solid #FD6821;
}

运行结果

前端学习（1803）：前端调试之事件伪类练习二相关推荐

前端学习（1802）：前端调试之事件伪类练习
index.html <!DOCTYPE html> <html lang="en"><head>  ...
前端学习（1802）：前端调试之事件伪类
前端学习（1806）：前端调试之列表伪类练习二
index.html <!DOCTYPE html> <html lang="en"><head> ...
2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...
顾川的前端学习笔记--前端开发基础
阶段一前端开发基础初始HTML 本阶段重难点 3.29小时40小节4个模块 CSS选择器盒模型 CSS三大特性浮动和清楚浮动 CSS四种定位 CSS进阶 CSS3 前端工程师需要会的PS取图案 ...
web前端学习之前端重构方案，来了解一下
前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希 ...
前端培训丁鹿学堂：css伪类选择器（一）
css结构伪类 :nth-child(n) css结构伪类是css比较复杂的选择器.了解了怎么使用以后可以在实际项目中更高效率的写样式. :nth-child(n) 表示当前元素向上查找的父元素的第n ...
前端学习（1807）：前端调试之列表伪类练习三
index.html <!DOCTYPE html> <html lang="en"><head> ...
前端学习（1805）：前端调试之列表伪类练习
index.html <!DOCTYPE html> <html lang="en"><head> ...

前端学习（1803）：前端调试之事件伪类练习二

前端学习（1803）：前端调试之事件伪类练习二相关推荐

最新文章

热门文章