<!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=utf-8" /> <meta name="keywords" content="列表样式, TAB, CSS, 导航, " /> <meta name="description" content="TAB 样式在网页设计中会经常用到，本文介绍的方法就是用 CSS 将 UL 和 LI 修饰成 TAB 样式，用CSS 控制显示的其中一个好处就是正文代码简洁，只需要修改 CSS 就能很方便的更换页面整体风格。" /> <title>一个效果不错的 TAB 样式 - 列表样式, TAB, CSS, 导航, </title> </head> <body> <div id="example"> <h3 id="example_title">一个效果不错的 TAB 样式</h3> <div id="example_main"> <!--************************************* 实例代码开始 *************************************--> <style type="text/css"> #example_main #tabnav { background:#d5d5d5; border-bottom:1px solid #333; padding-bottom:3px; width:510px; margin:0 auto; } #example_main #tabnav ul { padding:15px 0px 5px 0px; margin:5px 0px 5px 0px; list-style:none; background:#f1f1f1; border-bottom:1px solid #999; line-height:120%; } #example_main #tabnav ul li { display:inline; margin-left:10px; } #example_main #tabnav ul li a { background:#fff; padding:5px 10px 5px 10px; border:1px solid #999; line-height:normal; } #example_main #tabnav ul li a:hover { background:#ccc; color:#666; } #example_main #tabnav ul li a.here { background:#d5d5d5; padding:5px 10px 5px 10px; border-top:1px solid #999; border-left:1px solid #999; border-right:1px solid #999; border-bottom:1px solid #d5d5d5; color:#fff; font-weight:bold; } #example_main #tabnav ul li a.here:hover { background:#d5d5d5; } </style> <div id="tabnav"> <ul> <li><a href="#">首页</a></li> <li><a href="#" class="here">技术文章</a></li> <li><a href="#">提交文章</a></li> <li><a href="#">联系我们</a></li> </ul> </div> <!--************************************* 实例代码结束 *************************************--> </div> </div> <br /> </body> </html>
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
