HTML+CSS 简易搜索框
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS 简易搜索框
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
搜索框是頁面中很常見的一種，下面分享一段簡單搜索框案例，直接上代碼
HTML部分
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>搜索框</title></head><body><div class="search"><input type="text" placeholder="請輸入..." name="" id="" value="" /><button><i>搜索</i></button></div></body> </html>CSS部分
*{padding: 0;margin: 0;}.search{width: 30%; margin: 100px auto;display: flex;/*border: 1px solid red;*/}.search input{float: left;//左浮動flex: 4;height: 30px;outline: none;border: 1px solid red;box-sizing: border-box;//盒子模型，怪異IE盒子模型，width=content+border*2+padding*2padding-left: 10px;}.search button{float: right;flex: 1;height: 30px;background-color: red;color: white;border-style: none;outline: none;}.search button i{font-style: normal;}.search button:hover{font-size: 16px;}成品圖：
?
轉載于:https://www.cnblogs.com/smile-xin/p/11390319.html
總結
以上是生活随笔為你收集整理的HTML+CSS 简易搜索框的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： chatgpt平替，清华chatglm本
- 下一篇： 读《470个建筑设计创意发想》