1 長(zhǎng)版的搜索框,初始框架
<div class="search">
<input type="text" placeholder="faded"><a href="#"></a>
</div>
思路 div設(shè)置搜索欄的寬,設(shè)置邊框border包起來,
input設(shè)置寬高 并出去默認(rèn)邊框border:none;
padding-left:15px;代表搜索欄里的字體距離最左邊有15px
再把右邊的可供點(diǎn)擊的放大鏡截圖下來作背景圖
截圖注意圖標(biāo)在居中,然后a標(biāo)簽設(shè)置好背景圖寬高
.search{width:300px;border:1px solid black;margin:20px 0px 22px 40px;}
.search input{border:none; padding-left:15px;width:245px;height:34;}
.search a{width:40px; height:34px; background:url(search.png) no-repeat center ;
display-inline-block}a標(biāo)簽是行內(nèi)元素,注意轉(zhuǎn)換.
input的寬度等于總寬300-a標(biāo)簽背景圖大小40-左內(nèi)邊距15=245px;
錯(cuò)誤:一開始插入圖片后,input和A標(biāo)簽不在一行,導(dǎo)致搜索框變形,拖拽,
后來發(fā)現(xiàn)vertical-align:middle換成top之后就對(duì)齊了,
input只能用vertical-align:top;居上對(duì)齊.
2 標(biāo)頭搜索引擎優(yōu)化
<h1 class="search">
<a href="#">標(biāo)題</a>
</h1>
.search{一般設(shè)置圖片的寬高,background插入圖片,注意路徑}
.search a{display:block; text-indent:-999em;}讓標(biāo)題顯示在屏幕外.
3字體上方的標(biāo)注圖片
<ul>
<li><img src=""></li>
</ul>
用定位做,根據(jù)父相子絕,設(shè)置圖片父元素li為relative相對(duì)定位;
子元素img為絕對(duì)定位absolute;然后用left right top bottom 微調(diào);
