100 lines
2.6 KiB
HTML
100 lines
2.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<style>
|
||
|
|
* {
|
||
|
|
margin: 0;
|
||
|
|
padding: 0
|
||
|
|
}
|
||
|
|
|
||
|
|
.searchbox {
|
||
|
|
width: 658px;
|
||
|
|
height: 44px;
|
||
|
|
margin: 0 auto;
|
||
|
|
margin-top: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left {
|
||
|
|
width: 546px;
|
||
|
|
/* height: 44px; */
|
||
|
|
border-radius: 10px 0px 0px 10px;
|
||
|
|
float: left;
|
||
|
|
border: 2px solid #4e6ef2;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
width: 108px;
|
||
|
|
height: 48px;
|
||
|
|
background: #4e6ef2;
|
||
|
|
color: white;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 44px;
|
||
|
|
border-radius: 0 10px 10px 0;
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shuru {
|
||
|
|
width: 480px;
|
||
|
|
height: 44px;
|
||
|
|
border: none;
|
||
|
|
outline: none;
|
||
|
|
margin-left: 20px;
|
||
|
|
border-bottom: 2px solid #c4c7ce;
|
||
|
|
}
|
||
|
|
.shishenmen{
|
||
|
|
list-style: none;
|
||
|
|
cursor: pointer;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
.shishen{
|
||
|
|
font-size: 15px;
|
||
|
|
height: 30px;
|
||
|
|
margin-left:20px;
|
||
|
|
}
|
||
|
|
.shishen:hover{
|
||
|
|
color: rgb(78, 110, 242);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div class="searchbox">
|
||
|
|
<div class="left">
|
||
|
|
<input type="text" class="shuru" onfocus="shuruing()" onblur="end()"/>
|
||
|
|
<ul class="shishenmen" style="display: none;">
|
||
|
|
<li class="shishen">阴阳师</li>
|
||
|
|
<li class="shishen">大天狗</li>
|
||
|
|
<li class="shishen">茨木</li>
|
||
|
|
<li class="shishen">青行灯</li>
|
||
|
|
<li class="shishen">酒吞</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class=" btn">搜索</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
// var ss=document.getElementsByClassName('shishen')[0]
|
||
|
|
// var shishen=document.getElementsByClassName('shishenmen')
|
||
|
|
// console.log(ss)
|
||
|
|
// console.log(shishen)
|
||
|
|
function shuruing(){
|
||
|
|
console.log(900)
|
||
|
|
var ss=document.getElementsByClassName('shishen')[0]
|
||
|
|
var shishen=document.getElementsByClassName('shishenmen')[0]
|
||
|
|
console.log(ss)
|
||
|
|
console.log(shishen)
|
||
|
|
shishen.style.display="block"
|
||
|
|
}
|
||
|
|
|
||
|
|
function end(){
|
||
|
|
var shishen=document.getElementsByClassName('shishenmen')[0]
|
||
|
|
shishen.style.display="none"
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|