今天小编跟大家讲解下有关HTML+CSS实现漂亮的查询部件实例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关HTML+CSS实现漂亮的查询部件实例 的相关资料，希望小伙伴们看了有所帮助。
一、参考网址：www.kuhnsjewelers.com 二、效果：三、HTML 复制代码代码如下: <div id="search-box"> <asp:TextBox ID="txtSearch"runat="server"class="searchTextBox"/> <asp:Button ID="btnSubmit"runat="server"class="submitButton"Text="Search"/> </div> 四、CSS 复制代码代码如下: #search-box { position: relative; float: left; width: 265px; height: 55px; background: url(Images/search-bg.gif) top right no-repeat; } .searchTextBox { position: relative; float: left; margin-top: 14px; margin-right:14px; padding: 5px 5px 0 5px; height: 22px; width: 141px; border: 1px solid #000; background: #915735; margin-left: 14px; color: #fdf086; } .submitButton { position: relative; height: 29px; margin-top: 14px; width: 70px; background: #D2B277; border: 1px solid #3E1210; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; font-size: 11px; } .submitButton:hover { text-decoration: underline; } 五、说明： 1、文本框预编译后是" type="text"的标签input,代码如下： 复制代码代码如下: <input name="txtSearch"id="txtSearch"class="searchTextBox"type="text"> 2、文本框的大小和div类似 盒子模型如图示： 3、按钮预编译后是标签type="submit"的标签input 复制代码代码如下: <input name="btnSubmit"value="Search"id="btnSubmit"class="submitButton"type="submit"> 4、按钮的width和height是包括边框的 CSS中设置的width: 70px; height: 29px; 实际盒子模型如图示：来源：爱蒂网
