Ryland's Weblog, focus on Internet and IT
这段时间在研究网站重构课程, 又把CSS横向菜单复习了一遍, 介于W3CN的CSS课程, 再做笔记, 以免忘了…
制作过程:
1, 建立一个无序列表
我们先建立一个无序列表，来建立菜单的结构。代码是：
<ul>
<li><a href=”1″>MenuA</a></li>
<li><a href=”2″>MenuB</a></li>
<li><a href=”3″>MenuC</a></li>
</ul>
2, 隐藏li的默认样式
首先定义一个DIV, 把菜单放在这个DIV里面, 切定义一个class=”tset”; 菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点.
同时定义好DIV的宽度.
CSS定义为:
.test ul{list-style:none;}
写在前面: 一定要牢记, TABLE能做到的, DIV+CSS一定能够做到…,当然, 必要时候, TABLE还是很有用的.
制作方法：（利用div的ul和li列表标记打造类似表格效果）
1, 首先分析一下如何制作：li是固定的宽度与高度（单元格），设置li在ul中浮动，当ul不够宽的时候，li就会自动另起一行排列（一行有多少列通过计算即可得到ul的宽度，如一行四列，一列宽100px，那ul宽就是400px加上一定的边距）。这样就实现了类似于表格的效果，或者说我们用UL+LI模拟了表格的效果。我们开始HTML代码的编写：
主要的样式定义如下：
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明：
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
现在进行WEB重构的时候,一般我们做DIV 居中是这样:
body{
margin:0px auto;
text-align:center;
}
但是在没申明下面这句解析方法的时候,页面就会出错.不能居中对齐!
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
为此困扰了我几天.那么有的朋友就会说:你加上这句不就行了吗? 可是有时候页面并不能全部按上面规定的代码格式来编写,比如说要改多彩滚动条.
图片中：CSS ‘width’ 指的是标准CSS中所指的width的宽度，在firefox，opera等中的宽度就是这个宽度。它只包含容器中内容的宽度。
而Internet Explorer ‘width’则是指整个容器的宽度，包括内容，padding ，border。
所谓的CSS的宽度的加法减法就指这里不同浏览器对width解析得到的不同结果。
Firefox中是加法：容器占的宽度=内容宽度+padding宽度+border宽度