网页制作之搜索框

最新推荐文章于 2023-07-16 15:31:26 发布

洛少凰

最新推荐文章于 2023-07-16 15:31:26 发布

阅读量3.8k

点赞数 8

分类专栏： web 文章标签： html css

本文链接：https://blog.csdn.net/byslsh/article/details/107447140

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

效果如图
效果图

需准备的图片（一个白色的放大镜如下）

代码

<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <title>搜索框</title>
       <style>
       *{
              margin: 0 auto;
       }
       .form{
                     padding-top :200px;
                     float: right;
       }
       .form .search{
              width: 360px;
              height: 20px;
              border: 1px solid rgba(0, 163, 255,1.0);
              padding: 9px;
              position: absolute;
              right: 200px;
       }
       .form .submit {
           width: 50px;
           height: 40px;
           border: 1px solid rgba(0,163,255, 1);
           border-left: none;
           background: rgba(0,163,255, 1) url(search.png) no-repeat center center;
           position: relative;
           right: 200px;
       }
       </style>
</head>
<body>
       <form class="form">
                            <input type="text" placeholder="输入关键字" class="search">
                            <input type="button" class="submit">           
                     </form>
</body>
</html>