【京東商城トップページ実戦6】検索ボックスを作成
次に第2部:検索ボックス、すなわち図1の青い枠線部分を行います.
図1
HTML:
cssコード:
効果1:ピンクの背景部分はテキストボックスとボタンの父の箱です.
効果2:
テキストボックスには2 pxの枠線があるので、白いところからbuttonの幅を測定すると、2 pxを減らします.
効果3:
検索ボックスの作成が終わりました.教えてください.ありがとうございます.
図1
HTML:
<div class="search">
<input type="text" name="" id="" value=" "/>
<button> </button>
</div>cssコード:
.search { width: 538px; height: 35px; background: pink; /* */ float: left; margin-top: 25px; } 1
.search input{ float: left; /* ， */ width: 450px; height: 32px; /* */ border: 2px solid #B61D1D; padding-left: 4px; /* */ color: #666; font: 14px/32px "microsoft yahei"; } 2
.search button{ float: left; width: 80px; height: 36px; background-color: #B61D1D; font: 16px/36px "microsoft yahei"; color: #fff; cursor: pointer; /* */ } 3効果1:ピンクの背景部分はテキストボックスとボタンの父の箱です.
効果2:
テキストボックスには2 pxの枠線があるので、白いところからbuttonの幅を測定すると、2 pxを減らします.
効果3:
検索ボックスの作成が終わりました.教えてください.ありがとうございます.