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
立即学习“前端免费学习笔记（深入）”；
<!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> <p id="images"> @@##@@ @@##@@ @@##@@ @@##@@ @@##@@ </p> <p 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> </p></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;}
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）