div css搜尋框效果程式碼例項
分享一個程式碼例項,它實現了簡單的搜尋框效果。
這個搜尋框是模擬百度的,可以作為初學者的參考之用。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .main { height: 30px; width: 400px; line-height: 30px; border: 1px solid #eee; display: block; float: left; } .input { height: 28px; width: 360px; padding: 0; float: left; border: none; outline: none; padding-left: 10px; } .submit { height: 32px; width: 100px; float: left; background: none; border: none; outline: none; background: #2E7EF7; color: white; } .submit:hover { background: #1F71F0; } </style> </head> <body> <form method="post"> <span class="main"> <input type="text" value="" id="input" class="input"> </span> <input type="submit" value="百度一下" class="submit"> </form> </body> </html>
相關文章
- css3實現div邊框陰影效果程式碼例項CSSS3
- css內邊框效果程式碼例項CSS
- 美觀的搜尋框程式碼例項
- div css三列布局效果例項程式碼CSS
- 搜尋框關鍵字智慧匹配例項程式碼例項
- 搜尋框帶有搜尋提示點選消失程式碼例項
- jQuery可伸縮搜尋框程式碼例項jQuery
- css實現的div垂直居中效果程式碼例項CSS
- CSS實現div層半透明效果程式碼例項CSS
- CSS3 div從左側滑入效果程式碼例項CSSS3
- css實現div全屏水平垂直居中效果程式碼例項CSS
- div虛線邊框程式碼例項
- css3鋸齒形邊框效果程式碼例項CSSS3
- 滑鼠懸浮可以伸縮的搜尋框程式碼例項
- css切角效果程式碼例項CSS
- css模糊效果程式碼例項CSS
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css多重邊框程式碼例項CSS
- CSS3圖片邊框陰影效果程式碼例項CSSS3
- CSS讓div水平居中例項程式碼CSS
- div css左右佈局例項程式碼CSS
- div前後翻轉效果程式碼例項
- div的淡入淡出效果程式碼例項
- CSS橢圓效果程式碼例項CSS
- css立體效果程式碼例項CSS
- css Sprite 動畫效果程式碼例項CSS動畫
- css斜線效果程式碼例項CSS
- css 心形效果程式碼例項CSS
- css邊框陰影程式碼例項CSS
- css半透明邊框程式碼例項CSS
- css條紋邊框程式碼例項CSS
- css3實現的邊框陰影效果程式碼例項CSSS3
- 點選可以展開和關閉的搜尋框程式碼例項
- 在網頁中加入百度搜尋框例項程式碼網頁
- 密碼框提示文字效果程式碼例項密碼
- 密碼框輸入提示效果程式碼例項密碼
- 當前文字框高亮效果程式碼例項