类似按钮效果的网站导航CSS代码

大中小文章来源：中国互联更新时间：2011-8-18 14:30:33

如何使用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 全部选择提示：你可先修改部分代码，再按运行]

版权说明:本站原创文章,由中国互联 SEO优化发表.
本文地址:https://www.hulian.top/zixun/post/4064.html

分享到：QQ空间新浪微博腾讯微博微信百度贴吧百度空间搜狐微博