趁着热情未减, 赶紧的写下自己的第一篇简书. 今天要分享的是如何利用 html + CSS 写出一个令自己满意的搜索框. 说来忏愧, 刚学 HTML 的时候, 被这个问题困惑了许久, 一直未得到解决.
下面是基本思路:
首先定义一个 div 来包住 input 和 button, 然后给 div 一个边框, input 和 button 均设为无边框, 随后利用相对定位把 button 定位到 div 的最右端, 然后便可以得到下图的效果了:
效果图
下面附上代码:
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 我的搜索页
- </title>
- <style type="text/css">
- *{ padding: 0; margin: 0; } /* 名称 */ .title{ text-align: center; font-size:
- 25px; font-weight: bold; color: cadetblue; margin-top: 100px; margin-bottom:
- 20px; font-family: fantasy; } /* 下面是搜索框样式 */ .searchBox{ width: 40%; height:
- 35px; border: 1px solid cadetblue; outline: hidden; border-radius: 2px;
- margin: 0 auto; position: relative; } .inputBox{ border: none; width: 90%;
- height: 35px; line-height: 35px; outline: none; } .searchBtn{ width: 65px;
- height: 35px; border: none; position: absolute; right: 0; outline: none;
- color: white; font-size: 15px; background-color: cornflowerblue; }
- </style>
- </head>
- <body>
- <div class="title">
- <p>
- I tell you
- </p>
- </div>
- <div class="searchBox">
- <input class="inputBox" placeholder="I will tell you all you want to know!">
- <button class="searchBtn">
- 搜索
- </button>
- </div>
- </body>
- </HTML>
如果觉得还可以的话, 点个赞呗~
来源: http://www.jianshu.com/p/5390f0b5fc0f