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

您现在的位置：中国互联帮助中心>> 最新资讯>>详细内容

<<返回上一页

类似按钮效果的网站导航CSS代码: 大中小文章来源：中国互联更新时间：2011-8-18

分享到：

<p>如何使用css创建一个类似按扭的导航，看到本实例你就知道如何创建了！</p> <p align="center"><textarea class="fm" id="code" style="WIDTH: 490px; HEIGHT: 466px" rows="27" cols="78"><!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 全部选择提示：你可先修改部分代码，再按运行]

分享到：复制地址新浪微博腾讯微博 QQ空间开心网人人网百度空间百度贴吧网易微博搜狐微博

上一篇：网页特效代码:仿京东的商品分类导航条

下一篇：100%高度全屏自适应网页布局

广告联盟中的CPA、CPS、CPC、CPM分别是什么意思