»
AnglaisFrançaisVietnamien

Imprimer - Web CSS Switcher contenu sans JavaScript - JavaScriptBank.com

Version complète: jsB@nk » CSS » Web CSS Switcher contenu sans JavaScript
URL: http://www.javascriptbank.com/web-css-content-switcher-without-javascript.html

Web CSS Switcher contenu sans JavaScript © JavaScriptBank.comSans JavaScript, nous pouvons encore changer de contenu Web avec CSS C'est tellement incroyable, mais c'est tellement vrai, il suffit de cliquer sur le code HTML par exemple libre, pour le tester par vous-m

Version complète: jsB@nk » CSS » Web CSS Switcher contenu sans JavaScript
URL: http://www.javascriptbank.com/web-css-content-switcher-without-javascript.html



CSS
<style type="text/css">* {margin: 0;padding: 0;}img {border: none;}h1 {line-height: 1em;font-family: "Times New Roman", Times, serif;color: #666;font-style: italic;text-align: center;padding: 30px 0 0 0;}h2 {font-family: Arial, Helvetica, sans-serif;margin: 0 0 8px 0;}h3 {font-family: Arial, Helvetica, sans-serif;margin: 0;padding: 0;}p {font-family: Arial, Helvetica, sans-serif;font-size: 20px;line-height: 1.5em;margin: 0 0 14px 0;padding: 30px 0 0 0;clear: both;text-align: center;color: #666;}#content-slider {width: 650px;overflow: hidden;height: 300px;margin: 30px 0 0 0;border: solid 1px #666;}#content-slider-inside {list-style: none;height: 320px;overflow: scroll;overflow-y: hidden;}#content-slider-inside li {width: 650px;background: #ccc;height: 300px;color: #666;font-size: 200px;font-family: "Times New Roman", Times, serif;font-style: italic;text-align: center;line-height: 300px;}#navigation {list-style: none;margin: 20px 0 0 0;float: right;}#navigation li {float: left;width: 30px;height: 30px;text-align: center;margin: 0;border: solid 1px #ccc;line-height: 30px;font-family: Arial, Helvetica, sans-serif;margin: 0 0 0 5px;}#navigation li a, #navigation li a:link, #navigation li a:visited {text-decoration: none;display: block;height: 30px;color: #666;}#navigation li a.selected, #navigation li a.selected:link, #navigation li a.selected:visited {background: #666;color: #fff;}#navigation li a:hover, #navigation li a:focus, #navigation li a:active {background: #666;color: #fff;}</style>


HTML
<div style="margin: 0pt auto; width: 650px;"><h1>A JavaScript Content Switcher That Works Without JavaScript</h1><div id="content-slider"><ul id="content-slider-inside"><li id="one">1</li><li id="two">2</li><li id="three">3</li><li id="four">4</li><li id="five">5</li></ul></div><ul id="navigation"><li><a href="#one">1</a></li><li><a href="#two">2</a></li><li><a href="#three">3</a></li><li><a href="#four">4</a></li><li><a href="#five">5</a></li></ul><p>This page has no JavaScript, but the content switcher above is fully functional, and even allows deep linking.</p><p>JavaScript can now be added as an enhancement to make the content slide, fade, or animate.</p><p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">View the same page with JavaScript/jQuery enhancing it.</a></p><p><a href="http://www.javascriptbank.com/how-create-web-css-content-switcher-without-javascript.html">&lt; Go back to the tutorial</a></p></div>