整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
關注此頭條號“互聯網IT信息”——>私信發送 “天貓css” ，（注意：css全是小寫）即可得到源代碼的獲取方式。
案例和由此案例重點講解的知識點介紹
案例代碼實現
此案例是頁面，效果如下：
此頁面的技術實現解析：
使用文字行高line-height即可達到上述的效果，最終行與行之間的空隙美觀
第一步：書寫版權聲明等相關信息的html代碼
第二步：通過line-height定義行高（line-height是屬于css繼承性里面的知識，所以只需要在最外層定義一次即可）
案例和由此案例重點講解的知識點介紹
案例代碼實現
塊級標簽知識點詳解
此案例是頁面，效果如下：
此頁面的技術實現解析：
大的廣告圖和小的廣告圖分隔成了兩行，使用div塊級標簽來實現分塊
此案例中主要用到了，基于此，我們會系統的將如下知識點全部講解：
塊級標簽
第一步：書寫兩個廣告塊的html
第二步：定義每個廣告的css樣式
塊級標簽
什么是塊級標簽：在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是塊級元素
塊級標簽三特點：
1一個塊級元素獨占一行
2元素的高度、寬度、行高以及頂和底邊距都可設置。
3元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度
案例：
繪制2個盒子，體會一下塊級元素
div{
width: 100px;
height: 100px;
background-color: pink;
margin-bottom: 5px;
}
p{
background-color: blue;
}
h1{
background-color: yellow;
}
【以上教程已經盡量去寫的詳細了，有沒有說到的地方 理解下，回復里面問就好。上面只是對搜索進行了簡單的分析，至于如何將搜索做成你設計的效果，只需要修改input里面的style的樣式就可以了。】
<!--店鋪搜索條代碼-->
<form action="http://cisdesign.taobao.com/search.htm" method="get" target="_blank">
<!--表單的標簽是form，注意些的時候標簽成對出現，開始和結束的-->
<input name="keyword" value="米色設計" 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>
<!--現在還要做一個事情，就是怎么把這個搜索條做成自己設計的樣子。給input指定樣式-->
<!--搜索框模板-->
<form action="你店鋪的地址/search.htm" method="get" target="_blank">
<input name="keyword" value="輸入框默認文字" 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 style="width:950px; height:120px; background-image:url(背景圖地址); position:relative;" data-source="假如這里是你現有的一個效果代碼">
<!--將下面的搜索框部分代碼，直接放到你想放的位置的代碼里，然后你想讓搜索框以誰為參照定位移動，就給誰加一個position:relative;-->
<!--注意：參照物必須把搜索框代碼包起來才行-->
<div class="footer-more-trigger most-footer sn-simple-logo" style="width:搜索框寬度px; 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">
<!--表單的標簽是form，注意些的時候標簽成對出現，開始和結束的-->
<input name="keyword" value="輸入框默認文字" 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>
如果有代碼基礎的話，可以通過修改搜索框代碼里面的CSS樣式，把搜索框做成你想要的樣子。如果沒有代碼基礎，我建議PS里面涉及好搜索框的效果，然后給搜索框添加背景圖。注意尺寸就可以。
代碼有難度，看起來會比較累，我盡量寫的很詳細了，如果還是有不明白的可以留言問哈
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
