CSS之搜索框

最新推荐文章于 2024-02-19 09:40:08 发布

靳小霞

最新推荐文章于 2024-02-19 09:40:08 发布

阅读量1.1k

点赞数

分类专栏： CSS Html5 文章标签： css 搜索

本文链接：https://blog.csdn.net/u012493556/article/details/52786663

版权

CSS 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

Html5

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      .search_box{
         position: relative;
         width: 360px;
      }
      .search_box *{
         margin: 0;
         padding: 0;
         list-style: none;
         font: normal 12px/1.5em "宋体",Verdana,Lucida,Arial,Helvetica,sans-serif;
      }
      .search_box h3,.search_tips h4{
         display: none;
      }
      .search_box select{
        float: left;
        width: 60px;
      }
      .search_box input{
        float: left;
        width: 196px;
        height: 14px;
        padding: 1px 2px;
        margin: 0 5px;
        border:1px solid #619FCF;
      }
      .search_box button{
         float: left;
         width: 59px;
         height: 18px;
         text-indent: -9999px;
         border: 0 none;
         background: url(1.jpg) no-repeat 0 0;
         cursor: pointer;
      }
      .search_tips{
        position: absolute;
        top:17px;
        left: 65px;
        width: 190px;
        padding: 5px 5px 0;
        border: 1px solid #619FCF;
      }
      .search_tips li{
        float: left;
        width: 100%;
        height: 22px;
        line-height: 22px;
      }
      .search_tips li a{
        float: left;
        text-decoration: none;
        color: #333333;
      }
      .search_tips li a:hover{
        color: #FF0000;
      }
      .search_tips li span{
         float: right;
         color: #CCCCCC;
      }

    </style>
</head>
<body>
<div class="search_box">
<h3>站内搜索</h3>
<div class="content">
    <form method="post" action="">
     <select>
        <option value="">影视</option>
        <option value="">日志</option>
        <option value="">相册</option>
     </select>
      <input type="text"  value="请输入关键字"/><button type="submit">搜索</button>
      <div class="search_tips">
      <h4>搜索提示</h4>
      <ul>
        <li><a href="#">1111</a><span>共有2222个项目</span></li>
        <li><a href="#">1111</a><span>共有2222个项目</span></li>
        <li><a href="#">1111</a><span>共有2222个项目</span></li>

      </ul>

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

</body>
</html>

靳小霞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS之搜索框

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> .search_box{ position: relative; width: 360px; } .search_box
复制链接

扫一扫