HTML搜索栏的代码怎么写

这篇文章主要介绍"HTML搜索栏的代码怎么写"，在日常操作中，相信很多人在HTML搜索栏的代码怎么写问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"HTML搜索栏的代码怎么写"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

1. 简书类

实现效果

html代码

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

css代码

重点：
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;            }

到此，关于"HTML搜索栏的代码怎么写"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！