html 导航栏横向置顶,HTML+CSS3 横向导航栏

效果图：

index.html

/p>

html>

charset="UTF-8">

HTML+CSS3横向导航栏

rel="stylesheet" href="index.css" media="screen" type="text/css"

/>

checked id="one" name="tabs" type="radio">Tab

One

value="Two">Tab Two

id="three" name="tabs" type="radio">Tab

Three

type="radio">Tab Four

class="panels">

This is Panel

One

This is Panel One

class="panel">

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 h2 {margin:

0;}