如何使用CSS来进行网页排版6

<liid="three"><atitle="网站标准"href="http://www.w3cn.org/webstandards.html">网站标准</a></li>

<liid="four"><atitle="标准的好处"href="http://www.w3cn.org/benefits.html">标准的好处</a></li>

<liid="five"><atitle="怎样过渡"href="http://www.w3cn.org/howto.html">怎样过渡</a></li>

<liid="six"><atitle="相关教程"href="http://www.w3cn.org/tutorial.html">相关教程</a></li>

<liid="seven"><atitle="工具"href="http://www.w3cn.org/tools.html">工具</a></li>

<liid="eight"><atitle="资源及链接"href="http://www.w3cn.org/resources.html">资源及链接</a></li>

<liid="nine"><atitle="常见问题"href="http://www.w3cn.org/faq.html">常见问题</a></li>

</ul>

</div>

样式表代码

以下是引用片段：

#submenu{

MARGIN:0px8px0px8px;

PADDING:4px0px0px0px;

BORDER:#fff1pxsolid;

BACKGROUND:#dfdfdf;

COLOR:#666;

HEIGHT:25px;}

#submenuul{

CLEAR:left;

MARGIN:0px;

PADDING:0px;

BORDER:0px;

LIST-STYLE-TYPE:none;

TEXT-ALIGN:center;

DISPLAY:inline;

}

#submenuli{

FLOAT:left;

DISPLAY:block;

MARGIN:0px;

PADDING:0px;

TEXT-ALIGN:center}

#submenulia{

DISPLAY:block;

PADDING:2px3px2px3px;

BACKGROUND:url(images/icon_dot_lmenu.gif)transparentno-repeat2px8px;

FONT-WEIGHT:bold;

WIDTH:100%;

COLOR:#444;

TEXT-DECORATION:none;

}

#submenulia:hover{

BACKGROUND:url(images/icon_dot_lmenu2.gif)#C61C18no-repeat2px8px;

COLOR:#fff;}

#submenuulli#oneA{WIDTH:60px}

#submenuulli#twoA{WIDTH:80px}

#submenuulli#threeA{WIDTH:80px}

#submenuulli#fourA{WIDTH:90px}

#submenuulli#fiveA{WIDTH:80px}

#submenuulli#sixA{WIDTH:80px}

#submenuulli#sevenA{WIDTH:60px}

#submenuulli#eightA{WIDTH:90px}

#submenuulli#nineA{WIDTH:80px}

以上代码不逐一分析了。横向菜单的关键在于：定义<li>样式时的"FLOAT: left;"语句。另外注意UL定义中的DISPLAY:inline;一句表示将li强制作为内联对象呈递，从对象中删除行，通俗讲就是li不换行。实现横向排列。你也可以象例子中定义每个子菜单的宽度，控制菜单的间隔。好了，你也可以动手试试，用li实现各种各样的菜单样式。

Tips:如果你子菜单的宽度总和大于层的宽度，菜单会自动折行，利用这个原理可以实现单个无序列表的2列或者3列排版，这是原来HTML很难实现的。