我的執(zhí)行不了，可以看看你們正確的代碼嗎
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>taobao搜索框</title>
<style type="text/css" media="screen">
@font-face {
??? font-family: iconfont;
??? src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);
??? src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot?#iefix) format("embedded-opentype"),
??? url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.woff) format("woff"),
??? url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.tff) format("truetype"),
??? url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.svg#uxiconfont) format("svg");
}
body{font-size: 12px;}
.search-container{position:relative;}
.search-pannel a{text-decoration: none;color:#ccc;}
.search-tips{float:right;padding:3px 0 0 15px;}
.search-button{float:right;}
.btn-search{background-image: url("images/sousuo.PNG");width:100px;height:45px;
border:0;cursor:pointer;}
.search-common-panel{height:39px;padding:3px 0 3px 70px;background-color: red;overflow: hidden;}
.search-common-panel input{height:39px;line-height: 39px;border:0 none;width:100%;outline:0;background:#fff;}
.search-common-panel li{
??? position:absolute;top:14px;left:86px;
??? z-index: 2;color:#ccc;list-style: none;
}
.iconfont{
??? font-family: iconfont;
??? font-size: 15px;
??? font-style: normal;
}
ul{list-style: none;
}
ul{margin:0;padding:0; display:block;}
.search-list {
??? position:absolute;
??? top:18px;
??? left: 2px;
??? height:39px;
??? width:70px;
??? overflow:hidden;
??? background-color: #fff;
??? border-left: 1px solid #f6f66f;
??? border-right: 1px solid #e5e5e5;
}
.search-list li{
??? height:39px;
??? font-size: 20px;
??? line-height: 39px;
??? overflow:hidden;
??? text-align: center;
}
.search-list li a{text-decoration: none;color:#6c6c6c;}
.selected{background:#f6f6f6;}
.trigger-hover{
??? height:78px;
}
</style>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
??? <div>
?????? <div id="search_tab">
?????????? <ul>
??????????????? <li id="tab-1"><a href="#">寶貝</a></li>
??????????????? <li id="tab-2"><a href="#">店鋪</a></li>
??????????? </ul>
??????? </div> `
??????? <div>
??????????? <form>
??????????? <div>
???????????? <a href="#">高級(jí)<br>搜索</a>??
??????????? </div>
??????????? <div>
?????????????? <button type="submit"></button>
??????????? </div>
??????????? <div>
?????????????????? <input type="text" x-webkit-speech>
?????????????????? <li>?</li>
??????????? </div>
??????????????
??????????? </form>
??????? </div>
??? </div>
?<script type="text/javascript">
?var getDOM = function(id){
return document.getElementById(id);
}
?
var addEvent = function(id, event, fn){
var el = getDOM(id) || document;
if(el.addEventListener){
el.addEventListener(event, fn, false);
}else{
el.attachEvent('on'+event, fn);
}
}
addEvent('search_tab','mouseover',function(){
???? this.className+='trigger-hover';
});
?
</script>
</body>
</html>
2016-10-28
最后選擇部分有點(diǎn)小瑕疵
2016-10-28
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8" />
? ? <title>淘寶搜索框</title>
? ? <style type="text/css">
? ? ? ? *{margin: 0;padding: 0;}
? ? ? ? @font-face {
? ? ? ? ? ? font-family: iconfont;
? ? ? ? ? ? src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);
? ? ? ? ? ? src: url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot?#iefix) format("embedded-opentype"),
? ? ? ? ? ? url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.woff) format("woff"),
? ? ? ? ? ? url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.tff) format("truetype"),
? ? ? ? ? ? url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.svg#uxiconfont) format("svg");
? ? ? ? }
? ? ? ? body{
? ? ? ? ? ? font: 12px/1.5 tahoma,arial,sans-serif;
? ? ? ? }
? ? ? ? .search-container{
? ? ? ? ? ? position:relative;
? ? ? ? ? ? margin: 20px 0 0 10px;
? ? ? ? }
? ? ? ? .search-tips{
? ? ? ? ? ? float:right;
? ? ? ? ? ? padding:3px 10px 0 15px;?
? ? ? ? }
? ? ? ? .search-tips a{
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? color:#6c6c6c;
? ? ? ? }
? ? ? ? .search-button{float:right;}
? ? ? ? .btn-search{
? ? ? ? ? ? background: url("http://gtms01.alicdn.com/tps/i1/T1qyj8Fc8aXXc4E9bI-400-300.png");
? ? ? ? ? ? width:100px;
? ? ? ? ? ? height:45px;
? ? ? ? ? ? background-position: 0 -200px;/*雪碧圖定位*/
? ? ? ? ? ? border: 0;
? ? ? ? ? ? cursor: pointer;
? ? ? ? }
? ? ? ? .search-common-panel{
? ? ? ? ? ? height:39px;
? ? ? ? ? ? padding:3px 0 3px 77px;
? ? ? ? ? ? background-color:#f50;
? ? ? ? ? ? overflow: hidden;
? ? ? ? }
? ? ? ? .search-common-panel input{
? ? ? ? ? ? height:39px;
? ? ? ? ? ? line-height: 39px;
? ? ? ? ? ? width:100%;
? ? ? ? ? ? border:0;
? ? ? ? ? ? outline:0;
? ? ? ? ? ? background:#fff;
? ? ? ? }
? ? ? ? .search-common-panel i{
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? top:14px;
? ? ? ? ? ? left:86px;
? ? ? ? ? ? z-index: 2;
? ? ? ? ? ? color:#ccc;
? ? ? ? }
? ? ? ? .iconfont{
? ? ? ? ? ? font-family: iconfont;
? ? ? ? ? ? font-size: 12px;
? ? ? ? ? ? font-style: normal;
? ? ? ? }
? ? ? ? ul{
? ? ? ? ? ? list-style: none;
? ? ? ? ? ? display: block;
? ? ? ? }
? ? ? ? .search-list {
? ? ? ? ? ? position:absolute;
? ? ? ? ? ? top:3px;
? ? ? ? ? ? left: 3px;
? ? ? ? ? ? height:39px;
? ? ? ? ? ? width:72px;
? ? ? ? ? ? overflow:hidden;
? ? ? ? ? ? background-color: #fff;
? ? ? ? ? ? border-left: 1px solid #f6f66f;
? ? ? ? ? ? border-right: 1px solid #e5e5e5;
? ? ? ? }
? ? ? ? .search-list li{
? ? ? ? ? ? display: none;
? ? ? ? ? ? height:39px;
? ? ? ? ? ? line-height: 39px;
? ? ? ? ? ? overflow:hidden;
? ? ? ? ? ? font-size: 20px;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? ? ? .search-list li a{
? ? ? ? ? ? text-decoration: none;
? ? ? ? ? ? color:#6c6c6c;
? ? ? ? }
? ? ? ? .search-list .selected{
? ? ? ? ? ? background:#f6f6f6;
? ? ? ? ? ? display: block;
? ? ? ? }
? ? ? ? .trigger-hover{
? ? ? ? ? ? height: auto;
? ? ? ? }
? ? ? ? .trigger-hover li{
? ? ? ? ? ? display: block;
? ? ? ? }
? ? ? ? .search-list li:hover{
? ? ? ? ? ? background:#f6f6f6;
? ? ? ? }
? ? </style>
? ? <script type="text/javascript">
? ? ? ? var getDOM = function(id){
? ? ? ? ? ? return document.getElementById(id);
? ? ? ? }
? ? ? ? var addEvent = function(id,event,fn){
? ? ? ? ? ? var el = getDOM(id)||document;
? ? ? ? ? ? if(el.addEventListener){//非IE瀏覽器
? ? ? ? ? ? ? ? el.addEventListener(event,fn,false);
? ? ? ? ? ? }else if(el.attachEvent){//IE瀏覽器
? ? ? ? ? ? ? ? el.attachEvent('on'+event,fn);
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? window.onload=function(){
? ? ? ? ? ? addEvent('search-tab','mouseover',function(){
? ? ? ? ? ? ? ? if(this.className.indexOf('trigger-hover')<0){
? ? ? ? ? ? ? ? ? ? this.className += ' trigger-hover';
? ? ? ? ? ? ? ? }//注意在類名前一定要有空格，否則會(huì)將原有類名和現(xiàn)在類名合并成一個(gè)新的類名
? ? ? ? ? ? });
? ? ? ? ? ? addEvent('search-tab','mouseout',function(){
? ? ? ? ? ? ? ? ? ? this.className = 'search-list';
? ? ? ? ? ? });
? ? ? ? ? ? addEvent('tab-1','click',function(){
? ? ? ? ? ? ? ? getDOM('tab-1').className += ' selected';
? ? ? ? ? ? ? ? getDOM('tab-2').className = '';
? ? ? ? ? ? ? ? getDOM('search-tab').className = 'search-list';
? ? ? ? ? ? })
? ? ? ? ? ? addEvent('tab-2','click',function(){
? ? ? ? ? ? ? ? getDOM('tab-2').className += ' selected';
? ? ? ? ? ? ? ? getDOM('tab-1').className = '';
? ? ? ? ? ? ? ? getDOM('search-tab').className = 'search-list';
? ? ? ? ? ? })
? ? ? ? }
? ? </script>
</head>
<body>
? ? <div class="search-container">
? ? ? ?<div id="search-tab" class="search-list">
? ? ? ? ? ?<ul>
? ? ? ? ? ? ? ? <li id="tab-1" class="selected"><a href="#">寶貝</a></li>
? ? ? ? ? ? ? ? <li id="tab-2"><a href="#">店鋪</a></li>
? ? ? ? ? ? </ul>?
? ? ? ? </div>
? ? ? ? <div class="search-pannel">
? ? ? ? ? ? <form>
? ? ? ? ? ? ? ? <div class="search-tips">
? ? ? ? ? ? ? ? ? ? <a href="#">高級(jí)<br />搜索</a> ??
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="search-button">
? ? ? ? ? ? ? ? ? ?<button class="btn-search" type="submit"></button>?
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? <div class="search-common-panel">
? ? ? ? ? ? ? ? ? ?<input type="text" x-webkit-speech="zh-CN">?
? ? ? ? ? ? ? ? ? ?<i class="iconfont">?</i>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </form>
? ? ? ? </div>
? ? </div>
</body>
</html>