adobe dreamweaver，简称“dw”，中文名称 "梦想编织者"，最初为美国macromedia公司开发 ，2005年被adobe公司收购。dw是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 html、css、javascript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

Adobe Dreamweaver使用所见即所得的接口，亦有HTML（标准通用标记语言下的一个应用）编辑的功能，借助经过简化的智能编码引擎，轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解 HTML、CSS 和其他Web 标准。 [2]  使用视觉辅助功能减少错误并提高网站开发速度。

这个html很简单，就设置了两个p,一个放置img，一个设置下面的12345图标，当点击1~5的时候，会链接到相应的图片，而图片的切换效果最终还是由#imagesimg和#images img:target的属性来设置的。

HTML

立即学习“前端免费学习笔记（深入）”；

 
CSS3 Image Slider
 
 @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ 
 
 1 2 3 4 5 

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;}