<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搞代码-CSS水平滚动菜单-CSS应用实例(gaodaima.com)</title>
<style>
div.scrollmenu {
background-color: #333;
overflow: auto;
white-space: nowrap;
}
div.scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 14px;
text-decoration: none;
}
div.scrollmenu a:hover {
background-color: #777;
}
</style>
</head>
<body>
<div class="scrollmenu">
<a href="#home">首页</a>
<a href="#news">新闻</a>
<a href="#contact">接触</a>
<a href="#about">关于</a>
<a href="#support">支持</a>
<a href="#blog">博客</a>
<a href="#tools">工具</a>
<a href="#base">基础</a>
<a href="#custom">自定义</a>
<a href="#more">更多</a>
<a href="#logo">Logo</a>
<a href="#friends">朋友</a>
<a href="#partners">合作伙伴</a>
<a href="#people">人民</a>
<a href="#work">工作</a>
</div>
<h2>水平滚动菜单</h2>
<p>重置浏览器查看效果</p>
</body>
</html>
本文案例为大家展示了《CSS水平滚动菜单》的代码，若要看代码效果请大家点击“运行代码”按钮。
[code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>搞代码-CSS水平滚动菜单-CSS应用实例(gaodaima.com)</title> <style> div.scrollmenu { background-color: #333; overflow: auto; white-space: nowrap; } div.scrollmenu a { display: inline-block; color: white; text-align: center; padding: 14px; text-decoration: none; } div.scrollmenu a:hover { background-color: #777; } </style> </head> <body> <div class=”scrollmenu”> <a href=”#home”>首页</a> <a href=”#news”>新闻</a> <a href=”#contact”>接触</a> <a href=”#about”>关于</a> <a href=”#support”>支持</a> <a href=”#blog”>博客</a> <a href=”#tools”>工具</a> <a href=”#base”>基础</a> <a href=”#custom”>自定义</a> <a href=”#more”>更多</a> <a href=”#logo”>Logo</a> <a href=”#friends”>朋友</a> <a href=”#partners”>合作伙伴</a> <a href=”#people”>人民</a> <a href=”#work”>工作</a> </div> <h2>水平滚动菜单</h2> <p>重置浏览器查看效果</p> </body> </html>[/code]
转载请注明原文链接：CSS水平滚动菜单-CSS应用实例
