CSS下拉菜单
这是一个标准的CSS下拉菜单制作教程，有针对目前流行的IE6/IE7/IE8不同版本的CSS代码，因此可以在IE之间完全兼容，不过其它的浏览器像火狐/GG浏览器之类的没有测试，如果兼容IE8的话，那么兼容火狐应该问题不大吧。菜单使用蓝色基调，滑向二级菜单更换背景，操作的感觉很舒服。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>纯css下拉菜单</title>
<!--[if IE 7]><!-->
<mce:style><!--
body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation , #navigation li ul{
padding:0;
margin:0;
list-style-type: none;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li h3 {
margin:0;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li ul {
display: none;
}
table {
margin:-1px;
border-collapse:collapse;
}
/* 以下只支持非IE6浏览器 */
#navigation li:hover a {
color:#fff;
background:#2687eb;
}
#navigation li:hover ul {
display:block;
position:absolute;
top:40px;
margin-top:1px;
left:0;
width:120px;
}
#navigation li:hover ul li a {
display:block;
background:#c5dbf2;
color:#000;
height:20px;
line-height:20px;
padding:5px 10px;
width:110px;
}
#navigation li:hover ul li a:hover {
color:#fff;
background:#6b839c;
}
</styel>
<!--<![endif]-->
<!--[if lte IE 6]>
<style>
BODY {
FONT-SIZE: small; FONT-FAMILY: verdana, sans-serif
}
#navigation {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
相关文档：
定位一直是WEB标准应用中的难点，如果理不清楚定位那么可能应实现的效果实现不了，实现了的效果可能会走样。如果理清了定位的原理，那定位会让网页实现的更加完美。
定位的定义：
在CSS中关于定位的内容是：position:relative | absolute | static | fixed
static 没有特别的设定，遵循基本的定位规定，不能通过z-index� ......
看到问此问题的很多，所以花点时间整理下，欢迎大家提意见，做补充修改，谢谢！
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时，文档流是从上到下，从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ......
CSS 盒模型
网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：
如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿)，就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。
注意以上两个例子中，margi ......
CSS 命名规范
XHTML-CSS写作建议
所有的xhtml代码小写
属性的值一定要用双引号("")括起来，且一定要有值
每个标签都要有开始和结束，且要有正确的层次
空元素要有结束的tag或于开始的tag后加上"/"
表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
<h1> ......
margin 外边距
border 边框
padding 内边距
也就是说 设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面
而且在IE6 一下的版本中 存在这padding 计算错误的BUG
CSS 的宽度属性本来是不包含padding的 但是 在ie下面有的时候宽度是包含padding 所以 建议在不熟悉CSS 在定位 ......
