整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
關(guān)注此頭條號“互聯(lián)網(wǎng)IT信息”——>私信發(fā)送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式。
案例和由此案例重點(diǎn)講解的知識點(diǎn)介紹
案例代碼實(shí)現(xiàn)
此案例是頁面，效果如下：
此頁面的技術(shù)實(shí)現(xiàn)解析：
使用文字行高line-height即可達(dá)到上述的效果，最終行與行之間的空隙美觀
第一步：書寫版權(quán)聲明等相關(guān)信息的html代碼
第二步：通過line-height定義行高（line-height是屬于css繼承性里面的知識，所以只需要在最外層定義一次即可）
案例和由此案例重點(diǎn)講解的知識點(diǎn)介紹
案例代碼實(shí)現(xiàn)
塊級標(biāo)簽知識點(diǎn)詳解
此案例是頁面，效果如下：
此頁面的技術(shù)實(shí)現(xiàn)解析：
大的廣告圖和小的廣告圖分隔成了兩行，使用div塊級標(biāo)簽來實(shí)現(xiàn)分塊
此案例中主要用到了，基于此，我們會(huì)系統(tǒng)的將如下知識點(diǎn)全部講解：
塊級標(biāo)簽
第一步：書寫兩個(gè)廣告塊的html
第二步：定義每個(gè)廣告的css樣式
塊級標(biāo)簽
什么是塊級標(biāo)簽：在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素
塊級標(biāo)簽三特點(diǎn)：
1一個(gè)塊級元素獨(dú)占一行
2元素的高度、寬度、行高以及頂和底邊距都可設(shè)置。
3元素寬度在不設(shè)置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設(shè)定一個(gè)寬度
案例：
繪制2個(gè)盒子，體會(huì)一下塊級元素
div{
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 5px;
}
p{
background-color: blue;
}
h1{
background-color: yellow;
}
【以上教程已經(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="這個(gè)是輸入框部分" 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="這個(gè)是搜索按鈕" style="background-image:url(搜索_02.png); width:63px; height:33px; border:0px; outline:none; float:left; text-indent:65px;"/>
</form>
<!--現(xiàn)在還要做一個(gè)事情，就是怎么把這個(gè)搜索條做成自己設(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é)束-->
有小伙伴要吐槽了。現(xiàn)在我可以自己做一個(gè)搜索框了，但是怎么把搜索框放到我想要放的位置呢，因?yàn)閷?shí)際工作中，不可能就簡單這樣加搜索框就可以
那這里米色就舉個(gè)簡單例子
<div style="width:950px; height:120px; background-image:url(背景圖地址); position:relative;" data-source="假如這里是你現(xiàn)有的一個(gè)效果代碼">
<!--將下面的搜索框部分代碼，直接放到你想放的位置的代碼里，然后你想讓搜索框以誰為參照定位移動(dòng)，就給誰加一個(gè)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里面涉及好搜索框的效果，然后給搜索框添加背景圖。注意尺寸就可以。
代碼有難度，看起來會(huì)比較累，我盡量寫的很詳細(xì)了，如果還是有不明白的可以留言問哈
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
