情提示：以下代码是我们邀请的前端架构师基于天猫门户编写的css相关代码，现在免费分享给大家，获取的方式为：

关注此头条号“互联网IT信息”——>私信发送 “天猫css” ，（注意：css全是小写）即可得到源代码的获取方式。

1. 此篇文章讲解目录：

• 案例和由此案例重点讲解的知识点介绍

• 案例代码实现

2. 案例和相关知识点介绍

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

此页面的技术实现解析：

使用文字行高line-height即可达到上述的效果，最终行与行之间的空隙美观

3. 此案例的代码实现

第一步：书写版权声明等相关信息的html代码

第二步：通过line-height定义行高（line-height是属于css继承性里面的知识，所以只需要在最外层定义一次即可）

. 此篇文章讲解目录：

• 案例和由此案例重点讲解的知识点介绍

• 案例代码实现

• 块级标签知识点详解

2. 案例和相关知识点介绍

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

此页面的技术实现解析：

大的广告图和小的广告图分隔成了两行，使用div块级标签来实现分块

此案例中主要用到了，基于此，我们会系统的将如下知识点全部讲解：

块级标签

3. 此案例的代码实现

第一步：书写两个广告块的html

第二步：定义每个广告的css样式

4. 此案例的知识点详解

块级标签

什么是块级标签：在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;

}

大家好接下来我们会邀请前端架构师以连载的方式，并且结合阿里天猫商城的门户，系统讲解Css的专业知识，欢迎大家关注头条号“互联网IT信息”。

文教程

【以上教程已经尽量去写的详细了，有没有说到的地方 理解下，回复里面问就好。上面只是对搜索进行了简单的分析，至于如何将搜索做成你设计的效果，只需要修改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里面涉及好搜索框的效果，然后给搜索框添加背景图。注意尺寸就可以。

代码有难度，看起来会比较累，我尽量写的很详细了，如果还是有不明白的可以留言问哈