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 微调;
