How to use the HTML+CSS3 horizontal navigation bar

In this article, the editor introduces in detail "how to use the HTML+CSS3 horizontal navigation bar", the content is detailed, the steps are clear, and the details are handled properly. I hope this "how to use the HTML+CSS3 horizontal navigation bar" article can help you solve your doubts.

Index.html

HTML+CSS3 horizontal navigation bar Tab OneTab TwoTab ThreeTab FourThis 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% cursor width: 600pxpolitics margin: 50px auto;} input {opacity: 0;} label {cursor: pointer;background:-webkit-linear-gradient (# 666,# 555); color: # eee;border-radius: 5px 5px 00; padding: 1.53% float: left;margin-right: 2pxfontdisplay 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% width background: # fff;border-radius: 0 10px 10px 10pxpolitical 10px 10px height: 315px;} .panel {width: 100% width opacity: 0politic position: absolute;background: # fff;border-radius: 0 10px 10px 10pxpolitical padding: 4% width boxsizing: border-box;} .panel h3 {margin: 0 } after reading this, the article "how to use the HTML+CSS3 horizontal navigation bar" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.