HTML+CSS3横向导航栏

效果图：

index.html

  

  

    





  


		
	    Tab One

	    
	    Tab Two

	    
	    Tab Three

	    
	    Tab 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 h2 {
					margin: 0;
				}