slider
纯粹CSS制作图片滑动栏
之前翻译过用jQuery制作的精彩图片滑动栏的文章，又曾利用ul和页内锚点制作过水平滚动的网页。前几天突然想，为什么不也用ul和页内锚点来制作图片滑动栏呢？用js和 jQuery制作的图片滑动栏的效果虽然很漂亮，不过对SEO不友好，而且不同浏览器，不同平台对它们的支持也不一致。纯粹用css和html制作图片滑 动栏在这些方面是有好的表现的。 效果：样例（点击可见），下载样例 制作思路如图： 具体制作步骤： 1.搭建好框架 <body> <div id=”box”> <div id=”slider”> <ul id=”image-text-div”> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> <li id=”a4″ name=”a4″>滑动栏的内容：可只是图片也可图文并存</li> </ul> </div> <ul id=”button”> <li><a href=”#a1″>1</a></li> <li><a href=”#a2″>2</a></li> <li><a href=”#a3″>3</a></li> <li><a href=”#a4″>4</a></li> </ul> </div> </body> 2.添加细节。“滑动栏的内容”加上具体的图片与文字。还有添加一些样式以控制显示效果。我在“滑动栏的内容”中加的是: <img src=”image/css-slider.jpg” /> <div> <h2>纯粹CSS图片滑动栏</h2> <p>这里是滑动栏的文字区域。主要是为了说明左边图片，摘要而已，字数不需多，重点突出即可。 此滑动栏用到HTML和CSS。</p> </div> 3.添加样式 *{ margin:0; padding:0;} body{ [...]