Css 入门学习 css下拉菜单制作
注意事项：
了实现导航中的子导航与主导航在实现鼠标交互的同时，保持其相对位置一致，我们使用了对ul li{}使用了position:relative;使其定位方式转为相对定位。而对li ul{}即子导航采用了position:absolute;相对于导航的绝对定位方式，了其鼠标交互后的位置一致。
纵向导航菜单
我们先看一下代码结构：
<div id="nav">
<h1>CSS</h1>
<h2><a href="#">css入门</a></h2>
<h2><a href="#">css进阶</a></h2>
<h2><a href="#">css高级</a></h2>
<h1>webUI</h1>
<h2><a href="#">理论知识</a></h2>
<h2><a href="#">实战应用</a></h2>
<h2><a href="#">高级技巧</a></h2>
<h1>DOM</h1>
<h2><a href="#">DOM入门</a></h2>
<h2><a href="#">DOM应用</a></h2>
<h2><a href="#">DOM与浏览器</a></h2>
<h1>XHTML</h1>
<h2><a href="#">参考手册</a></h2>
<h2><a href="#">交流论坛</a></h2>
</div>
从以上可以看出，这次的XHTML部分的代码横向代码略有不同，我们没有继续使用ul和li标签，其实继续使用ul元素也能完好的实现纵向�
相关文档：
IE和FF对盒模型的解释区别
IE和FF对盒模型的解释也不一样，代码说明：#test { width: 650px !important;width: 648px;padding-left:2px;background:#fff; }
test 显示的宽带是 650px
IE Box的总宽度是： width+padding+border+margin宽度总和
FF Box的总宽度就是 width的宽度，padding+border+margin的宽度在含在width� ......
.inputbox {
padding-left: 2px;
border-top: 1px solid #9AA587;
border-right: 1px solid #DDDDDD;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #9A ......
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{margin:0;padding:0;font-family:'宋体';}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,a,span {overflow:hidden;}
table{border-collapse:collapse;border-spacing:0; font-size:12px;}
td { line-height:18px ......
<html>
<head>
<mce:style type = "text/css"><!--
table
{
border-collapse:collapse;
}
td
{
border:solid 1px black;
}
--></mce:style><style type = "text/css" mce_bogus="1">table
{
border-collapse:collapse;
}
td
......
1.css 字体简写规则
当使用css定义字体时你可能会这样做:
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-family: verdana,serif;
事实上你可以简写这些属性:
font: 1em/1.5em bold italic small-caps ver ......
