自适应宽度的网页TAB选项卡、滑动门的雏形

发布时间：2018-11-15 22:20:26 所属栏目：活动来源：站长网

导读：这是一款自适应宽度的网页TAB选项卡、滑动门的雏形代码，可以自适应网页宽度的TAB导航栏，只是一个样式，没有加入JS动作，因此还不能作为真正的Tab来使用，主要是给CSS新手一个布局方法的参考，觉得不好的就不要看了。演示： !DOCTYPE html PUBLIC -//W3C

　　这是一款自适应宽度的网页TAB选项卡、滑动门的雏形代码，可以自适应网页宽度的TAB导航栏，只是一个样式，没有加入JS动作，因此还不能作为真正的Tab来使用，主要是给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> <title>Tab</title> <style> body { font: .8em/1.8em verdana, arial, sans-serif; background-color: #FFFFFF; margin-left: 50px; margin-right: 100px; } #content { border: 1px solid #711515; border-top: none; padding: 10px 5px 6px 5px; } #content h1 { font-size: 1.2em; color: #711515; background-color: transparent; } ul#tabnav { list-style-type: none; margin: 0; padding-left: 40px; padding-bottom: 24px; border-bottom: 1px solid #711515; font: bold 11px verdana, arial, sans-serif; } ul#tabnav li { float: left; height: 21px; background-color: #B51032; color: #FFFFFF; margin: 2px 2px 0 2px; border: 1px solid #711515; } ul#tabnav a:link, ul#tabnav a:visited { display: block; color: #FFFFFF; background-color: transparent; text-decoration: none; padding: 4px; } ul#tabnav a:hover { background-color: #F4869C; color: #FFFFFF; } body#recipes li.recipes, body#contact li.contact, body#articles li.articles, body#buy li.buy { border-bottom: 1px solid #fff; color: #000000; background-color: #FFFFFF; } body#recipes li.recipes a:link, body#recipes li.recipes a:visited, body#contact li.contact a:link, body#contact li.contact a:visited, body#articles li.articles a:link, body#articles li.articles a:visited, body#buy li.buy a:link, body#buy li.buy a:visited { color: #000000; background-color: #FFFFFF; } </style> </head> <body id="recipes"> <ul id="tabnav"> <li class="recipes"><a href="#">Recipes</a></li> <li class="contact"><a href="#">Contact Us</a></li> <li class="articles"><a href="#">Articles</a></li> <li class="buy"><a href="#">Buy Online</a></li> </ul> <div id="content"> <h1>Recipes</h1> <p>忙就充实吗？这个问题有待联合国教科文组织考究。心存感激，对任何事报以微笑，你会知道，快乐离你不远了。</p> <p>珍惜拥有，知足常乐！才能体会到生活的幸福！ </p> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：晋江门户网）

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