一、參考網(wǎng)址：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、? 文本框預(yù)編譯后是" type="text"的標(biāo)簽input,代碼如下：

?

<input name="txtSearch" id="txtSearch" class="searchTextBox" type="text">

2、? 文本框的大小和div類似，盒子模型如圖示：

?

3、? 按鈕預(yù)編譯后是標(biāo)簽type="submit"的標(biāo)簽input

?

<input name="btnSubmit" value="Search" id="btnSubmit" class="submitButton" type="submit">

4、? 按鈕的width和height是包括邊框的，CSS中設(shè)置的 width: 70px; height: 29px;，實際盒子模型如圖示：

?

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS实例——漂亮的查询部件（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。