这是我在一个网站上看到的,CSS控制一个菜单,很经典实用
Css文件如下:css.css
@charset "UTF-8";
/* navigation.css
$Revision: 1.0 $
(c) 2008 Fortinet, Inc. All rights reserved.
*/
/* Navigation Styles ------------------------------------------- */
#wrapper
{
width:1000px;margin:0 auto;
}
#nav_bar {
clear: both;
background: url(./menu_bkrd.jpg) repeat-x;
height: 26px;
width: 100%;
}
#navigation {
padding: 0 0 0 10px;
}
#nav, #nav ul {
float: left;
list-style: none;
line-height: 1;
padding: 0 0 0 0; /* 0 0 0 0.5em; */
margin: 0; /* 0 0 1em 0; */
/* border: solid 1px #33FF00; /* (Green) remove this item after testing */
width:auto;
}
#nav a {
font: 11px/12px Tahoma, Arial, Helvetica, Verdana, sans-serif;
color: #6a737b;
display: block;
width: 150px; /* 6em; 3em; 10em -- 150px*/
text-decoration: none;
padding: 7px 10px 4px 6px; /* 0.5em 3.5em 0.2em .5em; 0.4em 0 0.2em 0; // 0.4em 2em 0.2em 2em; // 0.5em 2em; */
margin: 0px; /* 0.5em 2em; uncommented - fixes extra space on right for IE 0 0 0 1px */
/* border: solid 1px #FF0000; /* (Red) remove this item after testing */
}
#nav a.top_nav {
font: 12px Arial, Helvetica, sans-serif;
color: #6a737b;
text-align: center;
width: 90px;
margin: 0;
padding: 6px 0 4px 0;
text-decoration: none;
font-weight: bold;
white-space: nowrap; /* */
}
#nav a.nav_parent {
background: url(./rightarrow.gif) center right no-repeat;
/* white-space: nowrap; /* */
/* border: solid 1px #FFFF00; /* (yellow) remove this item after testing */
}
#nav li {
/*float: left;*/
padding: 0;
/* width: 150px; /* 7.5em; 10em; 12em 178px; this has no affect whatsoever */
/* border: solid 1px #FFFF00; /* (yellow) remove this item after testing */
}
#nav li.top_nav
网页采用了 UTF-8 编码格式，这本来没有问题，问题是外部 CSS 文件默认是 ANSI 编码，并没有保存为 UTF-8 格式。可能你会发现在一般情况下这样也是没有问题的，然而当 CSS 文件中包含有中文注释时就可能不尽如人意了！
估计是 IE6 版本以下的浏览器在解析这个 CSS 文件时因为编码问题而无法正确解析，所以才会发生 CSS ......
dt 和dd中可以再加入 ol ul li和p，理解这些以后，在使用div布局的时候，会方便很多，其实w3c提供了很多元素辅助布局都是有它的用处的，而不尽是div。
块级元素div尽量少用，其实和table一样，嵌套越少越好，它也是会影响速度的！
ol 有序列表。
<ol>
<li>......</li>
<li>......</li& ......
JavaScript代码
<mce:script type="text/javascript"><!--
function imageOver(e) {
e.style.border="1px solid red";
}
function imageOut(e) {
e.style.borderWidth=0;
}
// --></mce:script>
<img src="phplamp.gif" onmouseover="imageOver(this)" onmo ......
