zoukankan      html  css  js  c++  java
  • 搜索框demo

    注意事项:主要用到定位和浮动知识点,demo如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
    <title>搜索例子</title>
    <style type="text/css">
    @font-face{font-family: iconfont;src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);}
    body{
    font: 12px/1.5 tahoma,arial,sans-serif;
    }
    a{text-decoration: none;}
    .search-container{position: relative;}
    .search-tips{float: right;paddding:3px 0 0 15px;}
    .search-tips a{color: #6c6c6c}
    .search-button{float: right;}
    .btn-search{
    background-color: #f50;
    100px;
    height: 45px;
    background-position: 0 -200px;
    border:0;
    cursor: pointer;
    }
    .search-common-panel{
    height: 39px;
    background-color: #f50;
    overflow: hidden;
    padding: 2px 0 4px 77px;
    }
    .search-common-panel input{
    height: 39px;
    line-height: 39px;
    100%;
    border:0 none;
    outline: 0;
    background-color: #fff;
    }
    .search-common-panel img{
    position: absolute;
    top: 16px;
    left: 86px;
    z-index: 2;
    color: #ccc;
    }
    .iconfont{
    font-family: iconfont;
    font-size: 12px;
    font-style: normal;
    }
    </style>
    </head>
    <body>
    <div class="search-container">
    <div class="search-list"></div>
    <div class="search-pannel">
    <form>
    <div class="search-tips">
    <a href="#">
    高级<br>搜索
    </a>
    </div>
    <div class="search-button">
    <button class="btn-search" type="submit" style="color: white;font-size: 20px">搜 索</button>
    </div>
    <!-- 为了控制边框颜色和样式 -->
    <div class="search-common-panel">
    <input type="text">
    <img src="images/Search_Icon.png" width="16px" height="16px">
    </div>

    </form>
    </div>
    </div>

    </body>
    </html>

  • 相关阅读:
    微信小程序地图组件中的include-points怎样缩放视野并将所有坐标点在规定的视野内展示?
    两种常见的mysql集群架构
    layui+oss阿里云附件上传回调报错问题
    redis hash过期时间
    Static和Extern关键字理解
    代理模式
    中介者模式
    访问者模式
    模板方法模式
    迭代器模式
  • 原文地址:https://www.cnblogs.com/YbchengXumin/p/10942354.html
Copyright © 2011-2022 走看看