以前拿到这种页头的时候，会在html里面插入图片，然后把有链接的地方用热区分割加链接，这样的写法不利于seo；

可以看到四个导航按钮的位置比较个性化，我用的方法是这张图作为背景，其他带链接的都绝对定位，在html代码里只看到精简的代码：

html代码：
<div id=”WishDream” class=”WishTop”>
<h1>爱有天意 under the love heaven</h1><!–主标题–>
<h2>在这里，写下你的个人梦想</h2><!–副标题–>
<ul>
<li class=”Index”><a href=”#” title=”许愿首页”>许愿首页</a></li>
<li class=”Love”><a href=”#” title=”爱情表白”>爱情表白</a></li>
<li class=”Dream”><a href=”#” title=”个人梦想”>个人梦想</a></li>
<li class=”Birth”><a href=”#” title=”生日祝福”>生日祝福</a></li>
</ul>
<div id=”SearchWish”>
<form>
<h3>搜搜看-找相同的愿望:</h3>
<input name=”" type=”text” />
<button><img src=”images/fenlei/button_go.gif” align=”absmiddle” /></button>
</form>
</div>
<a href=”#” target=”_blank” class=”WriteWish” title=”写纸条”>写纸条</a>
</div>

css部分：
.WishTop{
position:relative;
margin-top:-18px;
>margin-top:0;
height:220px;
}
#WishDream{background:url(../images/fenlei/top_dream.jpg) no-repeat;}/*把公用的WishTop和私有的WishDream分开，有助于扩展，下次需要新的许愿主题时，只要改私有的id就可以了*/
.WishTop h1,.WishTop h2{ text-indent:-100000px;}
.WishTop li a{
position:absolute;
display:block;
text-indent:-100000px;/*html代码里的文字都用这个方法让它们不显示出来*/
background:url(../images/fenlei/top_bgno.jpg);
}
.WishTop li.Index a{
top:25px;
left:15px;
width:70px;
height:35px;
}
.WishTop li.Love a{
top:50px;
left:135px;
width:99px;
height:46px;
}
.WishTop li.Dream a{
top:97px;
left:22px;
width:100px;
height:48px;
}
.WishTop li.Birth a{
top:150px;
left:163px;
width:100px;
height:48px;
}

/*搜索框css同理，略*/

【发表评论 0条】