为了账号安全,请及时绑定邮箱和手机立即绑定

搜索没有显示出来是什么原因

<!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>

正在回答

1 回答

搜索框没有出来是因为没有给样式,只写了input的全局样式,去掉了border与outline

0 回复 有任何疑惑可以回复我~
#1

慕田峪6997291 提问者

.search-text{ height:39px; line-height: 39px; padding:3px 0 3px 77px; background-color: #f50; overflow: hidden; } .text .submit 这些是样式呀
2017-04-25 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
搜索框制作
  • 参与学习       65999    人
  • 解答问题       463    个

本课程从简入深讲解搜索框的制作,学习JQ与JS实现Ajax技术的不同点

进入课程

搜索没有显示出来是什么原因

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号