028-86922220
建站资讯

网站建设资讯

为你提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等。
当前位置：首页 - 全部资讯

怎么用HTML+CSS3横向导航栏

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

创新互联-专业网站定制、快速模板网站建设、高性价比曲阜网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式曲阜网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖曲阜地区。费用合理售后完善，10余年实体公司更值得信赖。

index.html

HTML+CSS3横向导航栏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横向导航栏”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。


当前名称：怎么用HTML+CSS3横向导航栏
分享网址：http://whjierui.cn/article/gioeep.html

其他资讯