搜索提示式样原型

见代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<script type="text/javascript">
function first(){
	document.getElementById("test").style.display = "none";
}

var flag = false
function test(){
	if(flag){
		document.getElementById("test").style.display = "none";
		flag = false
	}else{
		document.getElementById("test").style.display = "block";
		flag = true;
	}
}
</script>
</head>
<body onload="first()">
<input type="text" onclick="test()"/>
<div style="position: relative;">
<div id="test" style="position: absolute;z-index: 2;background-color: green;clear: both;">
<ul>这是第一行</ul>
<ul>这是第二行</ul>
<ul>这是第三行</ul>
<ul>这是第四行</ul>
<ul>这是第五行</ul>
</div>
<div style="position: absolute;z-index: 1">
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
<p>cccccccccccccccccccccccccccccccccccccccccccccc</p>
<p>dddddddddddddddddddddddddddddddddddddddddddddd</p>
<p>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</p>
</div>
</div>
</body>
</html>

搜索提示式样原型_第1张图片

搜索提示式样原型_第2张图片

你可能感兴趣的:(html,css)