搜索沒有顯示出來是什么原因
<!doctype html>
<html>
<head>
?<meta charset="UTF-8">
?<title>淘寶搜索框</title>
</head>
<style type="text/css">
*{
?margin:0;
?padding: 0;
?list-style: none;
}
@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");
?}
.fr{
?float:right;
}
a{
?text-decoration: none;
}
body{
?padding:10px;
}
.search{
?height:45px;
?position: relative;
}
.search-tip a{
?display: block;
?padding:3px 0 0 15px;
?color:#666;
?font-size: 12px;?
}
input{
?border:0;
??? outline: 0;????
}
.search-text{
?height:39px;
??? line-height: 39px;
?padding:3px 0 3px 77px;
?background-color: #f50;
?overflow: hidden;
}
.text{
?height:39px;
??? line-height: 39px;
?width:100%;
?background-color: #fff;
}
.submit{
?height:45px;
??? line-height: 45px;
??? width:78px;
??? text-align: center;
??? background-color: #f50;
??? color:#fff;
??? font-size: 14px;
??? cursor:pointer;
}
.search-text i{
??? position:absolute;
??? top:14px;
??? left:86px;
??? z-index: 2;
??? color:#ccc;
??? display: block;
??? height:20px;
??? width:20px;
}
.iconfont{
?font-family: iconfont;
??? font-size: 12px;
??? font-style: normal;
}
.search-list{
?position: absolute;
?font-size: 14px;
?top:3px;
?left:3px;
?
}
.search-list ul{
?height:78px;
?width:76px;
?background-color: #fff;
?text-align: center;
?border-right:1px solid #ccc;
}
.search-list ul li{
?height:39px;
?line-height: 39px;
}
.search-list ul .on{
?background-color: #f3f3f3;
}
.search-list a{
?font-size: 14px;
?color:#666;
}
</style>
<body>
?<div>
??<div class="search-tip fr">
???<a href="#">高級<br/>搜索</a>
??</div>
??<div>
???<form action="" method="get">
????<input type="submit" value="搜索" class="submit fr"/>
????<div>
??????? <input type="text" x-webkit-speech=""/>
??????? <i></i>
????</div>
???</form>
??</div>
??????? <div>
??????? ?<ul>
??????? ??<li><a href="#">寶貝</a></li>
??????? ??<li ><a href="#">店鋪</a></li>
??????? ?</ul>
??????? </div>
?</div>
</body>
</html>
2017-04-25
搜索框沒有出來是因為沒有給樣式,只寫了input的全局樣式,去掉了border與outline