HTML实例之搜索栏（附源码）

1. 简书类

实现效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G7B0haXk-1592824566056)(//upload-images.jianshu.io/upload_images/20190641-13ded03992cec2a3.png?imageMogr2/auto-orient/strip|imageView2/2/w/483/format/webp)]

html代码

> <div class="container">
> 
>     <form action="" class="parent">
> 
>         <input type="text" class="search" placeholder="搜索">
> 
>         <input type="button" name="" id="" class="btn">
> 
>     </form>
> 
> </div>

css代码

> * {
> 
>     margin: 0;
> 
>     padding: 0;
> 
> }
> 
> .container {
> 
>     height: 70px;
> 
>     width: 800px;
> 
>     margin: 100px auto 0 auto;
> 
> }