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

最新推荐文章于 2024-04-18 13:51:27 发布

原创

最新推荐文章于 2024-04-18 13:51:27 发布 · 1.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #web #前端 #web前端 #前端入门

本文详细介绍了如何使用HTML和CSS创建简书类和百度类的搜索栏。通过实例代码展示了实现效果，包括输入框聚焦时边框颜色变化以及button的box-sizing属性设置。同时提供了一个学习交流的Q群号，分享前端开发的学习资源和技巧。

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;
> 
> }
> 
> .parent {
> 
>     position: relative;
> 
> }
> 
> .search {
> 
>     width: 300px;
&

最低0.47元/天解锁文章