当前位置: 首页 > 图文教程 > 网页特效 > 导航代码 > 类似按钮效果的网站导航CSS代码
No. « ‹ 1 2 »
关键字
如何使用css创建一个类似按扭的导航，看到本实例你就知道如何创建了！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Lists as navigation</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> #navigation { font-size:90% } #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 1em; } #navigation li { display: inline; } #navigation a:link, #navigation a:visited { margin-right: 0.2em; padding: 0.2em 0.6em 0.2em 0.6em; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } #navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">Recipes</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Articles</a></li> <li><a href="#">Buy Online</a></li> </ul> </div> </body> </html>
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
登陆 还没注册？
繁體中文
导航代码 中的 类似按钮效果的网站导航CSS代码
评论 (1) 