第1叶(hellburnn)

偶米想到现在专做前端了，从一个后端Java程序员，到PHP，再到web前端， 真是有趣。
越来越轻量级，团队合作也少了很多（可喜还是可悲？）。

这过程中肯定会碰到好多问题，做前端，要细心，像雕琢。。
经验的积累，变得更加重要了， 记录，把重要的都记下来，仅为了以后少点麻烦。


[img]http://www.bencode.cn/wp-content/uploads/1111.jpg[/img]

对，做的就是这个页面，虽然简单，但却也有些东西想记录

1. Logo
用的是 absolute 定位，当然是相对于外围的container的， 外围container是固定的宽度， 水平居中对齐。

2. 顶导横(top nav)
是一个包含链接的无序列表
要实现的hover效果，链接的 display 为 block, 为了在IE下不让其扩展开，需要 float left
因为水平方向， 所以 li 的 float 为 left, 这同时也闭合了里面的a元素(浮动元素闭合浮动元素)


下面要闭合 top nav 的 ul, 我是用这样的css的

#top-nav {
  overflow: auto;
  width: 898px;
...

当然，可以使用float left闭合， 但是紧挨top-nav上面的Logo是绝对定位的, 这样在ＩＥ下，LOGO可能会莫名消失，
所以在absolute旁边的元素，我没有使用float, 而是采用 overflow: auto定位

但这在IE中还不够， 还需要一个css语句触发layout让其闭合， 恰好这里需要一个width。

如果不能设置windth, 那么我们可以这样闭合：

#id {
	overflow: auto;
	display: inline-block;  // 这个会让IE闭合浮动元素
}
#id {
	display: block;	// 把它设置回来
}

当然可以使用zoom:1, _height:1% 等来触发ie的layout，这些东西感觉专门为IE设计的，但是却通不过w3c css validator，

我们公司的客户很挑剔:
1.首先要在各种浏览器中完美显示
2.代码要精简，美观，后续程序员才可以更好地工作(在欧洲，我们接触不到, 也不会德语)
3.需要通过xhtml1.0 strict w3c validator和css validator，而且最好还要无警告(这个很晕)。


3. 主导横
也是一个无序列表ul， 列表中有链接， ul之间有虚线装饰， hover 的时候，要盖住两边的虚线，如上图。

首先，li之间的那条虚线，可以采用 background 来显示(放在top 还是bottom上呢?)

我把 li 的margin-top 设置为-1, 这样hover的时候， 不仅能盖住自己的元素，而且能盖住上面元素的最后一个像素
如果虚线刚好在这个像素内，那就完成任务啦。

大概像这样:

#main-nav li {
	margin-top: -1px;
}
#main-nav li a {
	display: block;
	width: 159px;
	color: #fff;
	text-align: right;
	padding: 7px 20px 5px 0px;
	background: url(../img/main_nav_item_bg.gif) no-repeat left bottom; // 虚线放在底部
}
#main-nav li a:hover {
	color: #7d1e1c;
	text-decoration: none;
	background: url(../img/main_nav_item_hover_bg.gif) repeat left top;	//...
}

4. 二级导横
本来我想采用float right 再 margin right, 负margin top, 但是这时候肯定会碰到双倍margin(right)的问题。
双倍margin的问题，本可以在元素加 display: inline来解决， 但在我这个问题中，加入inline 不知道为啥会破坏里面的文字。

嗯， 其实我那是舍近求远， 最后我采用绝对定位, 很方便地解决了这个问题。