情提示：以下代碼是我們邀請的前端架構(gòu)師基于天貓門戶編寫的css相關(guān)代碼，現(xiàn)在免費(fèi)分享給大家，獲取的方式為：

關(guān)注此頭條號“互聯(lián)網(wǎng)IT信息”——>私信發(fā)送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式。

1. 此篇文章講解目錄：

• 案例和由此案例重點(diǎn)講解的知識點(diǎn)介紹

• 案例代碼實(shí)現(xiàn)

2. 案例和相關(guān)知識點(diǎn)介紹

此案例是頁面，效果如下：

此頁面的技術(shù)實(shí)現(xiàn)解析：

使用文字行高line-height即可達(dá)到上述的效果，最終行與行之間的空隙美觀

3. 此案例的代碼實(shí)現(xiàn)

第一步：書寫版權(quán)聲明等相關(guān)信息的html代碼

第二步：通過line-height定義行高（line-height是屬于css繼承性里面的知識，所以只需要在最外層定義一次即可）

. 此篇文章講解目錄：

• 案例和由此案例重點(diǎn)講解的知識點(diǎn)介紹

• 案例代碼實(shí)現(xiàn)

• 塊級標(biāo)簽知識點(diǎn)詳解

2. 案例和相關(guān)知識點(diǎn)介紹

此案例是頁面，效果如下：

此頁面的技術(shù)實(shí)現(xiàn)解析：

大的廣告圖和小的廣告圖分隔成了兩行，使用div塊級標(biāo)簽來實(shí)現(xiàn)分塊

此案例中主要用到了，基于此，我們會系統(tǒng)的將如下知識點(diǎn)全部講解：

塊級標(biāo)簽

3. 此案例的代碼實(shí)現(xiàn)

第一步：書寫兩個廣告塊的html

第二步：定義每個廣告的css樣式

4. 此案例的知識點(diǎn)詳解

塊級標(biāo)簽

什么是塊級標(biāo)簽：在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素

塊級標(biāo)簽三特點(diǎn)：

1一個塊級元素獨(dú)占一行

2元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。

3元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個寬度

案例：

繪制2個盒子，體會一下塊級元素

div{

width: 100px;

height: 100px;

background-color: pink;

margin-bottom: 5px;

}

p{

background-color: blue;

}

h1{

background-color: yellow;

}

大家好接下來我們會邀請前端架構(gòu)師以連載的方式，并且結(jié)合阿里天貓商城的門戶，系統(tǒng)講解Css的專業(yè)知識，歡迎大家關(guān)注頭條號“互聯(lián)網(wǎng)IT信息”。

文教程

【以上教程已經(jīng)盡量去寫的詳細(xì)了，有沒有說到的地方 理解下，回復(fù)里面問就好。上面只是對搜索進(jìn)行了簡單的分析，至于如何將搜索做成你設(shè)計(jì)的效果，只需要修改input里面的style的樣式就可以了。】

下面是上面教程里面的搜索代碼：

<!--店鋪搜索條代碼-->

<form action="http://cisdesign.taobao.com/search.htm" method="get" target="_blank">

<!--表單的標(biāo)簽是form，注意些的時(shí)候標(biāo)簽成對出現(xiàn)，開始和結(jié)束的-->

<input name="keyword" value="米色設(shè)計(jì)" title="這個是輸入框部分" style="background-image:url(搜索_01.png); width:324px; height:33px; border:0px; outline:none; float:left; text-indent:35px; color:#CC9966;" />

<input type="submit" value="搜索" title="這個是搜索按鈕" style="background-image:url(搜索_02.png); width:63px; height:33px; border:0px; outline:none; float:left; text-indent:65px;"/>

</form>

<!--現(xiàn)在還要做一個事情，就是怎么把這個搜索條做成自己設(shè)計(jì)的樣子。給input指定樣式-->

下面是整理后的搜索模板

<!--搜索框模板-->

<form action="你店鋪的地址/search.htm" method="get" target="_blank">

<input name="keyword" value="輸入框默認(rèn)文字" style="background-image:url(輸入框背景圖地址); width:輸入框背景圖寬度px; height:輸入框背景圖高度px; border:0px; outline:none; float:left; text-indent:35px; color:#CC9966;" />

<input type="submit" value="搜索" style="background-image:url(搜索按鈕背景圖地址); width:搜索按鈕背景圖寬度px; height:搜索按鈕背景圖高度px; border:0px; outline:none; float:left; text-indent:65px;"/>

</form>

<!--搜索框模板結(jié)束-->

有小伙伴要吐槽了?，F(xiàn)在我可以自己做一個搜索框了，但是怎么把搜索框放到我想要放的位置呢，因?yàn)閷?shí)際工作中，不可能就簡單這樣加搜索框就可以

那這里米色就舉個簡單例子

<div style="width:950px; height:120px; background-image:url(背景圖地址); position:relative;" data-source="假如這里是你現(xiàn)有的一個效果代碼">

<!--將下面的搜索框部分代碼，直接放到你想放的位置的代碼里，然后你想讓搜索框以誰為參照定位移動，就給誰加一個position:relative;-->

<!--注意：參照物必須把搜索框代碼包起來才行-->

<div class="footer-more-trigger most-footer sn-simple-logo" style="width:搜索框?qū)挾萷x; height:搜索框高度px; position:absolute; left:距左px; top:距右px; z-index:5; border:0; padding:0; background: transparent;">

<form action="你店鋪的地址/search.htm" method="get" target="_blank">

<!--表單的標(biāo)簽是form，注意些的時(shí)候標(biāo)簽成對出現(xiàn)，開始和結(jié)束的-->

<input name="keyword" value="輸入框默認(rèn)文字" style="background-image:url(輸入框背景圖地址); width:輸入框背景圖寬度px; height:輸入框背景圖高度px; border:0px; outline:none; float:left; text-indent:35px; color:#CC9966;" />

<input type="submit" value="搜索" style="background-image:url(搜索按鈕背景圖地址); width:搜索按鈕背景圖寬度px; height:搜索按鈕背景圖高度px; border:0px; outline:none; float:left; text-indent:65px;"/>

</form>

</div>

</div>

如果有代碼基礎(chǔ)的話，可以通過修改搜索框代碼里面的CSS樣式，把搜索框做成你想要的樣子。如果沒有代碼基礎(chǔ)，我建議PS里面涉及好搜索框的效果，然后給搜索框添加背景圖。注意尺寸就可以。

代碼有難度，看起來會比較累，我盡量寫的很詳細(xì)了，如果還是有不明白的可以留言問哈