怎么用HTML+CSS3横向导航栏

本文小编为大家详细介绍"怎么用HTML+CSS3横向导航栏"，内容详细，步骤清晰，细节处理妥当，希望这篇"怎么用HTML+CSS3横向导航栏"文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

index.html

Tab OneTab TwoTab ThreeTab Four
This is Panel One
This is Panel One
This is Panel Two
this is panel two
This is Panel Three
this is panel three
This is Panel four
this is panel four

index.css

body {font-family: Cambria, Arial;background: #333;}.tabs {width: 100%;max-width: 600px;margin: 50px auto;}input {opacity: 0;}label {cursor: pointer;background: -webkit-linear-gradient(#666, #555);color: #eee;border-radius: 5px 5px 0 0;padding: 1.5% 3%;float: left;margin-right: 2px;font:1em cambria;}label:hover {background: -webkit-linear-gradient(#777, #666);}input:checked + label {background: #fff;color: #333;}.tabs input:nth-of-type(1):checked ~ .panels .panel:first-child,.tabs input:nth-of-type(2):checked ~ .panels .panel:nth-child(2),.tabs input:nth-of-type(3):checked ~ .panels .panel:nth-child(3),.tabs input:nth-of-type(4):checked ~ .panels .panel:last-child {opacity: 1;-webkit-transition: .3s;}.panels {float: left;clear: both;position: relative;width: 100%;background: #fff;border-radius: 0 10px 10px 10px;min-height: 315px;}.panel {width: 100%;opacity: 0;position: absolute;background: #fff;border-radius: 0 10px 10px 10px;padding: 4%;box-sizing: border-box;}.panel h3 {margin: 0;}

读到这里，这篇"怎么用HTML+CSS3横向导航栏"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。