<html><head> <meta charset="utf-8"> <title>蝴蝶教程（cainiaoya.com）</title> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #dddddd; } li { float: left; } li a { display: block; padding: 8px; } </style></head><body><ul> <li><a href="#home">主页</a></li> <li><a href="#news">新闻</a></li> <li><a href="#contact">联系方式</a></li> <li><a href="#about">关于我们</a></li></ul><p><b>注意:</b> 如果没有指定!DOCTYPE，则浮动项可能产生意外结果。</p><p>将背景色添加到链接以显示链接区域。整个链接区域是可点击的，而不仅仅是文本。</p><p><b>注意:</b>overflow:hidden添加到ul元素，以防止li元素超出列表。</p></body></html>