CSS制作横向菜单,CSS、DIV

运行代码框
<!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=gb2312" /> <title>测试练习2--CSS横向菜单</title> <style type="text/css"> body {text-align:center } #div1{ width:760px; border-bottom:solid 1px #C4DEA9; font-family: "宋体"; font-size: 12px; text-align:center; margin-top:20px; text-decoration: none; background-color: #D1D1D1; background-position: center; vertical-align: bottom; padding:20px 0px 0px 130px; } #div1 ul { list-style:none;} #div1 li { float:left; width:100px; height:20px; margin-left:3px; line-height: normal; line-height:20px; background-color: #0080C0; } #div1 a { text-decoration: none; display:block; height:20px; padding-top:4px; color: #660066; } #div1 a:hover { background:#FF0000; font-size: 12px; color: #FFFFFF; text-decoration:none; } </style> </head> <body> <div id=div1> <ul> <li><a href="#">标准的修改</a></li> <li><a href="#">标准的插入</a></li> <li><a href="#">标准的文本</a></li> <li><a href="#">标准的命令</a></li> <li><a href="#">标准的查看</a></li> <li><a href="#">标准的窗口</a></li> </ul> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]