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;
>
> }
>
> .parent {
>
>    position: relative;
>
> }
>
> .search {
>
>    width: 300px;
>
>    height: 40px;
>
>    border-radius: 18px;
>
>    outline: none;
>
>    border: 1px solid #ccc;
>
>    padding-left: 20px;
>
>    position: absolute;
>
> }
>
> .btn {
>
>    height: 35px;
>
>    width: 35px;
>
>    position: absolute;
>
>    background: url("images/topbar.png") no-repeat -2px -99px; >
>    top: 6px;
>
>    left: 285px;
>
>    border: none;
>
>    outline: none;
>
>    cursor: pointer;
>
> }
2. 百度类
实现效果
html代码
> <div class="container">
>
>    <form action="" class="parent">
>
>        <input type="text">
>
>        <input type="button" value="百度⼀下">
>
>    </form>
>
> </div>
css代码
jquery源码在线> .container {
>
>                width: 500px;
>
>                height: 50px;
>
>                margin: 100px auto;
>
>            }
>
>            .parent {
>
>                width: 100%;
>
>                height: 42px;
>
>                top: 4px;
>
>                position: relative;
>
>            }
>
>            .parent>input:first-of-type {
>
>                /*输⼊框⾼度设置为40px, border占据2px，总⾼度为42px*/ >
>                width: 380px;
>
>                height: 40px;
>
>                border: 1px solid #ccc;
>
>                font-size: 16px;
>
>                outline: none;
>                outline: none;
>
>            }
>
>            .parent>input:first-of-type:focus {
>
>                border: 1px solid #317ef3;
>
>                padding-left: 10px;
>
>            }
>
>            .parent>input:last-of-type {
>
>                /*button按钮border并不占据外围⼤⼩，设置⾼度42px*/
>
>                width: 100px;
>
>                height: 44px;
>
>                position: absolute;
>
>                background: #317ef3;
>
>                border: 1px solid #317ef3;
>
>                color: #fff;
>
>                font-size: 16px;
>
>                outline: none;
>
>            }
重点：
1.当input框foucus时，border颜⾊改变，⽽不是保留outline
2.button按钮默认box-sizing: border-box
> .container {
>
>                width: 500px;
>
>                height: 50px;
>
>                margin: 100px auto;
>
>            }
>
>            .parent {
>
>                width: 100%;
>
>                height: 42px;
>
>                top: 4px;
>
>                position: relative;
>
>            }
>
>            .parent>input:first-of-type {
>
>                /*输⼊框⾼度设置为40px, border占据2px，总⾼度为42px*/                width: 380px; >
>                height: 40px;
>
>                border: 1px solid #ccc;
>
>                font-size: 16px;
>
>                outline: none;
>
>            }
>
>            .parent>input:first-of-type:focus {
>
>                border: 1px solid #317ef3;
>
>                padding-left: 10px;
>
>            }
>
>            .parent>input:last-of-type {
>
>                /*button按钮border并不占据外围⼤⼩，设置⾼度42px*/                width: 100px;
>
>                height: 44px;
>
>                position: absolute;
>
>                background: #317ef3;
>
>                border: 1px solid #317ef3;
>
>                color: #fff;
>
>                font-size: 16px;
>
>                outline: none;
>
>            }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。