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

1. 简书类

实现效果

打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）

 

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代码

.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;

            }

重点：

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;

            }