20201102王娟
unction change(){
document/文档/.getElementById("inp").style.borderTop="2px sooild #4e6ef2"
document/文档/.getElementById("inp").style.borderLeft="2px sooild #4e6ef2"
document/文档/.getElementById("inp").style.borderBottom="2px sooild #4e6ef2"
}
function recover(){
document/文档/.getElementById("inp").style.borderTop="2px sooild #c4c7ce"
document/文档/.getElementById("inp").style.borderLeft="2px sooild #c4c7ce"
document/文档/.getElementById("inp").style.borderBottom="2px sooild #c4c7ce"
}
<form>
<div class="search">
<div id="inp" class="inp">
<!--绑定js（获取焦点）事件-->
<input onfocus="change（）" onblur="recover" type="text"/>
<span title="按图片搜索"></span>
</div>
<div class="search-btn">
<input type="submit" value="百度一下"/>
</div>
</div>
</form>
下拉菜单：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
border: 0;
}
.nav li{
width: 120px;
height: 40px;
float: left;
list-style: none;
text-align: center;
line-height: 40px;
}
.underList{
display: none;/*隐藏元素*/
}
.nav li:hover .underList{
display: block;/*显示元素*/
}
</style>
</head>
<body>
<ul class="nav">
<li>首页
<ul class="underList">
<li>棉衣秋裤</li>
<li>棉衣秋裤</li>
<li>棉衣秋裤</li>
</ul>
</li>
<li>首页</li>
<li>首页</li>
</ul>
</body>
</html>
心得总结：今天老师就网页问题给我们做了补充，除此之外老师让我们优化自己的页面。
近期评论