純CSS3浮動導航條點擊的頁面轉換



93 370 124



特效描述:純CSS3 浮動導航條 點擊的頁面轉換,CSS3的頁面轉換

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css' />

2. HTML代碼

<!-- Home -->
<div id="home" class="content">
	<h2>Home</h2>
	<p>So you want a single page website, uh? Well, if you follow this tutorial you will be able to create a very nifty one-pager. Check out the rest of the sections on this page so you can see for yourself what am I talking about.</p>
	<p>This page consists of different panels that will slide or appear when clicking on the respective link.</p>
	<p>With the general sibling selector we can change the color of the "selected" panel link.</p>
</div>
<!-- /Home -->
<!-- Portfolio -->
<div id="portfolio" class="panel">
	<div class="content">
		<h2>Portfolio</h2>
		<p>Some really nice portfolio shots:</p>
		<ul id="works">
			<li><a href="http://dribbble.com/shots/394177-Sheriff-Woody"><img src="images/portfolio_01.jpeg" width="250"></a></li>
			<li><a href="http://dribbble.com/shots/392403-Spaceman"><img src="images/portfolio_02.jpeg" width="250"></a></li>
			<li><a href="http://dribbble.com/shots/388799-Harvey-Birdman"><img src="images/portfolio_03.jpeg" width="250"></a></li>
		</ul>
		<p class="footnote">Dribbble shots by <a href="http://dribbble.com/stuntman">Matt Kaufenberg</a>.</p>
	</div>
</div>
<!-- /Portfolio -->
<!-- About -->
<div id="about" class="panel">
	<div class="content">
		<h2>About</h2>
		<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
		<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
		<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.</p>
		<p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
	</div>
</div>
<!-- /About -->
<!-- Contact -->
<div id="contact" class="panel">
	<div class="content">
		<h2>Contact</h2>
		<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
		<p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p>
		<form id="form">
			<p><label>Your Name</label><input type="text" /></p>
			<p><label>Your Email</label><input type="text" /></p>
			<p><label>Your Message</label><textarea></textarea></p>
		</form>
	</div>
</div>
<!-- /Contact -->
<!-- Header with Navigation -->
<div id="header">
	<h1>Page Transitions with CSS3</h1>
	<ul id="navigation">
		<li><a id="link-home" href="#home">Home</a></li>
		<li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
		<li><a id="link-about" href="#about">About Me</a></li>
		<li><a id="link-contact" href="#contact">Contact</a></li>
	</ul>
	<!-- Demo Nav -->
	<div id="codrops-demos">
		<a class="current-demo" href="#home">Demo 1</a>
		<a href="index2.html#home">Demo 2</a>
		<a href="index3.html#home">Demo 3</a>
	</div>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 浮動 懸浮 懸浮層 懸浮框 浮動層 浮動框 浮動插件 懸浮插件 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 浮動提示框 圖片廣告 圖片滑動 圖片滑塊 背景切換 大圖切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子