HTML+CSS 简易搜索框
生活随笔
收集整理的這篇文章主要介紹了
HTML+CSS 简易搜索框
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
搜索框是頁(yè)面中很常見(jiàn)的一種，下面分享一段簡(jiǎn)單搜索框案例，直接上代碼
HTML部分
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>搜索框</title></head><body><div class="search"><input type="text" placeholder="請(qǐng)輸入..." 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;//左浮動(dòng)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;}成品圖：
?
轉(zhuǎn)載于:https://www.cnblogs.com/smile-xin/p/11390319.html
總結(jié)
以上是生活随笔為你收集整理的HTML+CSS 简易搜索框的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： chatgpt平替，清华chatglm本
- 下一篇： 读《470个建筑设计创意发想》