本文摘自PHP中文网,作者anonymity,侵删。
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!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
阅读剩余部分
相关阅读 >>
css中有哪些常见的布局方式
浅谈css如何实现九宫格提示超出数量
css怎么样实现图片圆角
css中定位的简单介绍(代码示例)
css实现一个简单的扁平化按钮
css page-break-inside属性怎么用
css怎么设置浮动
css中display属性怎么用
css怎么给文字加边框
使用css实现自适应标题浮动效果(代码实例)
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » dw怎么用css做图片轮播