adobe dreamweaver，简称“dw”，中文名称 梦想编织者，最初为美国macromedia公司开发 ，2005年被adobe公司收购。dw是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 html、css、javascript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。
adobe dreamweaver使用所见即所得的接口，亦有html（标准通用标记语言下的一个应用）编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解 html、css 和其他web 标准。 [2] 使用视觉辅助功能减少错误并提高网站开发速度。
这个html很简单，就设置了两个div,一个放置img，一个设置下面的12345图标，当点击1~5的时候，会链接到相应的图片，而图片的切换效果最终还是由#imagesimg和#images img:target的属性来设置的。
html
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>how to create an image slider with pure css3</title><link href="images.css" rel="stylesheet" type="text/css" /></head><body> <h1>css3 image slider</h1> <div id="images"> <img id="image1" src="./images/1.jpg" /> <img id="image2" src="./images/2.jpg" /> <img id="image3" src="./images/3.jpg" /> <img id="image4" src="./images/4.jpg" /> <img id="image5" src="./images/5.jpg" /> </div> <div id="slider"> <a href="#image1">1</a> <a href="#image2">2</a> <a href="#image3">3</a> <a href="#image4">4</a> <a href="#image5">5</a> </div></body></html>
css
@charset "utf-8";body { background-image:url("./images/sdl (31).png"); background-attachment: fixed;}h1 { font: bold 35px/60px helvetica, arial, sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333;}#images { width: 400px; height: 600px; overflow: hidden; position: relative; margin: 20px auto;}#images img { width: 400px; height: 600px; position: absolute; top: 0; left: -400px; z-index: 1; opacity: 1; transition: all linear 500ms; -o-transition: all linear 500ms; -moz-transition: all linear 500ms; -webkit-transition: all linear 500ms;}#images img:target { left: 0; z-index: 9; opacity: 1;}#images img:first-child { left: 0;}#slider { width: 150px; height: 30px; margin: 20px auto;}#slider a { text-decoration: none; background: #45b97c; border: 1px solid #c6e4f2; padding: 4px 6px; color: #222; margin: 20px auto;}#slider a:hover { background: #c6e4f2;}
以上就是dw怎么用css做图片轮播的详细内容。