提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > dw怎样用css做图片轮播【css教程】,css

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做图片轮播的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"dw怎样用css做图片轮播【css教程】,css"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线