Web前端之网页导航----创新工场

按惯例，先来张原图



这是我做的



①先从它的背景来说，之前做的豌豆荚使用background: #F2F2F2;但是你仔细看创新工场的上下不一样，是不是看上去很不一般，它的原理其实很简单background: url(header.png) repeat-x scroll left top transparent;就是一张图，图片上只有一条线，下面颜色深，然后 repeat-x，就搞定了，但是这个scrool我没搞懂，他的意思我知道，但在这里我不清楚什么意思！

②创新工场logo也是和上篇豌豆荚的效果一样，也是把文字放在<a>中，然后背景弄上，text-indent: -2000px;就搞定了，现在基本都使用这个技术，其实在《CSS
Web设计高级教程》里看到过，只是当时没有理解他的实际意思，很多都是这样，见多了就知道了。

③上面的首页都是包在<ul><li>中的，前面的点是用li{list-style: none;}去掉的，至于从竖行变成横行是用display:inline-block; 或float:left;搞定的。（在IE需要hank，我以后查下）。

④看下鼠标在这些li上时的状态



再看下这张图片



是不是很神奇呢，这是css精灵，鼠标不在的时候是上面灰色状态，点上（hover）是下面的。这样做的目的是将少http请求，这也是我在js看完后要首看的。

看下首页的代码

#nav_home{

background: url(nav_icon.gif) no-repeat scroll 0 0 transparent;

}

#nav_home:hover{

background: url(nav_icon.gif) no-repeat scroll 0 -55px transparent;

}

怎样定位呢？

先看张图



看图就知道该怎么用了吧！

⑤小细节，链接下的下划线怎么删除呢！text-decoration: none;

关于 position: absolute;和position: relative;这对好基友到底是怎么回事， 我会在下一篇博客里讲到的。