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

　　这是一款自适应宽度的网页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> 忙就充实吗？这个问题有待联合国教科文组织考究。心存感激，对任何事报以微笑，你会知道，快乐离你不远了。 珍惜拥有，知足常乐！才能体会到生活的幸福！ </div> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

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

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性