HTML+CSS 简易搜索框
2020-02-03 04:50
1021 查看
搜索框是页面中很常见的一种,下面分享一段简单搜索框案例,直接上代码
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*2 padding-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
- 点赞 1
- 收藏
- 分享
- 文章举报
相关文章推荐
- 用css/html制作简易bookstore网页
- 简易轮播图,走马灯,幻灯片(html+css+jq)
- html+css+javascript实现简易轮播图片
- HTML+css制作简易进度条
- 制作百度搜索首页(附赠HTML,js,css)
- 用HTML,CSS,JS实现简易的弹幕功能
- 使用HTML CSS制作简易三角形和旗帜
- HTML+css制作简易图片库
- html加css实现简易导航栏
- html+css+js写一个简易功能的消消乐~~~~
- 一个简易的登陆框html(table)+css
- 就学习两天html和css搭建简易拉勾框架小结
- html+css+js实现的简易下拉菜单
- html+css+jquery模仿搜索风云榜选项卡效果有截图
- 简易音乐播放器(js,html,css实现)
- HTML、CSS与JS实现简易iPhone计算器
- 纯HTML+CSS实现的简易相册
- html/css+jsp+ajax实现简易版购物车
- html+css实现简易下拉菜单
- html+css制作简易版Baymax