<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝</title>
<style type="text/css">
body{font-size:12px;padding:0;margin:0;}
#main{
width:640px;
margin:30px auto;
position:relative;}
/*.main{margin:0 auto;position:relative;}*/
.senior{display:block;position:absolute;right:0;
color:#c5c5c5;padding:2px 20px 0 8px;
height:35px;width:30px;}
.btn{display:block;position:absolute;right:60px;top:0;
/*如果父元素有相对定位或者绝对定位，则其绝对定位是相对于父元素而言*/
background-color:#f14515;
width:75px;height:35px;
font-size:14px;border:0;
color:#fff;}
.input{display:block;position:absolute;right:135px;top:0px;
width:500px;height:29px;
border:2px solid #f14515;}
cite{font-family:"Microsoft Yahei";
position:absolute; left:3px;top:2px;
display:block; width:60px;
background:#ccc;width:60px;
text-align:center;color:#fff;
height:29px;line-height:29px;
border:1px solid #c1c2c3;
}
ul{position:absolute; left:-37px;top:-10px;
display:none;list-style:none;
}
/*注意li不必设置display，之前在这里犯了错，设置成block,or none都会影响ul的操作，只对ul设置就行*/
ul li{ width:60px;
border:1px solid #c1c2c3;
background:#ccc;width:60px;
text-align:center;color:#fff;
height:29px;line-height:29px;
}
/*三角*/
cite a:before {
content: '';
position: absolute;
right: 2px;
bottom: 4px;
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
border-color: #888 transparent transparent transparent;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transform-origin: 50% 25%;
-ms-transform-origin: 50% 25%;
-moz-transform-origin: 50% 25%;
-webkit-transform-origin: 50% 25%;
-o-transform-origin: 50% 25%;
}
</style>
</head>
<body>
<div id="main">
<a class="senior">高级<br/>搜索</a>
<button type="submit" aria-label="搜索" class="btn">搜索</button>
<input type="text" class="input">
<a></a>
<p><cite>店铺</cite></p>
<p> </p>
<ul id="lii" class="select">
<li>宝贝</li>
<li>天猫</li>
<li>店铺</li>
</ul>
</div>
<script typt="text/javascript">
window.onload=function(){
var main=document.getElementById("main");
var ul=main.getElementsByTagName('ul')[0];
var li=main.getElementsByTagName("li");
var title=main.getElementsByTagName('cite')[0];
var index=-1;
//当点击宝贝时，显示下拉选项
title.onclick=function(event){
ul.style.display="block";
//防止冒泡；
//若无此步骤，则会冒泡到"点击空白页面"的函数，导致次操作无效。
event=event||window.event;
if(event.stopPropagation){
event.stopPropagation();
}
else{
event.cancelBubble=true;
}
document.onkeyup=function(e){
e=e||document.event;
for(var i=0;i<li.length;i++){
li[i].style.background="#ccc";
}
//若是按了向下的方向键
if(e.keyCode==40){
index++;
if(index>=li.length){
index=0;
}
li[index].style.background="#f14515";
}
//若是按了向上的方向键
if(e.keyCode==38){
if(index<=0){
index=li.length;
}
index--;
li[index].style.background="#f14515";
}
//若是按了回车键
if(e.keyCode==13&&index!=-1){
title.innerHTML=li[index].innerHTML;
for(var i=0;i<li.length;i++){
li[i].style.background="#ccc";
}
index=-1;
ul.style.display="none";
}
}
}
// 点击页面空白处时
document.onclick=function(){
// 下拉选项收起
ul.style.display="none";
}
// 鼠标滑过、离开、点击每个选项时
for(var i=0;i<li.length;i++){
li[i].onmouseover=function(){
this.style.background="#f14515";
}
li[i].onmouseout=function(){
this.style.background="#ccc";
}
//当鼠标点击某一选项时，将其显示在已选title中
li[i].onclick=function(){
title.innerHTML=this.innerHTML;
}
}
}
function getByClass(clsName, parent){
//定义函数getByClass()实现获取document或指定父元素下所有class为clsName的元素
var obj=parent?document.getElementById(parent):document;
var elements=obj.getElementsByTagName("*");
var result=[];
for(var i=0;i<elements.length;i++){
if(elements[i].className==clsName){
result.push(elements[i]);
}
}
return result;
}
</script>
</body>
</html>
在此段代码中，注意在适当的位置阻止事件冒泡。
此段代码有定宽元素居中，下三角。
获取class的函数，键盘事件，点击事件，