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

发布时间：2018-09-02 17:12:57 所属栏目：活动来源：站长网

导读：这是一款自顺应宽度的网页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>
提醒：可修改儿女码再运行!

（编辑：河北网）

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