CSS样式制作的漂亮WEB横向导航菜单

发布时间：2018-09-01 08:48:54 所属栏目：经验来源：站长网

导读：烈火网(LieHuo.Net)网页制作教程欢迎大家一起来继续学习关于CSS的教程，本文主要以CSS样式为实例，制作了一款非常漂亮的网站导航菜单，代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-

　　烈火网(LieHuo.Net)网页制作教程欢迎大家一起来继续学习关于CSS的教程，本文主要以CSS样式为实例，制作了一款非常漂亮的网站导航菜单，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>www.veryhuo.com</title> <style type="text/css"> * { font-size:12px; text-align:center; } body { background:#f0f0f0; } #nav { width:700px; margin:20px auto 0 auto; background:#f60; padding:8px 12px; } #nav li { display: inline; list-style-type: none; } #nav li a:link,#nav li a:visited { float:left; margin-right:8px; padding:2px 5px; text-decoration: none; color:#fff; border:1px solid #f60; } #nav li a:hover { color:#ff0; border:1px solid #fff; } #nav li a#current { color:#c00; border:1px solid #fff; background:#fff; } </style> </head> <body> <ul id="nav"> <li><a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/" id="current">建站首页</a></li> <li><a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/">Div+CSS教程</a></li> <li><a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/">CSS布局实例</a></li> <li><a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/">CSS2.0教程</a></li> <li><a href="http://www.veryhuo.com/" _fcksavedurl="http://www.veryhuo.com/">CSS酷站欣赏</a></li> </ul> </body> </html>
提示：可修改后代码再运行!

（编辑：云计算网_泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!