20170312

1 长版的搜索框,初始框架

<div class="search">

<input type="text" placeholder="faded"><a href="#"></a>

</div>

思路 div设置搜索栏的宽,设置边框border包起来,

input设置宽高 并出去默认边框border:none;

padding-left:15px;代表搜索栏里的字体距离最左边有15px

再把右边的可供点击的放大镜截图下来作背景图

截图注意图标在居中,然后a标签设置好背景图宽高

.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标签是行内元素,注意转换.

input的宽度等于总宽300-a标签背景图大小40-左内边距15=245px;

错误:一开始插入图片后,input和A标签不在一行,导致搜索框变形,拖拽,

后来发现vertical-align:middle换成top之后就对齐了,

input只能用vertical-align:top;居上对齐.

2 标头搜索引擎优化

<h1 class="search">

<a href="#">标题</a>

</h1>

.search{一般设置图片的宽高,background插入图片,注意路径}

.search a{display:block; text-indent:-999em;}让标题显示在屏幕外.

3字体上方的标注图片

<ul>

<li><img src=""></li>

</ul>

用定位做,根据父相子绝,设置图片父元素li为relative相对定位;

子元素img为绝对定位absolute;然后用left right top bottom 微调;