千家信息网

HTML搜索栏的代码怎么写

发表于:2025-11-18 作者:千家信息网编辑
千家信息网最后更新 2025年11月18日,这篇文章主要介绍"HTML搜索栏的代码怎么写",在日常操作中,相信很多人在HTML搜索栏的代码怎么写问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"HTML搜索栏的代码怎
千家信息网最后更新 2025年11月18日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搜索栏的代码怎么写"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

0